From 61ad5ee86ea5166416b1138b11bd440e12feaebe Mon Sep 17 00:00:00 2001 From: Sven Klomp Date: Sun, 18 Dec 2016 20:43:38 +0100 Subject: [PATCH] Add support for OSM using Leaflet --- README.md | 4 +- docroot/map/index.html | 47 +++++++++---- docroot/map/{functions.js => map_google.js} | 5 +- docroot/map/map_leaflet.js | 76 +++++++++++++++++++++ 4 files changed, 117 insertions(+), 15 deletions(-) rename docroot/map/{functions.js => map_google.js} (97%) create mode 100644 docroot/map/map_leaflet.js diff --git a/README.md b/README.md index da335d9..624268a 100644 --- a/README.md +++ b/README.md @@ -870,7 +870,9 @@ Note, that Jane's user/device tuple should also be returned in order to display ### Browser API keys -In order to use the Recorder's maps and views, you have to obtain a [Google API "Browser key"](https://developers.google.com/maps/documentation/javascript/get-api-key). You then pass this key to your Recorder by configuring it in the defaults configuration file or by overriding that with the option: +By default, the Recorder uses [OpenStreetMap](https://www.openstreetmap.org) to view points and tracks. + +In order to use Google Maps, you have to obtain a [Google API "Browser key"](https://developers.google.com/maps/documentation/javascript/get-api-key). You then pass this key to your Recorder by configuring it in the defaults configuration file or by overriding that with the option: ```bash $ ot-recorder --browser-apikey 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' ... diff --git a/docroot/map/index.html b/docroot/map/index.html index 579e48f..b5e95f9 100644 --- a/docroot/map/index.html +++ b/docroot/map/index.html @@ -17,28 +17,49 @@ + + + + - + + -
+
diff --git a/docroot/map/functions.js b/docroot/map/map_google.js similarity index 97% rename from docroot/map/functions.js rename to docroot/map/map_google.js index efb9736..f6efd95 100644 --- a/docroot/map/functions.js +++ b/docroot/map/map_google.js @@ -17,7 +17,7 @@ function processPoints(geometry, callback, thisArg) { } } -function initialize() { +function initialize_googlemaps() { var map; var center = new google.maps.LatLng( 46.993665, 10.399188); @@ -44,6 +44,9 @@ function initialize() { for (var i = 1; i < parts.length - 2; i++) { dataURL = dataURL + "/" + parts[i]; } + + dataURL = "http://kantaki:8083" + dataURL = dataURL + "/api/0/locations" + location.search; console.log("dataURL = " + dataURL); diff --git a/docroot/map/map_leaflet.js b/docroot/map/map_leaflet.js new file mode 100644 index 0000000..9a149d5 --- /dev/null +++ b/docroot/map/map_leaflet.js @@ -0,0 +1,76 @@ + +function initialize_leaflet() { + var 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' + }).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 = "http://kantaki:8083" + 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 = { + type: "FeatureCollection", + features: [] + }; + + var geojsonLayer = new L.GeoJSON( empty_geojson , { + pointToLayer: function (feature, latlng) { + return L.circleMarker(latlng, geojsonMarkerOptions); + }, + onEachFeature: function(feature, layer) { + if (feature.geometry.type == "Point") { + var data ={} + data.lat = feature.geometry.coordinates[0].toFixed(4); + data.lon = feature.geometry.coordinates[1].toFixed(4); + data.addr = feature.properties.address; + var tst = feature.properties.tst; + var dt = moment.utc(tst * 1000).local(); + data.tst = tst; + data.fulldate = dt.format("DD MMM YYYY HH:mm:ss") + var t = "{{ addr }}
({{ lat }},{{lon}}) {{ fulldate }}"; + if (typeof(tst) === 'undefined') { + t = "Position: {{lat}}, {{lon}}"; + } + + layer.bindPopup(Mustache.render(t, data)); + } + }, + style : function(feature) { + if (feature.geometry.type == "Point") { + return {} + } else { + return { + color : "#ff0000", + weight : 4, + } + } + } + }); + + map.addLayer(geojsonLayer); + + $.getJSON( dataURL, function( data ) { + geojsonLayer.addData(data) + map.fitBounds(geojsonLayer.getBounds()); + }); + +}