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

Améliorations contrôles et rendu carte.

parent d7b764fa
......@@ -45,13 +45,7 @@ const overlayLayers = [
}
];
const departements = [{"code":"01","nom":"Ain"},{"code":"02","nom":"Aisne"},{"code":"03","nom":"Allier"},{"code":"04","nom":"Alpes-de-Haute-Provence"},{"code":"05","nom":"Hautes-Alpes"},{"code":"06","nom":"Alpes-Maritimes"},{"code":"07","nom":"Ardèche"},{"code":"08","nom":"Ardennes"},{"code":"09","nom":"Ariège"},{"code":"10","nom":"Aube"},{"code":"11","nom":"Aude"},{"code":"12","nom":"Aveyron"},{"code":"13","nom":"Bouches-du-Rhône"},{"code":"14","nom":"Calvados"},{"code":"15","nom":"Cantal"},{"code":"16","nom":"Charente"},{"code":"17","nom":"Charente-Maritime"},{"code":"18","nom":"Cher"},{"code":"19","nom":"Corrèze"},{"code":"21","nom":"Côte-d’or"},{"code":"22","nom":"Côtes-d’armor"},{"code":"23","nom":"Creuse"},{"code":"24","nom":"Dordogne"},{"code":"25","nom":"Doubs"},{"code":"26","nom":"Drôme"},{"code":"27","nom":"Eure"},{"code":"28","nom":"Eure-et-Loir"},{"code":"29","nom":"Finistère"},{"code":"2A","nom":"South Corsica"},{"code":"2B","nom":"Haute-Corse"},{"code":"30","nom":"Gard"},{"code":"31","nom":"Haute-Garonne"},{"code":"32","nom":"Gers"},{"code":"33","nom":"Gironde"},{"code":"34","nom":"Hérault"},{"code":"35","nom":"Ille-et-Vilaine"},{"code":"36","nom":"Indre"},{"code":"37","nom":"Indre-et-Loire"},{"code":"38","nom":"Isère"},{"code":"39","nom":"Jura"},{"code":"40","nom":"Landes"},{"code":"41","nom":"Loir-et-Cher"},{"code":"42","nom":"Loire"},{"code":"43","nom":"Haute-Loire"},{"code":"44","nom":"Loire-Atlantique"},{"code":"45","nom":"Loiret"},{"code":"46","nom":"Lot"},{"code":"47","nom":"Lot-et-Garonne"},{"code":"48","nom":"Lozère"},{"code":"49","nom":"Maine-et-Loire"},{"code":"50","nom":"Manche"},{"code":"51","nom":"Marne"},{"code":"52","nom":"Haute-Marne"},{"code":"53","nom":"Mayenne"},{"code":"54","nom":"Meurthe-et-Moselle"},{"code":"55","nom":"Meuse"},{"code":"56","nom":"Morbihan"},{"code":"57","nom":"Moselle"},{"code":"58","nom":"Nièvre"},{"code":"59","nom":"Nord"},{"code":"60","nom":"Oise"},{"code":"61","nom":"Orne"},{"code":"62","nom":"Pas-de-Calais"},{"code":"63","nom":"Puy-de-Dôme"},{"code":"64","nom":"Pyrénées-Atlantiques"},{"code":"65","nom":"Hautes-Pyrénées"},{"code":"66","nom":"Pyrénées-Orientales"},{"code":"67","nom":"Bas-Rhin"},{"code":"68","nom":"Haut-Rhin"},{"code":"69","nom":"Rhône"},{"code":"70","nom":"Haute-Saône"},{"code":"71","nom":"Saône-et-Loire"},{"code":"72","nom":"Sarthe"},{"code":"73","nom":"Savoie"},{"code":"74","nom":"Haute-Savoie"},{"code":"75","nom":"Paris"},{"code":"76","nom":"Seine-Maritime"},{"code":"77","nom":"Seine-et-Marne"},{"code":"78","nom":"Yvelines"},{"code":"79","nom":"Deux-Sèvres"},{"code":"80","nom":"Somme"},{"code":"81","nom":"Tarn"},{"code":"82","nom":"Tarn-et-Garonne"},{"code":"83","nom":"Var"},{"code":"84","nom":"Vaucluse"},{"code":"85","nom":"Vendée"},{"code":"86","nom":"Vienne"},{"code":"87","nom":"Haute-Vienne"},{"code":"88","nom":"Vosges"},{"code":"89","nom":"Yonne"},{"code":"90","nom":"Territoire-de-Belfort"},{"code":"91","nom":"Essonne"},{"code":"92","nom":"Hauts-de-Seine"},{"code":"93","nom":"Seine-Saint-Denis"},{"code":"94","nom":"Val-de-Marne"},{"code":"95","nom":"Val-d’oise"}],
getPostcodeByName = name => {
return departements.filter( dep => {
return dep.nom == name
})
},
createCircle = (lat,lng) => {
const createCircle = (lat,lng) => {
let turfCircle = turf.circle([lng, lat], 100),
shapeArray = [],
......@@ -81,13 +75,13 @@ createPoint = (lat,lng,city,departement=null) => {
layer = null
if(departement != null) {
fetch('geojson/'+departement+'.geojson')
.then(response => response.json())
.then(datas => {
layer = L.layerGroup([marker,circle, L.geoJSON(datas) ])
layersArray.push(layer)
addToLayerGroup(layer)
})
getJSon('geojson/'+departement+'.geojson')
.then( datas => {
layer = L.layerGroup([ marker,circle, L.geoJSON(datas) ]);
layersArray.push( layer );
addToLayerGroup( layer );
});
}
else {
layer = L.layerGroup([marker,circle])
......@@ -109,13 +103,22 @@ clearLayer = _ => {
}
let theMap = L.map('map').setView([46.415,1.461], 6),
metropole = null,
metropole =null,
layersArray = [],
layerGroup = L.layerGroup()
layerGroup.addTo(theMap)
layerGroup.addTo(theMap);
getJSon('geojson/metropole.geojson')
.then( datas => {
metropole = datas;
});
theMap.attributionControl.addAttribution('©2020 @Sp3r4z / @gegeweb - AGPL - <a href="https://framagit.org/gegeweb/100km">Source sur FramaGit</a>');
L.Control.geocoder({
defaultMarkGeocode: false
defaultMarkGeocode: false,
position: 'topleft',
placeholder: 'Rechercher une ville, une adresse…',
})
.on('markgeocode', (e) => {
let center = e.geocode.center,
......@@ -131,6 +134,7 @@ L.Control.geocoder({
}
createPoint(center.lat, center.lng, city, departementRef)
theMap.setView([center.lat, center.lng], 8)
})
.addTo(theMap)
......@@ -144,7 +148,6 @@ for (var i = 0; i < baseLayers.length; i++) {
if (i === 0) theMap.addLayer(l);
}
//var overlayLayers = {};
for (var i = 0; i < overlayLayers.length; i++) {
var m = overlayLayers[i];
var l = new L.TileLayer(m.url, m.options);
......@@ -152,105 +155,176 @@ for (var i = 0; i < overlayLayers.length; i++) {
if (i === 0) theMap.addLayer(l);
}
fetch('geojson/metropole.geojson')
.then(response => response.json())
.then(datas => {
metropole = datas
theMap.on('click', (e) => {
drawArea( e.latlng.lat, e.latlng.lng )
theMap.setView([e.latlng.lat, e.latlng.lng], 8)
})
theMap.on('click', (e) => {
let lat = e.latlng.lat,
lon = e.latlng.lng,
reverse = `https://nominatim.openstreetmap.org/reverse?lat=${lat}&lon=${lon}&format=json&zoom=18`
fetch(reverse)
.then(response => response.json())
.then(datas => {
// https://nominatim.org/release-docs/develop/api/Reverse/
// le "county" ne donne pas toujours le département mais on a le postcode qui lui est toujours juste CQFD
// comme à Marseille (inexistant) ou Lyon (Métropole de lyon au lieu de rhone)
if(datas.address != undefined && datas.address.country == 'France') {
let departementRef = datas.address.postcode.substring(0,2),
city = datas.address.city != undefined ? datas.address.city : datas.address.village
createPoint(lat,lon,city,departementRef)
L.Control.mapTitle = L.Control.extend({
options: {
position: 'topleft'
},
onAdd: function () {
var container = L.DomUtil.create('div',
'leaflet-control-title leaflet-bar leaflet-control');
var title = L.DomUtil.create('h1', 'leaflet-bar-part leaflet-bar-part-single', container);
title.innerHTML = 'Dépacements à 100 km';
return container;
}
})
})
});
const customControlClean = L.Control.extend({
options: {
position: 'topleft'
},
L.Control.Help = L.Control.extend({
options: {
position: 'bottomleft'
},
onAdd: function () {
var container = L.DomUtil.create('div',
'leaflet-control-help leaflet-bar leaflet-control');
var content = L.DomUtil.create('div', 'leaflet-bar-part leaflet-bar-part-single', container);
content.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> \
<li>♽ Réinitialiser la carte</li> \
<li>⨂ Effacer le dernier point</li> \
</ul>";
return container;
}
});
onAdd: function () {
let clearButton = L.DomUtil.create('button')
clearButton.innerHTML = "Réinitialiser la carte"
clearButton.onclick = ev => {
L.DomEvent.stopPropagation(ev);
clearLayer();
theMap.setView([46.415, 1.461], 6)
L.Control.CustomClean = L.Control.extend({
options: {
position: 'topleft'
},
onAdd: function () {
var 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);
link.title = 'Réinitialiser la carte';
link.role = 'button';
link.href = '#';
link.innerHTML = "";
link.onclick = ev => {
L.DomEvent.stopPropagation(ev);
L.DomEvent.preventDefault(ev);
clearLayer();
theMap.setView([46.415, 1.461], 6)
}
return container;
}
});
return clearButton;
}
}),
customControlPoint = L.Control.extend({
L.Control.CustomPoint = L.Control.extend({
options: {
position: 'topleft'
},
onAdd: function () {
let removeLastLayer = L.DomUtil.create('button')
removeLastLayer.innerHTML = "Défaire le dernier point"
removeLastLayer.onclick = ev => {
L.DomEvent.stopPropagation(ev);
removeLastPoint()
var 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);
link.title = 'Supprimer le dernier point';
link.role = 'button';
link.href = '#';
link.innerHTML = "";
link.onclick = ev => {
L.DomEvent.stopPropagation(ev);
L.DomEvent.preventDefault(ev);
removeLastPoint();
theMap.setView([46.415,1.461], 6)
}
return removeLastLayer;
}
}),
customControlPosition = L.Control.extend({
return container;
}
});
L.Control.CustomPosition = L.Control.extend({
options: {
position: 'topleft'
},
onAdd: function () {
let locatePosition = L.DomUtil.create('button')
locatePosition.innerHTML = "Localiser ma position"
locatePosition.onclick = ev => {
L.DomEvent.stopPropagation(ev);
theMap.locate({ setView: true, watch: false, maxZoom: 8 })
.on('locationfound', function (e) {
clearLayer();
let lat = e.latlng.lat,
lon = e.latlng.lng,
reverse = `https://nominatim.openstreetmap.org/reverse?lat=${lat}&lon=${lon}&format=json&zoom=18`
fetch(reverse)
.then(response => response.json())
.then(datas => {
// https://nominatim.org/release-docs/develop/api/Reverse/
// le "county" ne donne pas toujours le département mais on a le postcode qui lui est toujours juste CQFD
// comme à Marseille (inexistant) ou Lyon (Métropole de lyon au lieu de rhone)
if (datas.address != undefined && datas.address.country == 'France') {
let departementRef = datas.address.postcode.substring(0, 2),
city = datas.address.city != undefined ? datas.address.city : datas.address.village
createPoint(lat, lon, city, departementRef)
}
})
})
.on('locationerror', function (e) {
console.log(e);
alert("Location access denied.");
});
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 = "⦿";
L.DomEvent
.on( link, 'click', ev => {
var count = 0;
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);
return container;
}
return locatePosition;
}
})
theMap.addControl(new customControlPoint());
theMap.addControl(new customControlClean());
theMap.addControl(new customControlPosition());
\ No newline at end of file
theMap.addControl(new L.Control.mapTitle());
theMap.addControl(new L.Control.Help());
theMap.addControl(new L.Control.CustomPoint());
theMap.addControl(new L.Control.CustomClean());
theMap.addControl(new L.Control.CustomPosition());
/*
* Requete Ajax json
*/
function getJSon( url ) {
return new Promise( function( resolve, reject ) {
var request = new XMLHttpRequest();
request.open('GET', url);
request.responseType = 'json';
request.onload = function() {
if ( request.status === 200 ) {
resolve( request.response )
}
else {
reject( new Error('Erreur chargement JSON; error code:' + request.statusText) );
}
};
request.onerror = function() {
reject( new Error('Erreur réseau. Chargement impossible.'))
};
request.send();
});
}
function drawArea( lat, lon ) {
reverse = `https://nominatim.openstreetmap.org/reverse?lat=${lat}&lon=${lon}&format=json&zoom=18`
getJSon( reverse )
.then( datas => {
if(datas.address != undefined && datas.address.country == 'France') {
let departementRef = datas.address.postcode.substring(0,2),
city = datas.address.city != undefined ? datas.address.city : datas.address.village
createPoint(lat,lon,city,departementRef)
}
})
}
function getPostcodeByName( name ) {
const departements = [{"code":"01","nom":"Ain"},{"code":"02","nom":"Aisne"},{"code":"03","nom":"Allier"},{"code":"04","nom":"Alpes-de-Haute-Provence"},{"code":"05","nom":"Hautes-Alpes"},{"code":"06","nom":"Alpes-Maritimes"},{"code":"07","nom":"Ardèche"},{"code":"08","nom":"Ardennes"},{"code":"09","nom":"Ariège"},{"code":"10","nom":"Aube"},{"code":"11","nom":"Aude"},{"code":"12","nom":"Aveyron"},{"code":"13","nom":"Bouches-du-Rhône"},{"code":"14","nom":"Calvados"},{"code":"15","nom":"Cantal"},{"code":"16","nom":"Charente"},{"code":"17","nom":"Charente-Maritime"},{"code":"18","nom":"Cher"},{"code":"19","nom":"Corrèze"},{"code":"21","nom":"Côte-d’or"},{"code":"22","nom":"Côtes-d’armor"},{"code":"23","nom":"Creuse"},{"code":"24","nom":"Dordogne"},{"code":"25","nom":"Doubs"},{"code":"26","nom":"Drôme"},{"code":"27","nom":"Eure"},{"code":"28","nom":"Eure-et-Loir"},{"code":"29","nom":"Finistère"},{"code":"2A","nom":"South Corsica"},{"code":"2B","nom":"Haute-Corse"},{"code":"30","nom":"Gard"},{"code":"31","nom":"Haute-Garonne"},{"code":"32","nom":"Gers"},{"code":"33","nom":"Gironde"},{"code":"34","nom":"Hérault"},{"code":"35","nom":"Ille-et-Vilaine"},{"code":"36","nom":"Indre"},{"code":"37","nom":"Indre-et-Loire"},{"code":"38","nom":"Isère"},{"code":"39","nom":"Jura"},{"code":"40","nom":"Landes"},{"code":"41","nom":"Loir-et-Cher"},{"code":"42","nom":"Loire"},{"code":"43","nom":"Haute-Loire"},{"code":"44","nom":"Loire-Atlantique"},{"code":"45","nom":"Loiret"},{"code":"46","nom":"Lot"},{"code":"47","nom":"Lot-et-Garonne"},{"code":"48","nom":"Lozère"},{"code":"49","nom":"Maine-et-Loire"},{"code":"50","nom":"Manche"},{"code":"51","nom":"Marne"},{"code":"52","nom":"Haute-Marne"},{"code":"53","nom":"Mayenne"},{"code":"54","nom":"Meurthe-et-Moselle"},{"code":"55","nom":"Meuse"},{"code":"56","nom":"Morbihan"},{"code":"57","nom":"Moselle"},{"code":"58","nom":"Nièvre"},{"code":"59","nom":"Nord"},{"code":"60","nom":"Oise"},{"code":"61","nom":"Orne"},{"code":"62","nom":"Pas-de-Calais"},{"code":"63","nom":"Puy-de-Dôme"},{"code":"64","nom":"Pyrénées-Atlantiques"},{"code":"65","nom":"Hautes-Pyrénées"},{"code":"66","nom":"Pyrénées-Orientales"},{"code":"67","nom":"Bas-Rhin"},{"code":"68","nom":"Haut-Rhin"},{"code":"69","nom":"Rhône"},{"code":"70","nom":"Haute-Saône"},{"code":"71","nom":"Saône-et-Loire"},{"code":"72","nom":"Sarthe"},{"code":"73","nom":"Savoie"},{"code":"74","nom":"Haute-Savoie"},{"code":"75","nom":"Paris"},{"code":"76","nom":"Seine-Maritime"},{"code":"77","nom":"Seine-et-Marne"},{"code":"78","nom":"Yvelines"},{"code":"79","nom":"Deux-Sèvres"},{"code":"80","nom":"Somme"},{"code":"81","nom":"Tarn"},{"code":"82","nom":"Tarn-et-Garonne"},{"code":"83","nom":"Var"},{"code":"84","nom":"Vaucluse"},{"code":"85","nom":"Vendée"},{"code":"86","nom":"Vienne"},{"code":"87","nom":"Haute-Vienne"},{"code":"88","nom":"Vosges"},{"code":"89","nom":"Yonne"},{"code":"90","nom":"Territoire-de-Belfort"},{"code":"91","nom":"Essonne"},{"code":"92","nom":"Hauts-de-Seine"},{"code":"93","nom":"Seine-Saint-Denis"},{"code":"94","nom":"Val-de-Marne"},{"code":"95","nom":"Val-d’oise"}];
return departements.filter( dep => {
return dep.nom == name
})
}
......@@ -4,14 +4,35 @@
box-sizing: border-box;
}
html,
body,
#map {
height: 100vh;
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
ul {
margin: 1em 2em;
list-style: none;
}
h1 {
text-align: center;
}
.leaflet-control-title {
transform: translate(-50%,20%);
position: fixed !important;
left: 50%;
text-align: center;
padding-left: 50px;
padding-right: 50px;
background: rgba(255,255,255,0.9);
}
.leaflet-control-help {
background: rgba(255,255,255,0.9);
padding: 10px;
}
......@@ -10,23 +10,14 @@
<link rel="stylesheet" href="assets/Control.Geocoder.css">
<link rel="stylesheet" href="assets/style.css">
<script src="assets/turf.min.js" defer></script>
<script src="assets/leaflet.js" defer></script>
<script src="assets/Control.Geocoder.js" defer></script>
<script src="assets/script.js" defer></script>
</head>
<body>
<h1>100km</h1>
<h2>Comment procéder ?</h2>
<ul>
<li>Faire une recherche (ville, code postal…) avec le bouton loupe (en haut à droite de la carte)</li>
<li>Cliquer directement sur la carte à l'endroit choisi</li>
</ul>
<div id="map"></div>
<span>Projet par Sp3r4z - <a href="https://framagit.org/Sp3r4z/100km">Source sur framagit</a></span>
<script src="assets/turf.min.js" defer></script>
<script src="assets/leaflet.js" defer></script>
<script src="assets/Control.Geocoder.js" defer></script>
<script src="assets/script.js" defer></script>
</body>
</html>
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