Geolocalization

static/index.html

@@ -57,6 +57,20 @@
 	<div id="app" class="wrapper">
 		<div id="sidebar_left" class="sidebar" v-show="!fold_left" class="container">
 			<div class="scrollable">
+				<div class="form-group">
+						<label for="departements" class="control-label">Adresse</label>
+					<div class="input-group">
+						<input type="text" name="municipality" id="search" class="form-control" 
+						placeholder="Rechercher une adresse, une ville, un lieu..." 
+						title="Rechercher une adresse, une ville, un lieu..." >
+					</div>
+				</div>
+				<div class="form-group">
+					<button type="submit" class="btn btn-primary" onclick="selectionnerAdresse()">Rechercher</button>
+					<button v-if="navigator.geolocation" type="submit" class="btn btn-primary" onclick="localizeUser()">
+						<i class="fas fa-map-marker-alt"></i>
+					</button>
+				</div>
 				<div class="form-group">
 					<label for="departements" class="control-label">Département</label>
 					<select name="departements" id="departements" onchange="selectionnerDepartement()" class="form-control">

static/js/data.js

@@ -165,3 +165,26 @@ function computeParcelle(mutationsSection, idParcelle) {
 
 	return {mutations: sortByDateDesc(mutations)}
 }
+
+function getDepartement(lat, lng) {
+	return getRemoteJSON(`https://geo.api.gouv.fr/communes?lat=${lat}&lon=${lng}&fields=nom,code,codesPostaux,codeDepartement,codeRegion,population&format=geojson&geometry=centre`)
+	.then(function (data) {
+		return data.features[0]
+	})
+}
+
+function getInformationCadastrale(geom) {
+	query = encodeURIComponent(JSON.stringify(geom));
+	return getRemoteJSON(`https://apicarto.ign.fr/api/cadastre/division?geom=${query}`)
+	.then(function (data) {
+		return data.features[0].properties
+	})
+}
+
+function getCoordinates(query) {
+	param = encodeURIComponent(query.replace(" ", "+"));
+	return getRemoteJSON(`https://api-adresse.data.gouv.fr/search/?q=${param}`)
+	.then(function (data) {
+		return data.features[0].geometry
+	})
+}

static/js/index.js

@@ -537,10 +537,54 @@ function onDepartementClick(event) {
 	document.getElementById("departements").value = sonCode;
 };
 
+function selectionnerAdresse(event) {
+	var criteria = document.getElementById("search").value;
+	getCoordinates(criteria).then(function(position){
+		return initPosition(position.coordinates[1], position.coordinates[0]);	
+	});
+};
+
 function toggleLeftBar() {
 	vue.fold_left = !vue.fold_left;
 }
 
+function initPositionFromGeolocalisation(position) {
+	initPosition(position.coords.latitude, position.coords.longitude);
+}
+
+function initPosition(lat, lng) {
+	getDepartement(lat, lng).then(function(commune){
+
+		commune.geometry.coordinates[1] = lat;
+		commune.geometry.coordinates[0] = lng;
+		return getInformationCadastrale(commune.geometry).then(function(props){
+
+			var section = props.section.padStart(5, '0')
+			var code_dep = props.code_dep
+			var code_com = props.code_com
+			var feuille = props.feuille.toString().padStart(4, '0')
+
+			codeSection = `${code_dep}${code_com}${section}`
+			parcelle = `${code_dep}${code_com}${section}${feuille}`
+
+			var codeCommune = commune.properties.code;
+			var codeDepartement = commune.properties.codeDepartement;
+			entrerDansDepartement(codeDepartement).then(function(){
+				entrerDansCommune(codeCommune).then(function(){
+					entrerDansSection(codeSection).then(function(){
+						entrerDansParcelle(parcelle).then(function(){
+							document.getElementById("departements").value = codeDepartement;
+							document.getElementById("communes").value = codeCommune;
+							document.getElementById("sections").value = codeSection;
+							document.getElementById("parcelles").value = parcelle;
+						})
+					})
+				})
+			});
+		});
+	});
+}
+
 // C'est le code qui est appelé au début (sans que personne ne clique)
 (function () {
 
@@ -573,8 +617,8 @@ function toggleLeftBar() {
 					map.addLayer(departementsContoursLayer)
 				map.setPaintProperty(departementsContoursLayer.id, 'line-color', vue.mapStyle === 'ortho' ? '#fff' : '#000')
 			})
-				}
-		})
+		}
+	})
 	map.on('styledata', loadCustomLayers)
 
 	hoverableSources.map(function (source) {
@@ -662,8 +706,7 @@ function toggleLeftBar() {
 	// Sur mobile, cacher la barre latérale
 	if (window.innerWidth < 768) {
 		vue.fold_left = true;
-	}
-
+	} 
 })();
 
 function loadCustomLayers() {
@@ -776,4 +819,7 @@ function departementsFilter() {
 	map.setFilter('departements-layer', ['!=', ['get', 'code'], codeDepartement])
 }
 
-
+function localizeUser() {
+	if(navigator.geolocation)
+		navigator.geolocation.getCurrentPosition(initPositionFromGeolocalisation);
+}