cotugno/recorder
2
Fork 0
mirror of https://github.com/owntracks/recorder.git synced 2024-11-15 09:58:40 -07:00
Code Issues Packages Projects Releases Wiki Activity

Add support for OSM using Leaflet

Browse Source
This commit is contained in:
Sven Klomp 2016-12-18 20:43:38 +01:00
parent 73b19bc524
commit 61ad5ee86e
4 changed files with 117 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

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

45
docroot/map/index.html
View File

@ -17,28 +17,49 @@
</style>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src="../static/js/mustache.js"></script>
<script src="../static/js/moment.min.js"></script>
<script src="functions.js"></script>
<script src="map_google"></script>
<script src="map_leaflet.js"></script>
<script src="../static/apikey.js"></script>
<script>
function loadMapsAPI() {
var script = document.createElement('script');
script.type = 'text/javascript';
function loadMapsAPI() {
var script = document.createElement('script');
script.type = 'text/javascript';
if (typeof apiKey != 'undefined' | apiKey != "" ) {
script.src = 'https://maps.googleapis.com/maps/api/js?v=3' +
'&signed_in=true&key=' + apiKey +'&callback=initialize';
document.body.appendChild(script);
'&signed_in=true&key=' + apiKey +'&callback=initialize_googlemaps';
} else {
// Dynamic script loading from http://stackoverflow.com/a/8578840
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)){ return; }
js = d.createElement(s); js.id = id;
js.onload = function(){
initialize_leaflet();
};
js.src = "https://unpkg.com/leaflet@1.0.2/dist/leaflet.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'leaflet'));
}
document.addEventListener("DOMContentLoaded", function(event) {
loadMapsAPI();
});
document.body.appendChild(script);
}
document.addEventListener("DOMContentLoaded", function(event) {
loadMapsAPI();
});
</script>
</head>
<body>
<div id="map-canvas"></div>
<div id="map-canvas"></div>
</body>
</html>

5
docroot/map/functions.js → docroot/map/map_google.js
View File

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

76
docroot/map/map_leaflet.js Normal file
View File

@ -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: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> 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 }}<br/><span class='latlon'>({{ lat }},{{lon}})</span> {{ 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());
});
}