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

Zoom sur la métropole ou dernier point

parent 3f360764
......@@ -9,10 +9,9 @@
*/
window.addEventListener('load', async () => {
const center = [46.415, 1.461],
zoom = 6,
metropole = await getJsonAsync('geojson/metropole-et-outre-mer.geojson'),
const metropole = await getJsonAsync('geojson/metropole-et-outre-mer.geojson'),
departements = await getJsonAsync('assets/departements.json'),
france = new L.geoJSON( await getJsonAsync('geojson/metropole.geojson') ),
ign_attribution = '<a href="https://geoservices.ign.fr/">IGN-F/Geoportail</a>',
ign_options = {
minZoom: 0,
......@@ -121,7 +120,8 @@ window.addEventListener('load', async () => {
}
}
],
controlLayer = new L.control.layers( null, null, { collapsed: true } ),
controlLayer = L.control.layers( null, null, { collapsed: true } ),
controlScale = L.control.scale({ imperial: false }),
geoCoder = new L.Control.Geocoder.Nominatim({
reverseQueryParams: {
'accept-language': 'fr,fr-FR'
......@@ -206,10 +206,10 @@ window.addEventListener('load', async () => {
position: 'bottomright'
},
onAdd: () => {
let name = 'leaflet-control-customhelp',
container = L.DomUtil.create('div', name + ' leaflet-bar leaflet-control'),
link = L.DomUtil.create('a', name + '-button leaflet-bar-part leaflet-bar-part-single', container);
section = L.DomUtil.create('section', name + '-section', container);
let className = 'leaflet-control-customhelp',
container = L.DomUtil.create('div', className + ' leaflet-bar leaflet-control'),
link = L.DomUtil.create('a', className + '-button leaflet-bar-part leaflet-bar-part-single', container);
section = L.DomUtil.create('section', className + '-section', container);
link.title = 'Aide';
link.role = 'button';
link.href = '#';
......@@ -223,16 +223,16 @@ window.addEventListener('load', async () => {
<li>✖️ Effacer le dernier point</li> \
</ul> \
<h3>Décret n°2020-548 du 11 mai 2020&nbsp;:</h3>\
<p style="text-align:justify;"><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>`;
<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, name + '-expanded');
L.DomUtil.addClass(container, className + '-expanded');
});
L.DomEvent.on(container, 'mouseleave', () => {
L.DomUtil.removeClass(container, name + '-expanded');
L.DomUtil.removeClass(container, className + '-expanded');
});
return container;
......@@ -248,10 +248,10 @@ window.addEventListener('load', async () => {
position: 'topleft'
},
onAdd: () => {
let name = 'leaflet-control-initmap',
let className = 'leaflet-control-initmap',
container = L.DomUtil.create('div',
name + ' leaflet-bar leaflet-control'),
link = L.DomUtil.create('a', name + '-button leaflet-bar-part leaflet-bar-part-single', container);
className + ' leaflet-bar leaflet-control'),
link = L.DomUtil.create('a', className + '-button leaflet-bar-part leaflet-bar-part-single', container);
link.title = 'Réinitialiser la carte';
link.role = 'button';
link.href = '#';
......@@ -275,10 +275,10 @@ window.addEventListener('load', async () => {
position: 'topleft'
},
onAdd: function () {
let name = 'leaflet-control-removepoint',
let className = 'leaflet-control-removepoint',
container = L.DomUtil.create('div',
name + ' leaflet-bar leaflet-control');
let link = L.DomUtil.create('a', name + '-button leaflet-bar-part leaflet-bar-part-single', container);
className + ' leaflet-bar leaflet-control');
let link = L.DomUtil.create('a', className + '-button leaflet-bar-part leaflet-bar-part-single', container);
link.title = 'Supprimer le dernier point';
link.role = 'button';
link.href = '#';
......@@ -287,7 +287,7 @@ window.addEventListener('load', async () => {
L.DomEvent.stopPropagation( e );
L.DomEvent.preventDefault( e );
removeLastPoint();
initView();
//initView();
}
return container;
},
......@@ -303,10 +303,10 @@ window.addEventListener('load', async () => {
position: 'topleft'
},
onAdd: function () {
let name = 'leaflet-control-locate',
let className = 'leaflet-control-locate',
container = L.DomUtil.create('div',
name + ' leaflet-bar leaflet-control');
let link = L.DomUtil.create('a', name + '-button leaflet-bar-part leaflet-bar-part-single', container);
className + ' leaflet-bar leaflet-control');
let link = L.DomUtil.create('a', className + '-button leaflet-bar-part leaflet-bar-part-single', container);
link.title = 'Localiser ma position';
link.role = 'button';
link.href = '#';
......@@ -327,6 +327,7 @@ window.addEventListener('load', async () => {
})
}
controlScale.addTo( theMap );
controlLayer.addTo( theMap );
controlGeocoder.addTo( theMap );
theMap.addControl( new L.Control.mapTitle() );
......@@ -371,10 +372,10 @@ window.addEventListener('load', async () => {
metropoleElements.forEach( ( e ) => {
// https://github.com/Turfjs/turf/tree/master/packages/turf-intersect
let feat = { 'type': 'Polygon', 'coordinates': e },
tmpCircle = turf.intersect(turfCircle, feat);
shapeArray.push(L.geoJSON(tmpCircle));
tmpCircle = turf.intersect( turfCircle, feat );
shapeArray.push( new L.geoJSON(tmpCircle) );
});
return L.layerGroup(shapeArray);
return new L.FeatureGroup( shapeArray );
}
function createMarker( lat, lng, html ) {
......@@ -384,16 +385,18 @@ window.addEventListener('load', async () => {
}
async function createPoint(lat, lng, html, departement = null) {
let layers = [ createMarker(lat, lng, html), createCircle(lat, lng) ],
let marker = createMarker(lat, lng, html),
circle = createCircle(lat, lng),
layers = [ marker, circle ],
layer = null,
datas = null;
if ( departement ) datas = await getJsonAsync('geojson/' + departement + '.geojson');
if ( datas ) layers.push( L.geoJSON(datas) );
layer = L.layerGroup( layers );
layersArray.push(layer);
addToLayerGroup(layer);
theMap.setView([lat, lng], 8);
if ( datas ) layers.push( new L.geoJSON(datas) );
layer = new L.FeatureGroup( layers );
layersArray.push( layer );
addToLayerGroup( layer );
fitBounds( layersArray );
}
function clearLayer() {
......@@ -408,6 +411,7 @@ window.addEventListener('load', async () => {
if (layersArray.length > 0) {
let layer = layersArray.pop();
layerGroup.removeLayer(layer);
fitBounds( layersArray );
}
}
......@@ -455,8 +459,13 @@ window.addEventListener('load', async () => {
return dpt;
}
function fitBounds( l ) {
l = l && l[l.length - 1] ? l[l.length - 1] : france;
theMap.fitBounds( l.getBounds(), { padding: [10, 10] });
}
function initView() {
theMap.setView( center, zoom );
fitBounds();
}
});
// @license-end
......@@ -54,6 +54,10 @@ h1 {
border-radius: 5px;
}
.leaflet-control-customhelp-section {
text-align: justify;
}
.leaflet-control-customhelp .leaflet-control-customhelp-section,
.leaflet-control-customhelp-expanded .leaflet-control-customhelp-button {
display: none;
......@@ -65,8 +69,8 @@ h1 {
}
.leaflet-control-customhelp-expanded {
padding: 6px 10px 6px 6px;
color: #333;
background: #fff;
width: 400px;
padding: 6px 10px 6px 6px;
color: #333;
background: #fff;
width: 400px;
}
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