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