ルート案内アプリのUIについて

HTML+JAVASCRIPT+FLASK(PYTHON)を使って、地図(pdf)上のx,y座標と、
その位置での部分拡大図を表示させるようなWEBアプリを作ろうとしています。

データテーブルとしては、地図上の座標(x,y)と、その箇所での拡大イメージ画像のURLがあり、
地図は非常に小さいので、眼鏡ルーペで拡大するようなイメージです。

EXCELで言えば、FORM上には地図と拡大図を並列して表示しておき、
その下にテーブルを配置して、セルを選んだら、その箇所の座標から、
地図上に〇、拡大図を表示という流れを考えています。

これらのUIをJAVASCRIPTを使って作ろうとしていますが、いまいち実例がなくイメージが湧きません。

自分なりに調べたところ、下記のサイトが参考にはなりました。
https://techblog.zozo.com/entry/zoom_preview

https://github.com/Esri/storymap-tour

ただし、データテーブルの表から表示地点のＸ，Ｙ座標を読み取るところはありませんが

何かドンピシャの情報があれば、ありがたいのですが

kyoya0819

2019/10/18 02:25

pythonタグもつけて下さい

kyoya0819

2019/10/18 02:55

データテーブルの中身はどのようになっていますか？

行動規範の内容に同意します

回答1件

自己解決

がんばって実装したら、こんな感じになりました。

HTML
1<!DOCTYPE html>
2<html>
3
4<head>
5    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7</head>
8
9<style>
10    img {
11        width: 100%;
12    }
13
14    * {
15        box-sizing: border-box;
16    }
17
18    .img-zoom-container {
19        position: relative;
20    }
21
22    .img-zoom-lens {
23        position: absolute;
24        border: 2px solid #ff6e02;
25        /*set the size of the lens:*/
26        width: 45px;
27        height: 30px;
28        position: absolute;
29        box-shadow: inset 0 0 5px 0px black;
30        background-color: hsla(44, 100%, 42%, 0.09);
31        box-shadow: 0 0 black;
32        background-color: rgba(255, 193, 7, 0.17);
33
34    }
35
36    .img-zoom-result {
37        border: 1px solid #d4d4d4;
38        /*set the size of the result div:*/
39        width: 600px;
40        height: 400px;
41        zoom: 1;
42        visibility: hidden;
43    }
44</style>
45
46
47<body>
48    <div class="img-zoom-container">
49        <img id="myimage" nama="bigimage" class="org_img" src={{fname}}><!-- width="300" height="240"> -->
50        <div id="myresult" name=myresult" class="img-zoom-result" style="zoom:1"></div>
51        <div id="lenz" name="lenz" class="img-zoom-lens"></div>
52    </div>
53
54
55    <script>
56        function imageZoom(imgID, resultID, lensID, init_x, init_y, clickon) {
57            var img, lens, result, cx, cy;
58            img = document.getElementById(imgID);
59            result = document.getElementById(resultID);
60            lens = document.getElementById(lensID);
61
62            cx = result.offsetWidth / lens.offsetWidth;
63            cy = result.offsetHeight / lens.offsetHeight;
64            result.style.backgroundImage = "url('" + img.src + "')";
65            result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
66            if (init_x) {
67                clickon = false;
68                x = (init_x / img.naturalWidth) * img.width - (lens.offsetWidth / 2);
69                y = (init_y / img.naturalHeight) * img.height - (lens.offsetHeight / 2);
70                if (x > img.width - lens.offsetWidth) { x = img.width - lens.offsetWidth; }
71                if (x < 0) { x = 0; }
72                if (y > img.height - lens.offsetHeight) { y = img.height - lens.offsetHeight; }
73                if (y < 0) { y = 0; }
74                lens.style.left = x + "px";
75                lens.style.top = y + "px";
76                result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";
77                top.frm_a01c.refresh(result);
78            } else {
79                lens.addEventListener("click", toggle1);
80                lens.addEventListener("mousemove", moveLens);
81                img.addEventListener("mousemove", moveLens);
82            }
83            function moveLens(e) {
84                if (clickon == true) {
85                    var pos, x, y;
86                    e.preventDefault();
87                    pos = getCursorPos(e);
88                    x = pos.x - (lens.offsetWidth / 2);
89                    y = pos.y - (lens.offsetHeight / 2);
90                    if (x > img.width - lens.offsetWidth) { x = img.width - lens.offsetWidth; }
91                    if (x < 0) { x = 0; }
92                    if (y > img.height - lens.offsetHeight) { y = img.height - lens.offsetHeight; }
93                    if (y < 0) { y = 0; }
94                    lens.style.left = x + "px";
95                    lens.style.top = y + "px";
96                    result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";
97
98                    xsize = (x + (lens.offsetWidth / 2)) / top.frm_a01b.myimage.width * top.frm_a01b.myimage.naturalWidth;
99                    ysize = (y + (lens.offsetHeight / 2)) / top.frm_a01b.myimage.height * top.frm_a01b.myimage.naturalHeight;
100                    top.frm_a01c.fname.value = "(x,y)=(" + parseInt(xsize) + "," + parseInt(ysize) + ")";
101                    top.frm_a01c.refresh(result);
102                }
103            }
104            function getCursorPos(e) {
105                var a, x = 0, y = 0;
106                e = e || window.event;
107                a = img.getBoundingClientRect();
108                x = e.pageX - a.left;
109                y = e.pageY - a.top;
110                x = x - window.pageXOffset;
111                y = y - window.pageYOffset;
112                return { x: x, y: y };
113            }
114            function toggle1(e) {
115                if (clickon == true) { clickon = false; }
116                else { clickon = true; }
117            }
118        }
119    </script>
120
121    <script>
122        window.onload = function () {
123            imageZoom("myimage", "myresult", "lenz", null, null, true);
124        }
125    </script>
126
127</body>
128
129</html>