From ae320718c65e75b727724729140e1546d566417c Mon Sep 17 00:00:00 2001
From: Jacek Kowalski <Jacek@jacekk.info>
Date: Mon, 17 Jun 2019 19:32:13 +0000
Subject: [PATCH] Enable centering on selected feature using new "Show on map" button
---
map.js | 35 ++++++++++++-----
lang_en.js | 1
index.html | 2
map.html | 6 +-
zoom.svg | 1
lang_pl.js | 1
map.css | 15 +++++++
7 files changed, 46 insertions(+), 15 deletions(-)
diff --git a/index.html b/index.html
index 1929c1e..e65bc24 100644
--- a/index.html
+++ b/index.html
@@ -134,7 +134,7 @@
</div>
</div>
<script src="https://polyfill.io/v3/polyfill.min.js?features=Promise,XMLHttpRequest"></script>
- <script type="text/javascript" src="lang_pl.js?v8" id="lang_script"></script>
+ <script type="text/javascript" src="lang_pl.js?v9" id="lang_script"></script>
<script type="text/javascript" src="common.js?v9"></script>
<script type="text/javascript" src="index.js?v8"></script>
</body>
diff --git a/lang_en.js b/lang_en.js
index 3a06fa7..a9428b4 100644
--- a/lang_en.js
+++ b/lang_en.js
@@ -60,6 +60,7 @@
l: 'Your location',
},
+ show_on_map: 'Show on map',
select_feature: 'There is more than one feature here. Select the proper one:',
departures_for_stop: 'Click for stop departures (and not only this stop point).',
departures_for_trams: 'Switch to tram departures.',
diff --git a/lang_pl.js b/lang_pl.js
index ab9a890..d6e280d 100644
--- a/lang_pl.js
+++ b/lang_pl.js
@@ -60,6 +60,7 @@
'l': 'Twoja lokalizacja',
},
+ show_on_map: 'Pokaż na mapie',
select_feature: 'W tym miejscu znajduje się więcej niż jeden element. Wybierz właściwy z listy:',
departures_for_stop: 'Kliknij, by zobaczyć odjazdy dla całego przystanku (a nie tylko peronu).',
departures_for_trams: 'Przełącz na odjazdy tramwajów.',
diff --git a/map.css b/map.css
index ad10ee5..2f499d9 100644
--- a/map.css
+++ b/map.css
@@ -135,6 +135,21 @@
float: right;
}
+.pad-left-icon {
+ margin-left: 0.2rem;
+}
+.icon-zoom {
+ display: inline-block;
+ height: 1rem;
+ width: 1rem;
+ text-indent: 1rem;
+ overflow: hidden;
+ background-image: url(zoom.svg);
+ background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OTAiIGhlaWdodD0iNDkwIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMzYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgZD0ibTI4MCwyNzhhMTUzLDE1MyAwIDEsMC0yLDJsMTcwLDE3MG0tOTEtMTE3IDExMCwxMTAtMjYsMjYtMTEwLTExMCIvPjwvc3ZnPgo=);
+ background-size: contain;
+ background-repeat: no-repeat;
+}
+
#title {
top: .5em;
left: .5em;
diff --git a/map.html b/map.html
index b5f5aa5..afc9df8 100644
--- a/map.html
+++ b/map.html
@@ -5,7 +5,7 @@
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v5.3.0/css/ol.css" integrity="sha384-C7SzZySesoxngSK5V0BaD1DUap0LPZGWZpnXQGoIwvBXFc8G21y4s1QYvyr84FNa" crossorigin="anonymous">
-<link rel="stylesheet" href="map.css?v3" type="text/css" />
+<link rel="stylesheet" href="map.css?v4" type="text/css" />
</head>
<body>
<div id="map">
@@ -23,8 +23,8 @@
<div id="panel"></div>
<script src="https://polyfill.io/v3/polyfill.min.js?features=Array.prototype.forEach,Array.prototype.includes,Array.prototype.map,Element.prototype.classList,Promise,String.prototype.startsWith,XMLHttpRequest,requestAnimationFrame"></script>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v5.3.0/build/ol.js" integrity="sha384-iQkGyyH4ioz3m+maM3s9MX1Oq67mACa4B9Z3ovUv3Sv37LJ96fx3WnZfLoiC3Wfl" crossorigin="anonymous"></script>
-<script tyle="text/javascript" src="lang_pl.js?v8" id="lang_script"></script>
+<script tyle="text/javascript" src="lang_pl.js?v9" id="lang_script"></script>
<script tyle="text/javascript" src="common.js?v9"></script>
-<script tyle="text/javascript" src="map.js?v21"></script>
+<script tyle="text/javascript" src="map.js?v22"></script>
</body>
</html>
diff --git a/map.js b/map.js
index 4ce669a..9089c62 100644
--- a/map.js
+++ b/map.js
@@ -193,7 +193,7 @@
fill = '#05B';
}
if(selected) {
- fill = '#292';
+ fill = '#922';
}
var image = '<svg xmlns="http://www.w3.org/2000/svg" height="30" width="20"><polygon points="10,0 20,23 0,23" style="fill:'+fill+';stroke:'+color_type+';stroke-width:3" /></svg>';
@@ -583,7 +583,19 @@
loader.colSpan = thead.childNodes.length;
addParaWithText(div, typeName).className = 'type';
- addParaWithText(div, name).className = 'name';
+
+ var nameElement = addParaWithText(div, name + ' ');
+ nameElement.className = 'name';
+
+ var showOnMapElement = addElementWithText(nameElement, 'a', lang.show_on_map);
+ var showOnMapFunction = function() {
+ setTimeout(function () {map.getView().animate({
+ center: feature.getGeometry().getCoordinates(),
+ })}, 10);
+ };
+ showOnMapElement.addEventListener('click', showOnMapFunction);
+ showOnMapElement.className = 'icon-zoom pad-left-icon';
+ showOnMapElement.title = lang.show_on_map;
if(additional) {
div.appendChild(additional);
@@ -595,10 +607,7 @@
window.location.hash = '#!' + feature.getId();
}
- setTimeout(function () {map.getView().animate({
- center: feature.getGeometry().getCoordinates(),
- }) }, 10);
-
+ showOnMapFunction();
panel.show(div, function() {
if(!ignore_hashchange) {
@@ -937,11 +946,15 @@
window.addEventListener('hashchange', hash);
setTimeout(function() {
- if(trams_xhr) trams_xhr.abort();
- if(trams_timer) clearTimeout(trams_timer);
- if(buses_xhr) buses_xhr.abort();
- if(buses_timer) clearTimeout(buses_timer);
-
+ ttss_types.forEach(function(type) {
+ if(vehicles_xhr[type]) {
+ vehicles_xhr[type].abort();
+ }
+ if(vehicles_timer[type]) {
+ clearTimeout(vehicles_timer[type]);
+ }
+ });
+
fail(lang.error_refresh);
}, 1800000);
}
diff --git a/zoom.svg b/zoom.svg
new file mode 100644
index 0000000..c26f046
--- /dev/null
+++ b/zoom.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="490" height="490"><path fill="none" stroke="#000" stroke-width="36" stroke-linecap="round" d="m280,278a153,153 0 1,0-2,2l170,170m-91-117 110,110-26,26-110-110"/></svg>
--
Gitblit v1.9.1