ttss/mpk-ttss - git.Jacekk.net

parent: 0f38f8b3 | patch | commit | ignore whitespace

Enable centering on selected feature using new "Show on map" button

Jacek Kowalski

2019-06-17 ae320718c65e75b727724729140e1546d566417c

Enable centering on selected feature using new "Show on map" button

1 files added

6 files modified

	index.html	2 ●●●●● patch \| view \| raw \| blame \| history
	lang_en.js	1 ●●●●● patch \| view \| raw \| blame \| history
	lang_pl.js	1 ●●●●● patch \| view \| raw \| blame \| history
	map.css	15 ●●●●● patch \| view \| raw \| blame \| history
	map.html	6 ●●●●● patch \| view \| raw \| blame \| history
	map.js	35 ●●●●● patch \| view \| raw \| blame \| history
	zoom.svg	1 ●●●●● patch \| view \| raw \| blame \| history

 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>

 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.',

 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.',

 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;

 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>

 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);
}

 zoom.svg

New file
@@ -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>

			@@ -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>

			@@ -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.',

			@@ -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.',

			@@ -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;

			@@ -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>

			@@ -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);
			}

New file
			@@ -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>