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

Add location position & layers switcher

parent 68be9674
const baseLayers = [
{
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',
maxZoom: 19
}
},
{
name: 'Open Street Map',
url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
options: {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>',
maxZoom: 19
}
},
{
name: 'IGN Standard',
url: "https://wxs.ign.fr/choisirgeoportail/geoportail/wmts?" +
"&REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0" +
"&STYLE=normal" +
"&TILEMATRIXSET=PM" +
"&FORMAT=image/jpeg" +
"&LAYER=GEOGRAPHICALGRIDSYSTEMS.MAPS" +
"&TILEMATRIX={z}" +
"&TILEROW={y}" +
"&TILECOL={x}",
options: {
minZoom: 0,
maxZoom: 18,
attribution: "IGN-F/Geoportail",
tileSize: 256 // les tuiles du Géooportail font 256x256px
}
}
];
const overlayLayers = [
{
name: 'Relief',
url: "https://tiles.wmflabs.org/hillshading/{z}/{x}/{y}.png",
options: {
attribution: 'Hillshading: SRTM3 v2 (<a href="http://www.nasa.gov/">NASA</a>)',
}
}
];
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 => {
......@@ -62,42 +109,55 @@ clearLayer = _ => {
}
let theMap = L.map('map').setView([46.415,1.461], 6),
metropole = null,
layersArray = [],
layerGroup = L.layerGroup()
metropole = null,
layersArray = [],
layerGroup = L.layerGroup()
layerGroup.addTo(theMap)
fetch('geojson/metropole.geojson')
.then(response => response.json())
.then(datas => {
metropole = datas
})
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>',
maxZoom: 19,
}).addTo(theMap)
L.Control.geocoder({
defaultMarkGeocode: false
})
.on('markgeocode', (e) => {
let center = e.geocode.center,
postCode = e.geocode.properties.address.postcode,
departementRef = null,
city = e.geocode.properties.address.city != undefined ? e.geocode.properties.address.city : e.geocode.properties.address.village
postCode = e.geocode.properties.address.postcode,
departementRef = null,
city = e.geocode.properties.address.city != undefined ? e.geocode.properties.address.city : e.geocode.properties.address.village
if(postCode != null) {
departementRef = postCode.substring(0,2).toUpperCase()
if (postCode != null) {
departementRef = postCode.substring(0, 2).toUpperCase()
}
else if(e.geocode.properties.address.county != null) {
else if (e.geocode.properties.address.county != null) {
departementRef = getPostcodeByName(e.geocode.properties.address.county)[0].code
}
createPoint(center.lat,center.lng,city,departementRef)
createPoint(center.lat, center.lng, city, departementRef)
})
.addTo(theMap)
const controlLayer = new L.control.layers(null, null, { collapsed: false });
theMap.addControl(controlLayer);
for (var i = 0; i < baseLayers.length; i++) {
var m = baseLayers[i];
var l = new L.TileLayer(m.url, m.options);
controlLayer.addBaseLayer(l, m.name);
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);
controlLayer.addOverlay(l, m.name)
if (i === 0) theMap.addLayer(l);
}
fetch('geojson/metropole.geojson')
.then(response => response.json())
.then(datas => {
metropole = datas
})
theMap.on('click', (e) => {
let lat = e.latlng.lat,
lon = e.latlng.lng,
......@@ -128,7 +188,8 @@ const customControlClean = L.Control.extend({
clearButton.innerHTML = "Réinitialiser la carte"
clearButton.onclick = ev => {
L.DomEvent.stopPropagation(ev);
clearLayer()
clearLayer();
theMap.setView([46.415, 1.461], 6)
}
return clearButton;
......@@ -149,7 +210,47 @@ customControlPoint = L.Control.extend({
return removeLastLayer;
}
}),
customControlPosition = 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.");
});
}
return locatePosition;
}
})
theMap.addControl(new customControlPoint());
theMap.addControl(new customControlClean());
theMap.addControl(new customControlPosition());
\ 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