maps
This commit is contained in:
NN Solex
parent
33d02a4845
commit
20c0224bc8
53 changed files with 1329 additions and 60 deletions
Binary file not shown.
15
web/output/theme/bluedot.svg
Normal file
15
web/output/theme/bluedot.svg
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<?xml version="1.0" standalone="yes"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
||||
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<svg version="1.0" width="64" height="64" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<radialGradient id="Shiny"
|
||||
cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25">
|
||||
<stop offset="0%" stop-color="#ffffff" />
|
||||
<stop offset="50%" stop-color="#00c0ff" />
|
||||
<stop offset="75%" stop-color="#0080ff" />
|
||||
<stop offset="100%" stop-color="#000000" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<circle r="30" cx="32" cy="32" fill="url(#Shiny)" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 591 B |
|
|
@ -4,7 +4,12 @@ const ios = ua.indexOf("ios") > -1;
|
|||
const windows = ua.indexOf("windows") > -1;
|
||||
const linux = ua.indexOf("linux") > -1;
|
||||
const mac = ua.indexOf("macos") > -1;
|
||||
var hashlink = document.querySelector(".geo a");
|
||||
if ( windows || mac || linux ) hashlink.href = "https://maps.google.com/?q=" + hashlink.getAttribute("latlon");
|
||||
else if ( android ) hashlink.href = "geo:0,0?q=" + hashlink.getAttribute("latlon");
|
||||
else if ( ios ) hashlink.href = "http://maps.apple.com/?ll=" + hashlink.getAttribute("latlon") + "&q=" + hashlink.innerHTML;
|
||||
var hashlinks = document.querySelectorAll(".geo a");
|
||||
var hasharray = [...hashlinks];
|
||||
if ( hasharray.length > 0 ) {
|
||||
hasharray.forEach(hashlink => {
|
||||
if ( windows || mac || linux ) hashlink.href = "https://maps.google.com/?q=" + hashlink.getAttribute("latlon");
|
||||
else if ( android ) hashlink.href = "geo:0,0?q=" + hashlink.getAttribute("latlon");
|
||||
else if ( ios ) hashlink.href = "http://maps.apple.com/?ll=" + hashlink.getAttribute("latlon") + "&q=" + hashlink.innerHTML;
|
||||
});
|
||||
}
|
||||
|
|
@ -141,4 +141,32 @@ blockquote {
|
|||
border: 1px solid;
|
||||
margin: 0;
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
#map {
|
||||
height: 100%;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
#map img {
|
||||
border: none
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: 6px 8px;
|
||||
background: white;
|
||||
background: rgba(255,255,255,0.8);
|
||||
box-shadow: 0 0 15px rgba(0,0,0,0.2);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.info h4 {
|
||||
font-size: 1.6em;
|
||||
margin: 0 0 5px;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.info span {
|
||||
line-height: 18px;
|
||||
vertical-align: top;
|
||||
}
|
||||
82
web/output/theme/map.js
Normal file
82
web/output/theme/map.js
Normal file
|
|
@ -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: '© <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);
|
||||
31
web/output/theme/nfclogo.svg
Normal file
31
web/output/theme/nfclogo.svg
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
||||
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||
width="1600.000000pt" height="1600.000000pt" viewBox="0 0 1600.000000 1600.000000"
|
||||
preserveAspectRatio="xMidYMid meet">
|
||||
<metadata>
|
||||
Created by potrace 1.15, written by Peter Selinger 2001-2017
|
||||
</metadata>
|
||||
<g transform="translate(0.000000,1600.000000) scale(0.100000,-0.100000)"
|
||||
fill="#000000" stroke="none">
|
||||
<path d="M2697 15989 c-565 -50 -1108 -264 -1567 -619 -114 -88 -391 -362
|
||||
-484 -480 -164 -206 -340 -509 -434 -745 -84 -211 -143 -430 -184 -680 l-23
|
||||
-140 -3 -5105 c-2 -3709 0 -5145 8 -5250 70 -905 549 -1724 1304 -2229 357
|
||||
-239 778 -402 1203 -466 209 -32 404 -36 1438 -33 l1030 3 -50 29 c-473 272
|
||||
-900 980 -1135 1880 -136 521 -200 952 -262 1766 -9 116 -13 1563 -15 5719
|
||||
l-3 5564 59 -54 c33 -30 1450 -1433 3150 -3119 l3091 -3065 0 -960 0 -960
|
||||
-167 166 c-276 272 -3662 3637 -4288 4261 l-580 578 -3 -3028 c-3 -3056 0
|
||||
-3387 34 -3957 76 -1289 257 -2251 558 -2968 58 -138 195 -404 271 -527 156
|
||||
-251 434 -560 648 -719 357 -266 779 -449 1320 -571 l177 -41 2633 4 c2894 3
|
||||
2667 -2 2983 62 961 194 1787 893 2148 1816 86 221 140 430 183 709 16 108 18
|
||||
413 21 5185 2 3454 0 5117 -8 5217 -19 278 -61 490 -144 743 -374 1126 -1377
|
||||
1914 -2561 2015 -72 6 -555 10 -1200 10 l-1080 0 58 -33 c100 -56 179 -119
|
||||
297 -237 465 -463 808 -1273 979 -2310 54 -329 89 -654 123 -1145 8 -125 12
|
||||
-1627 15 -5704 l4 -5533 -39 33 c-22 19 -1074 1060 -2338 2314 -1264 1254
|
||||
-2665 2642 -3111 3085 l-813 805 0 964 0 963 1853 -1843 c1018 -1014 2152
|
||||
-2143 2520 -2508 l667 -665 0 3025 c0 1749 -4 3153 -10 3329 -57 1794 -274
|
||||
2992 -695 3838 -153 308 -311 536 -525 756 -221 227 -441 386 -735 531 -266
|
||||
131 -536 223 -883 301 l-154 34 -2596 -1 c-1429 -1 -2636 -5 -2685 -10z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
Loading…
Add table
Add a link
Reference in a new issue