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

Toggle help

parent 8d76c2e9
......@@ -132,7 +132,11 @@ window.addEventListener('load', async () => {
theMap.attributionControl.addAttribution('©2020 <a href="https://framagit.org/Sp3r4z">@Sp3r4z</a> / <a href="https://framagit.org/gegeweb">@gegeweb</a> - <a href="http://www.gnu.org/licenses/agpl-3.0.html">AGPL</a> - <a href="https://framagit.org/gegeweb/100km">Source sur FramaGit</a>');
const controlLayer = new L.control.layers(null, null, { collapsed: true }),
const controlLayer = new L.control.layers(
null,
null,
{ collapsed: true }
),
geoCoder = new L.Control.Geocoder.Nominatim({
reverseQueryParams: {
'accept-language': 'fr,fr-FR'
......@@ -177,7 +181,6 @@ window.addEventListener('load', async () => {
theMap.on('click', (e) => {
getReverse( e.latlng.lat, e.latlng.lng );
theMap.setView([e.latlng.lat, e.latlng.lng], 8);
});
L.Control.mapTitle = L.Control.extend({
......@@ -185,29 +188,52 @@ window.addEventListener('load', async () => {
position: 'topleft'
},
onAdd: function () {
let container = L.DomUtil.create('div', 'leaflet-control-title leaflet-bar leaflet-control'),
title = L.DomUtil.create('h1', 'leaflet-bar-part leaflet-bar-part-single', container);
title.innerHTML = 'Déplacements à 100 km';
let container = L.DomUtil.create('div', 'leaflet-control-title');
container.innerHTML = '<h1>Déplacements à 100 km</h1>';
return container;
},
onRemove: () => {
// do nothing
}
});
L.Control.Help = L.Control.extend({
L.Control.CustomHelp = L.Control.extend({
options: {
position: 'bottomleft'
position: 'bottomright'
},
onAdd: function () {
let container = L.DomUtil.create('div',
'leaflet-control-help leaflet-bar leaflet-control');
container.innerHTML = `<p><strong>Comment procéder&nbsp;?</strong></p> \
onAdd: () => {
let container = L.DomUtil.create('div', 'leaflet-control-customhelp leaflet-bar leaflet-control'),
link = L.DomUtil.create('a', 'leaflet-control-customhelp-toggle', container);
section = L.DomUtil.create('section', 'leaflet-control-customhelp-section', container);
link.title = 'Aide';
link.role = 'button';
link.href = '#';
link.innerHTML = "?";
section.innerHTML = `<h2>Comment procéder&nbsp;?</h2> \
<ul> \
<li>Cliquer directement sur la carte à l'endroit choisi</ii> \
<li>🔍 Faire une recherche (ville, code postal…)</li> \
${(navigator.geolocation ? '<li>⦿ Localiser votre position</li>' : '')} \
<li>♽ Réinitialiser la carte</li> \
<li>✖️ Effacer le dernier point</li> \
</ul>`;
</ul> \
<h3>Décret n° 2020-548 du 11 mai 2020&nbsp;:</h3>\
<p><em>Tout déplacement de personne la conduisant à la fois à sortir d'un périmètre défini par un rayon de 100 kilomètres de son lieu de résidence et à sortir du département dans lequel ce dernier est situé est interdit […]</em></p>`;
link.onclick = (e) => {
L.DomEvent.stopPropagation( e );
L.DomEvent.preventDefault( e );
}
L.DomEvent.on(container, 'mouseenter', () => {
L.DomUtil.addClass(container, 'leaflet-control-customhelp-expanded');
});
L.DomEvent.on(container, 'mouseleave', () => {
L.DomUtil.removeClass(container, 'leaflet-control-customhelp-expanded');
});
return container;
},
onRemove: () => {
// do nothing
}
});
......@@ -215,11 +241,10 @@ window.addEventListener('load', async () => {
options: {
position: 'topleft'
},
onAdd: function () {
onAdd: () => {
let container = L.DomUtil.create('div',
'leaflet-control-initmap leaflet-bar leaflet-control');
let link = L.DomUtil.create('a', 'leaflet-bar-part leaflet-bar-part-single', container);
'leaflet-control-initmap leaflet-bar leaflet-control'),
link = L.DomUtil.create('a', 'leaflet-bar-part leaflet-bar-part-single', container);
link.title = 'Réinitialiser la carte';
link.role = 'button';
link.href = '#';
......@@ -231,6 +256,9 @@ window.addEventListener('load', async () => {
initView();
}
return container;
},
onRemove: () => {
// do nothing
}
});
......@@ -253,6 +281,9 @@ window.addEventListener('load', async () => {
initView();
}
return container;
},
onRemove: () => {
// do nothing
}
});
......@@ -273,15 +304,16 @@ window.addEventListener('load', async () => {
L.DomEvent
.on(link, 'click', ev => {
L.DomEvent.stopPropagation(ev);
L.DomEvent.preventDefault(ev);
navigator.geolocation.getCurrentPosition( drawPosition );
})
.on(link, 'dblclick', L.DomEvent.stopPropagation);
return container;
},
onRemove: () => {
// do nothing
}
})
}
......@@ -289,13 +321,13 @@ window.addEventListener('load', async () => {
controlLayer.addTo( theMap );
controlGeocoder.addTo( theMap );
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());
//theMap.addControl(new L.Control.Help());
theMap.addControl(new L.Control.CustomHelp() );
/*
* ---------
* Functions
......@@ -303,9 +335,14 @@ window.addEventListener('load', async () => {
*/
async function getJsonAsync( url ) {
return await fetch( url ).then( async (response) => {
return [200, 301].indexOf(response.status) !== -1 ? await response.json() : null;
});
return await fetch( url )
.then( async (response) => {
return response.ok && [200, 301].indexOf(response.status) !== -1 ? await response.json() : null;
} )
.catch( (e) => {
console.log( e );
return null;
} );
}
function drawPosition( p ) {
......@@ -313,7 +350,6 @@ window.addEventListener('load', async () => {
lon = p.coords.longitude;
clearLayer();
getReverse(lat, lon);
theMap.setView([lat, lon], 8);
}
function createCircle( lat, lng ) {
......@@ -373,8 +409,11 @@ window.addEventListener('load', async () => {
html = r ? ( r.html || '' ) : '',
dpt = null;
if ( address ) dpt = getDepartementRef( address );
createPoint(lat, lng, html, dpt);
if ( address && address.country == 'France') {
dpt = getDepartementRef( address );
createPoint(lat, lng, html, dpt);
theMap.setView([lat, lng], 8);
}
});
}
......@@ -386,7 +425,7 @@ window.addEventListener('load', async () => {
function getDepartementRef( a = null ) {
if (!a || a.country != 'France' ) return null;
if ( !a ) return null;
let cp = a.postcode ? a.postcode.substring(0, 2).toUpperCase() : null,
dpt = null;
......
......@@ -23,22 +23,51 @@ h1 {
}
.leaflet-control-title {
transform: translate(-50%,20%);
transform: translate(-50%,-5px);
position: fixed !important;
left: 50%;
text-align: center;
padding-left: 50px;
padding-right: 50px;
background: rgba(255,255,255,0.9);
background: white;
border: 1px solid black;
border-radius: 2px;
box-shadow: 1px 1px 4px black;
color: #333;
}
.leaflet-control-help {
background: rgba(255,255,255,0.9);
padding: 10px;
.leaflet-control-removepoint a,
.leaflet-control-locate a,
.leaflet-control-test a,
.leaflet-control-initmap a,
.leaflet-control-customhelp a {
font-size: 1.5em;
font-weight: bold;
}
.leaflet-control-removepoint,
.leaflet-control-locate,
.leaflet-control-initmap {
font-size: 1.5em;
.leaflet-control-customhelp-toggle {
display: block;
}
.leaflet-control-customhelp {
box-shadow: 0 1px 5px rgba(0,0,0,0.4);
background: #fff;
border-radius: 5px;
}
.leaflet-control-customhelp .leaflet-control-customhelp-section,
.leaflet-control-customhelp-expanded .leaflet-control-customhelp-toggle {
display: none;
}
.leaflet-control-customhelp-expanded .leaflet-control-customhelp-section {
display: block;
position: relative;
}
.leaflet-control-customhelp-expanded {
padding: 6px 10px 6px 6px;
color: #333;
background: #fff;
width: 400px;
}
\ No newline at end of file
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