first marker (siegburg)
This commit is contained in:
BlubbFish
parent
e49ef10ba7
commit
90388b6cab
318
geolet.js
Normal file
318
geolet.js
Normal file
@ -0,0 +1,318 @@
|
||||
/*
|
||||
GEOLET version 20.12.31
|
||||
Copyright (c) 2020 Ruben Holthuijsen; available under the MIT license
|
||||
https://github.com/rhlt/leaflet-geolet/
|
||||
*/
|
||||
|
||||
(function () {
|
||||
|
||||
var _consolePrefix = '[GEOLET] ';
|
||||
var L = window.L;
|
||||
|
||||
if (!L || !L.map) {
|
||||
//Was Leaflet loaded correctly?
|
||||
console.error(_consolePrefix + 'Missing Leaflet');
|
||||
return;
|
||||
}
|
||||
|
||||
var _merge = function (object1, object2) {
|
||||
//Merge all properties from object 2 into object 1, recursively for plain objects
|
||||
|
||||
if (typeof object2 != 'object' || object2 === null)
|
||||
return object1;
|
||||
if (typeof object1 != 'object' || object1 === null)
|
||||
object1 = {};
|
||||
|
||||
for (key in object2) if (({}).hasOwnProperty.call(object2, key)) {
|
||||
if (typeof object2[key] == 'object' && object2[key] !== null && Object.getPrototypeOf(object2[key]) == Object.getPrototypeOf({})) {
|
||||
//Plain object: merge the next level
|
||||
object1[key] = _merge(object1[key], object2[key]);
|
||||
} else {
|
||||
//Anything else (including typed objects): just assign it
|
||||
object1[key] = object2[key];
|
||||
}
|
||||
}
|
||||
|
||||
return object1;
|
||||
};
|
||||
|
||||
var _defaultMarker = function (controlOptions) {
|
||||
//Generate a default marker
|
||||
return L.marker(null, {
|
||||
icon: L.divIcon({
|
||||
html: '<svg width="20" height="20" viewport="0 0 20 20"><circle cx="10" cy="10" r="10" style="fill:white"/><circle cx="10" cy="10" r="7" style="fill:none;stroke:currentColor;stroke-width:2px"/><circle cx="10" cy="10" r="4" style="fill:currentColor"/></svg>',
|
||||
iconAnchor: [10, 10],
|
||||
className: ''
|
||||
}),
|
||||
attribution: '<a href="https://github.com/rhlt/leaflet-geolet" target="_blank">Geolet</a>',
|
||||
zIndexOffset: 1000
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
L.Geolet = L.Control.extend({
|
||||
|
||||
options: {
|
||||
title: 'Find current location',
|
||||
className: null,
|
||||
activeClassName: null,
|
||||
style: { display: 'flex', color: '' },
|
||||
activeStyle: { display: 'flex', color: '#E00' },
|
||||
html: '<svg width="16" height="16" viewport="0 0 16 16" style="margin:auto auto"><circle cx="8" cy="8" r="7" style="fill:none;stroke:currentColor;stroke-width:2px"/><circle cx="8" cy="8" r="4" style="fill:currentColor"/></svg>',
|
||||
geoOptions: { enableHighAccuracy: true, maximumAge: 30000, timeout: 27000 },
|
||||
marker: null,
|
||||
popup: null,
|
||||
popupContent: null,
|
||||
updatePopupWhenOpen: true,
|
||||
autoPan: true,
|
||||
minZoom: 9
|
||||
},
|
||||
|
||||
_a: null,
|
||||
_map: null,
|
||||
_watchId: null,
|
||||
_latLng: null,
|
||||
_popupContent: null,
|
||||
_first: false,
|
||||
|
||||
marker: null,
|
||||
popup: null,
|
||||
|
||||
initialize: function (options) {
|
||||
//Set control options
|
||||
if (typeof options == 'object' && options !== null)
|
||||
L.setOptions(this, options);
|
||||
},
|
||||
|
||||
isActive: function () {
|
||||
//Is the control active (are we displaying the current location, or trying to obtain it)?
|
||||
return this._watchId ? true : false;
|
||||
},
|
||||
|
||||
getLatLng: function () {
|
||||
//Returns the coordinates of the location currently displayed on the map (if any) -- might still be null if isActive()
|
||||
return this.isActive() ? this._latLng : null;
|
||||
},
|
||||
|
||||
updatePopup: function () {
|
||||
//Update the popup with new content
|
||||
var popupContent;
|
||||
if (!this._popup)
|
||||
return;
|
||||
if (typeof this.options.popupContent == 'undefined' || this.options.popupContent === null) {
|
||||
popupContent = '<b>' + L.Geolet.formatLatLng(this.getLatLng()) + '</b>';
|
||||
} else if (typeof this.options.popupContent == 'function') {
|
||||
popupContent = this.options.popupContent.call(this, this.getLatLng());
|
||||
} else if (this.options.popupContent) {
|
||||
popupContent = this.options.popupContent;
|
||||
}
|
||||
if (popupContent !== null)
|
||||
this._popup.setContent(popupContent);
|
||||
},
|
||||
|
||||
activate: function () {
|
||||
//Activate the current location display
|
||||
|
||||
if (!L.Geolet.browserSupport)
|
||||
return;
|
||||
|
||||
this.styleAnchor(true);
|
||||
|
||||
var control = this;
|
||||
|
||||
var geoSuccessCallback = function (data) {
|
||||
var first = !!control._first;
|
||||
control._latLng = L.latLng(data.coords.latitude, data.coords.longitude, data.coords.altitude);
|
||||
control._popupContent = control.options.popupContent;
|
||||
if (control._popup) {
|
||||
if (control._popup.isOpen() && control.options.updatePopupWhenOpen)
|
||||
control.updatePopup();
|
||||
}
|
||||
if (control._marker) {
|
||||
control._marker.setLatLng(control._latLng);
|
||||
control._marker.addTo(control._map);
|
||||
}
|
||||
if (control._first) {
|
||||
control._first = false;
|
||||
if (control.options.autoPan)
|
||||
control._map.setView(control._latLng, control.options.minZoom ? Math.max(control._map.getZoom(), control.options.minZoom) : control._map.getZoom());
|
||||
}
|
||||
control._map.fire('geolet_success', {
|
||||
control: control,
|
||||
first: first,
|
||||
marker: control._marker,
|
||||
latlng: control._latLng, //"latlng" all-lowercase for consistency with Leaflet's MouseEvent
|
||||
raw: data
|
||||
});
|
||||
};
|
||||
|
||||
var geoErrorCallback = function (data) {
|
||||
control.deactivate();
|
||||
console.warn(_consolePrefix + data.message);
|
||||
control._map.fire('geolet_error', {
|
||||
control: control,
|
||||
raw: data
|
||||
});
|
||||
};
|
||||
|
||||
this._first = true;
|
||||
this._watchId = navigator.geolocation.watchPosition(geoSuccessCallback, geoErrorCallback, this.options.geoOptions);
|
||||
},
|
||||
|
||||
deactivate: function () {
|
||||
//Deactivate current location display
|
||||
|
||||
this.styleAnchor(false);
|
||||
|
||||
if (this.isActive()) {
|
||||
navigator.geolocation.clearWatch(this._watchId);
|
||||
this._watchId = null;
|
||||
}
|
||||
|
||||
this._latLng = null;
|
||||
|
||||
if (this._marker)
|
||||
this._marker.remove();
|
||||
if (this._popup)
|
||||
this._popup.remove();
|
||||
},
|
||||
|
||||
styleAnchor: function (active) {
|
||||
//Apply CSS classes and styles to the button's <a> element
|
||||
|
||||
var className = [];
|
||||
if (!this._a)
|
||||
return;
|
||||
if (this.options.className)
|
||||
className.push(this.options.className);
|
||||
if (active && this.options.activeClassName)
|
||||
className.push(this.options.activeClassName);
|
||||
if (className.length) {
|
||||
this._a.className = className.join(' ');
|
||||
} else {
|
||||
this._a.className = '';
|
||||
}
|
||||
if (active && this.options.activeStyle)
|
||||
_merge(this._a.style, this.options.activeStyle);
|
||||
if (!active && this.options.style)
|
||||
_merge(this._a.style, this.options.style);
|
||||
},
|
||||
|
||||
onAdd: function (map) {
|
||||
//Initialize everything when the control is added
|
||||
|
||||
var control = this;
|
||||
var el = L.DomUtil.create('div');
|
||||
this._map = map;
|
||||
|
||||
if (!L.Geolet.browserSupport) {
|
||||
console.warn(_consolePrefix + 'Browser does not support Geolocation');
|
||||
el.style.display = 'none';
|
||||
return el;
|
||||
}
|
||||
|
||||
if (this._marker)
|
||||
this._marker.remove();
|
||||
if (typeof this.options.marker == 'function') {
|
||||
this._marker = this.options.marker.call(this, map);
|
||||
} else if (this.options.marker) {
|
||||
this._marker = this.options.marker;
|
||||
} else if (typeof this.options.marker == 'undefined' || this.options.marker === null) {
|
||||
this._marker = _defaultMarker();
|
||||
} else {
|
||||
this._marker = null;
|
||||
}
|
||||
|
||||
if (this._popup)
|
||||
this._popup.remove();
|
||||
if (typeof this.options.popup == 'function') {
|
||||
this._popup = this.options.popup.call(this, map);
|
||||
} else if (this.options.popup) {
|
||||
this._popup = this.options.popup;
|
||||
} else if (typeof this.options.popup == 'undefined' || this.options.popup === null) {
|
||||
this._popup = L.popup({ autoPan: this.options.autoPan });
|
||||
} else {
|
||||
this._popup = null;
|
||||
}
|
||||
|
||||
if (this._marker && this._popup) {
|
||||
this._marker.bindPopup(this._popup);
|
||||
this._marker.on('popupopen', function () { control.updatePopup(); });
|
||||
}
|
||||
|
||||
el.className = 'leaflet-bar leaflet-control';
|
||||
|
||||
this._a = document.createElement('a');
|
||||
this._a.setAttribute('href', '#');
|
||||
if (this.options.title)
|
||||
this._a.setAttribute('title', this.options.title);
|
||||
|
||||
this.styleAnchor();
|
||||
|
||||
this._a.addEventListener('click', function (event) {
|
||||
if (!control.isActive()) {
|
||||
//Currently inactive
|
||||
control.activate();
|
||||
} else {
|
||||
//Currently active
|
||||
control.deactivate();
|
||||
}
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
});
|
||||
|
||||
this._a.addEventListener('dblclick', function (event) {
|
||||
//Ignore double clicks
|
||||
event.stopPropagation();
|
||||
});
|
||||
|
||||
if (this.options.html)
|
||||
this._a.innerHTML = this.options.html;
|
||||
el.appendChild(this._a);
|
||||
|
||||
return el;
|
||||
},
|
||||
|
||||
onRemove: function (map) {
|
||||
//Deinitialize everything when the control is removed
|
||||
this.deactivate();
|
||||
this._a = null;
|
||||
this._map = null;
|
||||
this._popup = null;
|
||||
this._marker = null;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
//Browser support test
|
||||
L.Geolet.browserSupport = !!(navigator && navigator.geolocation && navigator.geolocation.watchPosition);
|
||||
|
||||
//Format coordinates (for use in the default pop up)
|
||||
L.Geolet.formatSymbols = {};
|
||||
L.Geolet.formatLatLng = function (latLng, l, a) {
|
||||
|
||||
latLng = L.latLng(latLng, l, a);
|
||||
if (!latLng)
|
||||
return;
|
||||
|
||||
var result = [];
|
||||
var symbols = _merge({ deg: '°', min: '’', sec: '”', N: 'N', E: 'E', S: 'S', W: 'W', space: ' ', comma: ', ' }, L.Geolet.formatSymbols);
|
||||
|
||||
['lat', 'lng'].forEach(function (key) {
|
||||
var dir = (key == 'lat' ? (latLng[key] < 0 ? symbols.S : symbols.N) : (latLng[key] < 0 ? symbols.W : symbols.E));
|
||||
var val = Math.round(Math.abs(latLng[key]) * 3600) / 3600;
|
||||
var deg = Math.floor(val) + symbols.deg;
|
||||
var min = Math.floor(val * 60) % 60 + symbols.min;
|
||||
var sec = Math.floor(val * 3600) % 60 + symbols.sec;
|
||||
result.push([deg, min, sec, dir].join(symbols.space));
|
||||
});
|
||||
|
||||
return result.join(symbols.comma);
|
||||
};
|
||||
|
||||
//Factory function
|
||||
L.geolet = function (options) {
|
||||
return new L.Geolet(options);
|
||||
};
|
||||
|
||||
})()
|
||||
31
index.html
31
index.html
@ -6,11 +6,40 @@
|
||||
<title>Dashboard</title>
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
|
||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
|
||||
<script src="geolet.js"></script>
|
||||
<style>
|
||||
html, body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
#map {
|
||||
height: 100%;
|
||||
}
|
||||
.dump {
|
||||
background-color: rgba(255, 255, 255, 0.65);
|
||||
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map" style="height: 100%"></div>
|
||||
<div id="map"></div>
|
||||
<script type="text/javascript">
|
||||
var map = L.map('map').setView([50.733574532762226, 7.094633909697851], 13);
|
||||
L.geolet({position: 'bottomleft'}).addTo(map);
|
||||
|
||||
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
maxZoom: 19,
|
||||
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
||||
}).addTo(map);
|
||||
|
||||
var dump = L.icon({
|
||||
iconUrl: 'toilet.svg',
|
||||
iconSize: [32, 32],
|
||||
iconAnchor: [16, 16],
|
||||
className: 'dump'
|
||||
});
|
||||
|
||||
L.marker([50.79352197874706, 7.202796261625698],{icon: dump}).addTo(map).bindPopup("<b>Siegburg</b><br>NTA-Raum<br>Schlüssel: 7625");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
12
toilet.svg
Normal file
12
toilet.svg
Normal file
@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
|
||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg fill="#000000" width="800px" height="800px" viewBox="-12.35 0 122.88 122.88" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="enable-background:new 0 0 98.18 122.88" xml:space="preserve">
|
||||
|
||||
<g>
|
||||
|
||||
<path d="M21.58,24.97c0-1.01,0.82-1.82,1.82-1.82c1.01,0,1.82,0.82,1.82,1.82v33.33c0,1.01-0.82,1.82-1.82,1.82H1.82 C0.82,60.13,0,59.31,0,58.31V3.92c0-1.07,0.44-2.05,1.15-2.77l0.01-0.01C1.88,0.44,2.85,0,3.93,0H21.3c1.07,0,2.06,0.44,2.77,1.16 l0,0c0.71,0.71,1.15,1.69,1.15,2.77v4.62c0,1.01-0.82,1.82-1.82,1.82c-1.01,0-1.82-0.82-1.82-1.82V3.92c0-0.07-0.03-0.14-0.08-0.2 l0,0l0,0c-0.05-0.05-0.12-0.08-0.2-0.08H3.93c-0.08,0-0.15,0.03-0.2,0.08L3.72,3.73c-0.05,0.05-0.08,0.12-0.08,0.2v52.56h17.94 V24.97L21.58,24.97z M21.57,99.88L0.21,59.15c-0.46-0.89-0.12-1.98,0.77-2.45c0.27-0.14,0.56-0.21,0.84-0.21v-0.01h94.53 c1.01,0,1.82,0.82,1.82,1.82c0,0.07,0,0.14-0.01,0.21c-0.51,21.74-11.17,27.86-20.14,33c-5.24,3.01-9.83,5.64-10.69,11.21 l-0.01,0.05c-0.33,2.18-0.15,4.68,0.54,7.51c0.72,2.95,1.99,6.27,3.84,9.96c0.45,0.9,0.08,1.99-0.82,2.44 c-0.26,0.13-0.54,0.19-0.81,0.19l-57.06,0c-1.01,0-1.82-0.82-1.82-1.82c0-0.35,0.1-0.68,0.28-0.96L21.57,99.88L21.57,99.88z M4.83,60.13l20.39,38.89c0.26,0.5,0.28,1.11,0.01,1.65l-9.28,18.57h51.24c-1.3-2.89-2.25-5.59-2.86-8.09 c-0.81-3.32-1.01-6.29-0.61-8.91l0.01-0.06c1.13-7.3,6.43-10.34,12.48-13.81c7.92-4.54,17.29-9.92,18.26-28.23H4.83L4.83,60.13z M23.61,101.68c-1.01,0-1.82-0.82-1.82-1.82c0-1.01,0.82-1.82,1.82-1.82H43.5c1.01,0,1.82,0.82,1.82,1.82 c0,1.01-0.82,1.82-1.82,1.82H23.61L23.61,101.68z M25.21,58.58c-0.15,0.99-1.08,1.68-2.07,1.53c-0.99-0.15-1.68-1.08-1.53-2.07 c0.29-1.88,0.76-3.58,1.42-5.07c0.69-1.55,1.58-2.86,2.67-3.93c3.54-3.46,8.04-3.38,12.34-3.3c0.38,0.01,0.75,0.01,1.72,0.01 l38.96,0c9.24-0.06,19.48-0.13,19.43,13c0,1-0.81,1.81-1.81,1.81s-1.81-0.81-1.81-1.81c0.04-9.48-8.28-9.42-15.78-9.37 c-1.13,0.01-1.1,0.02-1.77,0.02H39.77l-1.78-0.03c-3.56-0.06-7.29-0.13-9.75,2.28c-0.77,0.75-1.39,1.68-1.89,2.79 C25.83,55.6,25.45,56.98,25.21,58.58L25.21,58.58z M15.33,11.17c2.83,0,5.12,2.29,5.12,5.12c0,2.83-2.29,5.12-5.12,5.12 c-2.83,0-5.12-2.29-5.12-5.12C10.21,13.46,12.51,11.17,15.33,11.17L15.33,11.17z M20.45,18.11c-1.01,0-1.82-0.82-1.82-1.82 c0-1.01,0.82-1.82,1.82-1.82h12.28c1.01,0,1.82,0.82,1.82,1.82c0,1.01-0.82,1.82-1.82,1.82H20.45L20.45,18.11z"/>
|
||||
|
||||
</g>
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
Loading…
Reference in New Issue
Block a user