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

Amélioration & lisibilité du code

parent 9a85f878
/* @preserve
* 100km
* https://framagit.org/gegeweb/100km
*
*
* (c) 2020 @Sp3r4z (https://framagit.org/Sp3r4z)
* (c) 2020 @gegeweb (https://framagit.org/gegeweb)
*
*
* @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-later
*/
......@@ -17,7 +17,7 @@ window.addEventListener('load', async () => {
ign_options = {
minZoom: 0,
maxZoom: 18,
attribution: ign_attribution,
attribution: 'Carte: ' + ign_attribution,
tileSize: 256 // les tuiles du Géooportail font 256x256px
},
baseLayers = [
......@@ -25,7 +25,7 @@ window.addEventListener('load', async () => {
name: 'OSM France',
url: 'https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png',
options: {
attribution: 'Fond de carte <a href="https://www.openstreetmap.fr/mentions-legales/">OpenStreetMap France</a>, Map Data &copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
attribution: 'Map: <a href="https://www.openstreetmap.fr/mentions-legales/">OpenStreetMap France</a>, Map Data &copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
maxZoom: 19
}
},
......@@ -33,7 +33,7 @@ window.addEventListener('load', async () => {
name: 'OSM Mapnik',
url: 'https://{s}.tile.osm.org/{z}/{x}/{y}.png',
options: {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>',
attribution: 'Map: &copy <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>',
maxZoom: 19
}
},
......@@ -41,7 +41,7 @@ window.addEventListener('load', async () => {
name: 'Cyclo OSM',
url: 'https://dev.{s}.tile.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png',
options: {
attribution: '<a href="https://github.com/cyclosm/cyclosm-cartocss-style/releases" title="CyclOSM - Open Bicycle render">CyclOSM</a> | Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a > contributors',
attribution: 'Map: <a href="https://github.com/cyclosm/cyclosm-cartocss-style/releases" title="CyclOSM - Open Bicycle render">CyclOSM</a>, Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a > contributors',
maxZoom: 20
}
},
......@@ -116,27 +116,12 @@ window.addEventListener('load', async () => {
opacity: 0.7,
minZoom: 0,
maxZoom: 18,
attribution: ign_attribution,
attribution: 'Unités admin.: ' + ign_attribution,
tileSize: 256
}
}
];
let layersArray = [],
layerGroup = new L.layerGroup();
let theMap = L.map('map');
initView();
layerGroup.addTo(theMap);
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 }
),
],
controlLayer = new L.control.layers( null, null, { collapsed: true } ),
geoCoder = new L.Control.Geocoder.Nominatim({
reverseQueryParams: {
'accept-language': 'fr,fr-FR'
......@@ -160,29 +145,47 @@ window.addEventListener('load', async () => {
address = e.geocode.properties ? e.geocode.properties.address : null,
dpt = null;
if ( address ) dpt = getDepartementRef( address );
if (address) dpt = getDepartementRef(address);
createPoint(center.lat, center.lng, html, dpt);
theMap.setView([center.lat, center.lng], 8);
});
}),
theMap = L.map('map');
for (let i = 0; i < baseLayers.length; i++) {
let m = baseLayers[i];
let l = new L.TileLayer(m.url, m.options);
controlLayer.addBaseLayer(l, m.name);
initView();
theMap.on('click', (e) => {
getReverse(e.latlng.lat, e.latlng.lng);
})
.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>'
);
let layersArray = [],
layerGroup = new L.layerGroup();
layerGroup.addTo(theMap);
baseLayers.forEach( ( e, i ) => {
let l = new L.TileLayer(e.url, e.options);
controlLayer.addBaseLayer(l, e.name);
if (i === 0) theMap.addLayer(l);
}
});
for (let i = 0; i < overlayLayers.length; i++) {
let m = overlayLayers[i];
let l = new L.TileLayer(m.url, m.options);
controlLayer.addOverlay(l, m.name);
overlayLayers.forEach( ( e ) => {
let l = new L.TileLayer(e.url, e.options);
controlLayer.addOverlay(l, e.name);
theMap.addLayer(l);
}
theMap.on('click', (e) => {
getReverse( e.latlng.lat, e.latlng.lng );
});
/*
* --------------
* Custom Control
* --------------
*/
// Titre de la carte
L.Control.mapTitle = L.Control.extend({
options: {
position: 'topleft'
......@@ -197,37 +200,39 @@ window.addEventListener('load', async () => {
}
});
// Affichage de l'aide
L.Control.CustomHelp = L.Control.extend({
options: {
position: 'bottomright'
},
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);
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);
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>Cliquer directement sur la carte à l'endroit choisi</li> \
<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> \
<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) => {
<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>`;
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.DomUtil.addClass(container, name + '-expanded');
});
L.DomEvent.on(container, 'mouseleave', () => {
L.DomUtil.removeClass(container, 'leaflet-control-customhelp-expanded');
L.DomUtil.removeClass(container, name + '-expanded');
});
return container;
......@@ -237,21 +242,23 @@ window.addEventListener('load', async () => {
}
});
// Réinitialiser la carte
L.Control.CustomClean = L.Control.extend({
options: {
position: 'topleft'
},
onAdd: () => {
let container = L.DomUtil.create('div',
'leaflet-control-initmap leaflet-bar leaflet-control'),
link = L.DomUtil.create('a', 'leaflet-bar-part leaflet-bar-part-single', container);
let name = '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);
link.title = 'Réinitialiser la carte';
link.role = 'button';
link.href = '#';
link.innerHTML = "";
link.onclick = ev => {
L.DomEvent.stopPropagation(ev);
L.DomEvent.preventDefault(ev);
link.onclick = ( e ) => {
L.DomEvent.stopPropagation( e );
L.DomEvent.preventDefault( e );
clearLayer();
initView();
}
......@@ -262,21 +269,23 @@ window.addEventListener('load', async () => {
}
});
// Suppresion du dernier point
L.Control.CustomPoint = L.Control.extend({
options: {
position: 'topleft'
},
onAdd: function () {
let container = L.DomUtil.create('div',
'leaflet-control-removepoint leaflet-bar leaflet-control');
let link = L.DomUtil.create('a', 'leaflet-bar-part leaflet-bar-part-single', container);
let name = '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);
link.title = 'Supprimer le dernier point';
link.role = 'button';
link.href = '#';
link.innerHTML = "✖️";
link.onclick = ev => {
L.DomEvent.stopPropagation(ev);
L.DomEvent.preventDefault(ev);
link.onclick = ( e ) => {
L.DomEvent.stopPropagation( e );
L.DomEvent.preventDefault( e );
removeLastPoint();
initView();
}
......@@ -287,25 +296,25 @@ window.addEventListener('load', async () => {
}
});
// localiser sa position
if (navigator.geolocation) {
L.Control.CustomPosition = L.Control.extend({
options: {
position: 'topleft'
},
onAdd: function () {
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);
let name = '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);
link.title = 'Localiser ma position';
link.role = 'button';
link.href = '#';
link.innerHTML = "⦿";
L.DomEvent
.on(link, 'click', ev => {
L.DomEvent.stopPropagation(ev);
L.DomEvent.preventDefault(ev);
.on(link, 'click', ( e ) => {
L.DomEvent.stopPropagation( e );
L.DomEvent.preventDefault( e );
navigator.geolocation.getCurrentPosition( drawPosition );
})
.on(link, 'dblclick', L.DomEvent.stopPropagation);
......@@ -321,14 +330,12 @@ window.addEventListener('load', async () => {
controlLayer.addTo( theMap );
controlGeocoder.addTo( theMap );
theMap.addControl( new L.Control.mapTitle() );
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() );
/*
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.CustomHelp() );
/*
* ---------
* Functions
* ---------
......@@ -337,7 +344,7 @@ window.addEventListener('load', async () => {
async function getJsonAsync( url ) {
return await fetch( url )
.then( async (response) => {
return response.ok && [200, 301].indexOf(response.status) !== -1 ? await response.json() : null;
return response.ok && response.status === 200 ? await response.json() : null;
} )
.catch( (e) => {
console.log( e );
......@@ -347,30 +354,32 @@ window.addEventListener('load', async () => {
function drawPosition( p ) {
let lat = p.coords.latitude,
lon = p.coords.longitude;
clearLayer();
getReverse(lat, lon);
lng = p.coords.longitude;
getReverse( lat, lng );
}
function createCircle( lat, lng ) {
let turfCircle = turf.circle([lng, lat], 100),
shapeArray = [],
metropoleElements = metropole.geometry.coordinates;
metropoleElements.forEach((e, index) => {
let feat = { 'type': 'Polygon', 'coordinates': metropoleElements[index] },
tmpCircle = turf.intersect(turfCircle, feat);
// - le cercle est un polygone
// - la metrople est un polygone
// On parcours les éléments en les transformant en plygone et intersection
// https://github.com/Turfjs/turf/tree/master/packages/turf-circle
let turfCircle = turf.circle([lng, lat], 100, { units: 'kilometers' }),
shapeArray = [],
metropoleElements = metropole.geometry.coordinates;
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));
})
});
return L.layerGroup(shapeArray);
}
function createMarker (lat, lng, html) {
let marker = L.marker([lat, lng]),
precision = 10000;
marker.bindPopup(`<p>${html}<br><em>[ ${Math.round(lat * precision) / precision}, ${Math.round(lng * precision) / precision} ]</em></p>`).openPopup();
function createMarker( lat, lng, html ) {
let marker = L.marker([lat, lng]);
marker.bindPopup(`<p>${(html ? html + '<br>' : '')}<em>[ ${lat.toFixed(4)}, ${lng.toFixed(4)} ]</em></p>`).openPopup();
return marker;
}
......@@ -380,11 +389,11 @@ window.addEventListener('load', async () => {
datas = null;
if ( departement ) datas = await getJsonAsync('geojson/' + departement + '.geojson');
if ( datas ) layers.push(L.geoJSON(datas) );
if ( datas ) layers.push( L.geoJSON(datas) );
layer = L.layerGroup( layers );
layersArray.push(layer);
addToLayerGroup(layer);
theMap.setView([lat, lng], 8);
}
function clearLayer() {
......@@ -408,12 +417,11 @@ window.addEventListener('load', async () => {
let address = r && r.properties ? r.properties.address : null,
html = r ? ( r.html || '' ) : '',
dpt = null;
if ( address && address.country == 'France') {
dpt = getDepartementRef( address );
createPoint(lat, lng, html, dpt);
theMap.setView([lat, lng], 8);
}
}
});
}
......@@ -429,13 +437,13 @@ window.addEventListener('load', async () => {
let cp = a.postcode ? a.postcode.substring(0, 2).toUpperCase() : null,
dpt = null;
cp = (cp == '97' || cp == '98') ? a.postcode.substring(0, 3) : cp;
if ( !cp ) {
if ( a.state == 'Corse' )
cp = '20';
else if ( a.region && a.region == 'Nouvelle-Calédonie' )
else if ( a.region && a.region == 'Nouvelle-Calédonie' )
cp = getPostcodeByName(a.region).code;
else if ( a.county )
cp = getPostcodeByName(a.county).code;
......
......@@ -36,16 +36,15 @@ h1 {
color: #333;
}
.leaflet-control-removepoint a,
.leaflet-control-locate a,
.leaflet-control-test a,
.leaflet-control-initmap a,
.leaflet-control-customhelp a {
.leaflet-control-removepoint-button,
.leaflet-control-locate-button,
.leaflet-control-initmap-button,
.leaflet-control-customhelp-button {
font-size: 1.5em;
font-weight: bold;
}
.leaflet-control-customhelp-toggle {
.leaflet-control-customhelp-button {
display: block;
}
......@@ -56,7 +55,7 @@ h1 {
}
.leaflet-control-customhelp .leaflet-control-customhelp-section,
.leaflet-control-customhelp-expanded .leaflet-control-customhelp-toggle {
.leaflet-control-customhelp-expanded .leaflet-control-customhelp-button {
display: none;
}
......@@ -70,4 +69,4 @@ h1 {
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