From 56f2dfd9895c0a28040fea4bbb8771946ca9d59e Mon Sep 17 00:00:00 2001 From: atjn Date: Sun, 17 Apr 2022 19:34:04 +0200 Subject: [PATCH] Modernize historic map --- docroot/map/index.html | 61 ++++------------- docroot/map/map_google.js | 137 ++++++++++++++++--------------------- docroot/map/map_leaflet.js | 117 ++++++++++++------------------- 3 files changed, 116 insertions(+), 199 deletions(-) diff --git a/docroot/map/index.html b/docroot/map/index.html index 7610d04..8482f52 100644 --- a/docroot/map/index.html +++ b/docroot/map/index.html @@ -1,61 +1,28 @@ - + + GeoJSON track - - - - + - - - - - - - diff --git a/docroot/map/map_google.js b/docroot/map/map_google.js index e7658e5..14f83c8 100644 --- a/docroot/map/map_google.js +++ b/docroot/map/map_google.js @@ -3,95 +3,74 @@ // https://developers.google.com/maps/documentation/javascript/datalayer -var infowindow; +import { debug } from "../utils/debug.js"; + +import { generatePopupHTML } from "../utils/map.js"; +import { markerStyle, strokeStyle } from "../utils/map_google.js"; + +let infowindow; function processPoints(geometry, callback, thisArg) { - if (geometry instanceof google.maps.LatLng) { - callback.call(thisArg, geometry); - } else if (geometry instanceof google.maps.Data.Point) { - callback.call(thisArg, geometry.get()); - } else { - geometry.getArray().forEach(function(g) { - processPoints(g, callback, thisArg); - }); - } + if (geometry instanceof google.maps.LatLng) { + callback.call(thisArg, geometry); + } else if (geometry instanceof google.maps.Data.Point) { + callback.call(thisArg, geometry.get()); + } else { + geometry.getArray().forEach(function(g) { + processPoints(g, callback, thisArg); + }); + } } -function initialize_googlemaps() { +export function initialize(dataUrl) { + let map; + const center = new google.maps.LatLng( 46.993665, 10.399188); - var map; - var center = new google.maps.LatLng( 46.993665, 10.399188); + infowindow = new google.maps.InfoWindow(); - infowindow = new google.maps.InfoWindow(); + const mapOptions = { + center, + zoom: 5, + mapTypeId: google.maps.MapTypeId.ROADMAP, + scrollwheel: false, + disableDefaultUI: false, + panControl: false, + scaleControl: false, + streetViewControl: true, + overviewMapControl: true, + }; - mapOptions = { - center: center, - zoom: 5, - mapTypeId: google.maps.MapTypeId.ROADMAP, - scrollwheel: false, - disableDefaultUI: false, - panControl: false, - scaleControl: false, - streetViewControl: true, - overviewMapControl: true, - }; + map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); - map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); + debug("Loading data from URL:", dataUrl); + map.data.loadGeoJson(dataUrl); - var dataURL = location.protocol + "//" + location.host; + const featureStyle = { + ...strokeStyle, + icon: markerStyle, + }; + map.data.setStyle(featureStyle); - var parts = location.pathname.split('/'); - for (var i = 1; i < parts.length - 2; i++) { - dataURL = dataURL + "/" + parts[i]; - } - dataURL = dataURL + "/api/0/locations" + location.search; + // Zoom to show all the features + const bounds = new google.maps.LatLngBounds(); + map.data.addListener('addfeature', function (e) { + processPoints(e.feature.getGeometry(), bounds.extend, bounds); + map.fitBounds(bounds); + }); - console.log("dataURL = " + dataURL); + // click dot on map to show info + map.data.addListener('click', function(event) { + const description = generatePopupHTML({ + lat: event.latLng.lat().toFixed(4), + lon: event.latLng.lng().toFixed(4), + addr: event.feature.getProperty("address"), + tst: event.feature.getProperty("tst"), + vel: event.feature.getProperty("vel"), + acc: event.feature.getProperty("acc"), + }); - map.data.loadGeoJson(dataURL); - - var circle ={ - path: google.maps.SymbolPath.CIRCLE, - fillColor: '#ff0000', - fillOpacity: .9, - scale: 5.5, - strokeColor: 'white', - strokeWeight: 2 - }; - var featureStyle = { - strokeColor: 'red', - strokeWeight: 4, - icon: circle - }; - map.data.setStyle(featureStyle); - - // Zoom to show all the features - var bounds = new google.maps.LatLngBounds(); - map.data.addListener('addfeature', function (e) { - processPoints(e.feature.getGeometry(), bounds.extend, bounds); - map.fitBounds(bounds); - }); - - // click dot on map to show info - map.data.addListener('click', function(event) { - var tst = event.feature.getProperty('tst'); - var dt = moment.utc(tst * 1000).local(); - var data = { - lat: event.latLng.lat().toFixed(4), - lon: event.latLng.lng().toFixed(4), - tst: tst, - addr: event.feature.getProperty('address'), - fulldate: dt.format("DD MMM YYYY HH:mm:ss"), - vel: event.feature.getProperty('vel'), - }; - - var t = "{{ addr }}
({{ lat }},{{lon}}) vel={{vel}} {{ fulldate }}"; - if (typeof(tst) === 'undefined') { - t = "Position: {{lat}}, {{lon}}"; - } - - infowindow.setContent(Mustache.render(t, data)); - infowindow.setPosition(event.latLng); - infowindow.open(map); - }); + infowindow.setContent(description); + infowindow.setPosition(event.latLng); + infowindow.open(map); + }); } diff --git a/docroot/map/map_leaflet.js b/docroot/map/map_leaflet.js index f4aea70..6b346e9 100644 --- a/docroot/map/map_leaflet.js +++ b/docroot/map/map_leaflet.js @@ -1,97 +1,68 @@ -function initialize_leaflet() { - var map = L.map('map-canvas').setView([0.0, 0.0], 1); +import { fetchApiData } from "../utils/network.js"; +import { generatePopupHTML } from "../utils/map.js"; +import { markerStyle, strokeStyle } from "../utils/map_leaflet.js"; + +export async function initialize(dataUrl) { + + const data = fetchApiData({url: dataUrl}); + + const map = L.map('map-canvas').setView([0.0, 0.0], 1); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { - attribution: '© OpenStreetMap contributors' + attribution: '© OpenStreetMap contributors', }).addTo(map); - - var dataURL = location.protocol + "//" + location.host; - - var parts = location.pathname.split('/'); - for (var i = 1; i < parts.length - 2; i++) { - dataURL = dataURL + "/" + parts[i]; - } - dataURL = dataURL + "/api/0/locations" + location.search; - - console.log("dataURL = " + dataURL); - - var geojsonMarkerOptions = { - radius: 5, - fillColor: "#ff0000", - color: "#ffffff", - weight: 2, - opacity: 1, - fillOpacity: 0.9 - }; - - var empty_geojson = { + const empty_geojson = { type: "FeatureCollection", - features: [] + features: [], }; - var lastLatLng = L.latLng(0.0, 0.0); + let lastLatLng = L.latLng(0.0, 0.0); - var geojsonLayer = new L.GeoJSON(empty_geojson, { + const geojsonLayer = new L.GeoJSON(empty_geojson, { pointToLayer: function (feature, latlng) { - return L.circleMarker(latlng, geojsonMarkerOptions); + return L.circleMarker(latlng, markerStyle); }, onEachFeature: function(feature, layer) { - if (feature.geometry.type == 'Point') { - var data ={}; - data.address = feature.properties.address; - data.lat = feature.geometry.coordinates[1].toFixed(5); - data.lon = feature.geometry.coordinates[0].toFixed(5); - data.vel = feature.properties.vel; - data.acc = feature.properties.acc; - data.tst = feature.properties.tst; - var localtime = moment.utc(data.tst * 1000).local(); - data.timestring = localtime.format('YYYY-MM-DD, ddd, HH:mm:ss Z'); + if (feature.geometry.type === 'Point') { + const description = generatePopupHTML({ + ...feature.properties, + lat: feature.geometry.coordinates[1].toFixed(5), + lon: feature.geometry.coordinates[0].toFixed(5), + }); - var text = []; - data.accstring = ""; - if(data.timestring) {text.push('{{ timestring }}')} - if(data.acc !== undefined) {data.accstring="acc: " + data.acc}; - if(data.lat && data.lon) {text.push('{{ lat }},{{ lon }} {{ accstring }}')} - if(data.address) {text.push('{{ address }}')} - if(data.vel !== undefined) {text.push('{{ vel }} km/h')} - layer.bindPopup(Mustache.render(text.join('
'), data)); + layer.bindPopup(description); } }, - style : function(feature) { - if (feature.geometry.type == 'Point') { - return {} + style: function(feature) { + if (feature.geometry.type === 'Point') { + return {}; } else { - return { - color : "#ff0000", - weight : 4, - } + return strokeStyle; } }, coordsToLatLng: function(coords) { - var lat = coords[1]; - var lon = coords[0]; - var dist0 = Math.abs(lon - lastLatLng.lng); - var dist1 = Math.abs(lon + 360.0 - lastLatLng.lng); - var dist2 = Math.abs(lon - 360.0 - lastLatLng.lng); - if (dist0 > dist1 || dist0 > dist2) { - if (dist0 > dist1) { - lon = lon + 360.0; - } else { - lon = lon - 360.0; - } - } - var latLng = L.GeoJSON.coordsToLatLng([lon, lat]); - lastLatLng = latLng; - return latLng - } + let lat = coords[1]; + let lon = coords[0]; + const dist0 = Math.abs(lon - lastLatLng.lng); + const dist1 = Math.abs(lon + 360.0 - lastLatLng.lng); + const dist2 = Math.abs(lon - 360.0 - lastLatLng.lng); + if (dist0 > dist1 || dist0 > dist2) { + if (dist0 > dist1) { + lon += 360.0; + } else { + lon -= 360.0; + } + } + const latLng = L.GeoJSON.coordsToLatLng([lon, lat]); + lastLatLng = latLng; + return latLng; + }, }); map.addLayer(geojsonLayer); - $.getJSON( dataURL, function( data ) { - geojsonLayer.addData(data) - map.fitBounds(geojsonLayer.getBounds()); - }); + geojsonLayer.addData(await data); + map.fitBounds(geojsonLayer.getBounds()); }