Commit c6c707df authored by Gérald Niel's avatar Gérald Niel
Browse files

Utilisation de navigator.geolocation

parent 402e57f5
......@@ -171,17 +171,19 @@ window.addEventListener('load', async function () {
position: 'bottomleft'
},
onAdd: function () {
var container = L.DomUtil.create('div',
let container = L.DomUtil.create('div',
'leaflet-control-help leaflet-bar leaflet-control');
container.innerHTML = "<p><strong>Comment procéder&nbsp;?</strong></p> \
container.innerHTML = `<p><strong>Comment procéder&nbsp;?</strong></p> \
<ul> \
<li>Cliquer directement sur la carte à l'endroit choisi</ii> \
<li>🔍 Faire une recherche (ville, code postal…)</li> \
<li>⦿ Rechercher votre position</li> \
${(navigator.geolocation ? '<li>⦿ Rechercher votre position</li>' : '')} \
<li>♽ Réinitialiser la carte</li> \
<li>✖️ Effacer le dernier point</li> \
</ul>";
return container;
</ul> \
<p>Déplacements dans un rayon de 100 km autour du domicile.<br> \
Plus de 100 km autorisé uniquement dans le même département.`;
return container;
}
});
......@@ -191,9 +193,9 @@ window.addEventListener('load', async function () {
},
onAdd: function () {
var container = L.DomUtil.create('div',
let container = L.DomUtil.create('div',
'leaflet-control-initmap leaflet-bar leaflet-control');
var link = L.DomUtil.create('a', 'leaflet-bar-part leaflet-bar-part-single', container);
let link = L.DomUtil.create('a', 'leaflet-bar-part leaflet-bar-part-single', container);
link.title = 'Réinitialiser la carte';
link.role = 'button';
link.href = '#';
......@@ -204,7 +206,6 @@ window.addEventListener('load', async function () {
clearLayer();
initView();
}
return container;
}
});
......@@ -214,9 +215,9 @@ window.addEventListener('load', async function () {
position: 'topleft'
},
onAdd: function () {
var container = L.DomUtil.create('div',
let container = L.DomUtil.create('div',
'leaflet-control-removepoint leaflet-bar leaflet-control');
var link = L.DomUtil.create('a', 'leaflet-bar-part leaflet-bar-part-single', container);
let link = L.DomUtil.create('a', 'leaflet-bar-part leaflet-bar-part-single', container);
link.title = 'Supprimer le dernier point';
link.role = 'button';
link.href = '#';
......@@ -231,47 +232,43 @@ window.addEventListener('load', async function () {
}
});
L.Control.CustomPosition = L.Control.extend({
options: {
position: 'topleft'
},
onAdd: function () {
if ( navigator.geolocation ) {
L.Control.CustomPosition = L.Control.extend({
options: {
position: 'topleft'
},
onAdd: function () {
var container = L.DomUtil.create('div',
'leaflet-control-locate leaflet-bar leaflet-control');
var link = L.DomUtil.create('a', 'leaflet-bar-part leaflet-bar-part-single', container);
link.title = 'Localiser ma position';
link.role = 'button';
link.href = '#';
link.innerHTML = "⦿";
let container = L.DomUtil.create('div',
'leaflet-control-locate leaflet-bar leaflet-control');
let link = L.DomUtil.create('a', 'leaflet-bar-part leaflet-bar-part-single', container);
link.title = 'Localiser ma position';
link.role = 'button';
link.href = '#';
link.innerHTML = "⦿";
L.DomEvent
.on( link, 'click', ev => {
let count = 0;
L.DomEvent
.on(link, 'click', ev => {
L.DomEvent.stopPropagation(ev);
L.DomEvent.preventDefault(ev);
L.DomEvent.stopPropagation(ev);
L.DomEvent.preventDefault(ev);
theMap.locate({ setView: true, watch: false, maxZoom: 8 })
.on('locationfound', function (e) {
count++;
if ( count < 2 ) {
clearLayer();
drawArea( e.latlng.lat, e.latlng.lng );
}
})
})
.on(link, 'dblclick', L.DomEvent.stopPropagation);
navigator.geolocation.getCurrentPosition( drawPosition );
})
.on(link, 'dblclick', L.DomEvent.stopPropagation);
return container;
}
})
return container;
}
})
}
theMap.addControl(new L.Control.mapTitle())
.addControl(new L.Control.Help())
.addControl(new L.Control.CustomPosition())
.addControl(new L.Control.CustomClean())
.addControl(new L.Control.CustomPoint());
theMap.addControl( new L.Control.mapTitle() );
theMap.addControl( new L.Control.Help() );
if ( navigator.geolocation ) {
theMap.addControl(new L.Control.CustomPosition());
}
theMap.addControl(new L.Control.CustomClean());
theMap.addControl(new L.Control.CustomPoint());
/* -----------
Fonctions
......@@ -280,7 +277,15 @@ window.addEventListener('load', async function () {
async function getJsonAsync( url ) {
return await fetch( url ).then( async (response) => {
return await response.json();
})
});
}
function drawPosition( p ) {
let lat = p.coords.latitude,
lon = p.coords.longitude;
clearLayer();
drawArea(lat, lon);
theMap.setView([lat, lon], 8)
}
function createCircle( lat, lng ) {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment