maps

web/nfc-theme/static/map.js

@@ -0,0 +1,82 @@
+var bluedot = L.icon({
+    iconUrl: '/theme/bluedot.svg',
+    iconSize:     [18, 18],
+    iconAnchor:   [9, 9],
+    popupAnchor:  [0, -10]
+});
+
+var nfctag = L.icon({
+    iconUrl: '/theme/nfclogo.svg',
+    iconSize:     [20, 20],
+    iconAnchor:   [10, 10],
+    popupAnchor:  [0, -12]
+});
+
+const showNfcTags = L.geoJSON(nfcTags, {
+    pointToLayer(feature, latlng) { return L.marker(latlng, { icon: nfctag });},
+    onEachFeature
+});
+
+const map = L.map('map').fitBounds(showNfcTags.getBounds());
+
+const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    maxZoom: 19,
+    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+}).addTo(map);
+
+showNfcTags.addTo(map);
+map.on('locationfound', onLocationFound);
+map.on('locationerror', onLocationError);
+map.locate({setView: false, watch: true});
+
+function onEachFeature(feature, layer) {
+    let popupContent = ``;
+
+    if (feature.properties && feature.properties.title) {
+        popupContent += feature.properties.title;
+    }
+
+    layer.bindPopup(popupContent);
+}
+
+var locationMarker, locationCircle;
+pageload = true;
+
+function onLocationFound(e) {
+    if (locationMarker)  { 
+        map.removeLayer(locationMarker);
+        map.removeLayer(locationCircle);
+    }
+    const radius = e.accuracy / 2;
+    if ( pageload ) { 
+        area = showNfcTags.getBounds();
+        area.extend(e.latlng);
+        map.fitBounds(area);
+        map.zoomOut(1, {animate: false});
+        pageload = false;
+    }
+    locationMarker = L.marker(e.latlng, {icon: bluedot}).addTo(map)
+    locationCircle = L.circle(e.latlng, radius).addTo(map);
+}
+
+function onLocationError(e) {
+    alert(e.message);
+}
+
+var info = L.control({position: 'topright'});
+var download = L.control({position: 'bottomleft'});
+
+info.onAdd = function (map) {
+    this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
+    this._div.innerHTML = '<h4>' + nfcTags["title"] + '</h4>' + '<img style="display:inline; width:18px" src="/theme/nfclogo.svg" /> <span>NFC Tag Locations</span>';
+    return this._div;
+};
+
+download.onAdd = function (map) {
+    this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
+    this._div.innerHTML = 'Download <a href="/projects/' + nfcTags["id"] + '.gpx">GPX</a> <a href="/projects/' + nfcTags["id"] + '.kml">KML</a>';
+    return this._div;
+};
+
+info.addTo(map);
+download.addTo(map);