search by insee code

This commit is contained in:
Tykayn 2025-06-05 15:09:28 +02:00 committed by tykayn
parent 8081889f1e
commit 8d83186a68
7 changed files with 130 additions and 78 deletions

View file

@ -92,9 +92,9 @@
async function fetchland() {
// Requête pour obtenir le contour administratif
const boundaryQuery = `[out:json][timeout:25];
area["postal_code"="${zip_code}"]->.searchArea;
area["ref:INSEE"="${zip_code}"]->.searchArea;
(
relation["boundary"="postal_code"]["postal_code"="${zip_code}"](area.searchArea);
relation["boundary"="postal_code"]["ref:INSEE"="${zip_code}"](area.searchArea);
);
out body;
>;

View file

@ -25,20 +25,7 @@
// Fonction pour rechercher avec Addok
async function searchPostalCode(query) {
try {
const response = await fetch(`https://api-adresse.data.gouv.fr/search/?q=${query}&type=municipality&autocomplete=1`);
const data = await response.json();
return data.features.map(feature => ({
label: `${feature.properties.city} (${feature.properties.postcode})`,
postcode: feature.properties.postcode,
city: feature.properties.city
}));
} catch (error) {
console.error('Erreur lors de la recherche:', error);
return [];
}
}
// Créer et configurer la liste de suggestions
const suggestionList = document.createElement('ul');
@ -79,7 +66,7 @@
return;
}
const suggestions = await searchPostalCode(query);
const suggestions = await searchInseeCode(query);
suggestionList.innerHTML = '';
if (suggestions.length === 0) {
@ -135,12 +122,12 @@
}
// Créer une carte des villes avec les codes postaux
let map = new maplibregl.Map({
{# let map = new maplibregl.Map({
container: 'mapDashboard',
style: 'https://api.maptiler.com/maps/basic-v2/style.json?key={{ maptiler_token }}',
center: [2.3488, 48.8534], // Paris
zoom: 10
});
}); #}
// Fonction pour obtenir la couleur selon le pourcentage
function getColorFromPercent(percent) {
@ -232,9 +219,15 @@ out skel qt;`;
<h2>{{ places_count }} Lieux</h2>
<h2><button class="btn btn-primary" id="labourer">Labourer les mises à jour</button></h2>
<label for="app_admin_labourer">Rechercher une ville </label>
<input class="form-control" type="text" id="app_admin_labourer" value="75013">
<label for="app_admin_labourer">Rechercher une ville par son nom
<div id="loading_search_insee" class="d-none">
<div class="spinner-grow text-primary" role="status">
<span class="sr-only">Chargement...</span>
</div>
</div>
</label>
<input class="form-control" type="text" id="app_admin_labourer" placeholder="Entrez le nom d'une ville...">
<div id="suggestionList" class="suggestion-list"></div>
</div>
</div>

View file

@ -170,27 +170,28 @@
</div>
</div>
{% block javascripts %}
{{ parent() }}
<script src={{asset('js/mapbox/mapbox-gl.js')}}></script>
<script>
{% if commerce is not empty and mapbox_token is not empty and maptiler_token is not empty and commerce_overpass['@attributes'].lon is defined and commerce_overpass['@attributes'].lat is defined %}
mapboxgl.accessToken = '{{ mapbox_token }}';
map = new mapboxgl.Map({
container: 'map',
style: 'https://api.maptiler.com/maps/basic-v2/style.json?key={{ maptiler_token }}',
center: [{{ commerce_overpass['@attributes'].lon }}, {{ commerce_overpass['@attributes'].lat }}],
zoom: 17
});
new mapboxgl.Marker()
.setLngLat([{{ commerce_overpass['@attributes'].lon }}, {{ commerce_overpass['@attributes'].lat }}])
.setPopup(new mapboxgl.Popup({ offset: 25 }).setHTML('<h1>{{ commerce_overpass.tags_converted.name }}</h1>'))
.addTo(map);
{% endif %}
</script>
{% endblock %}
{% endblock %}
{% block javascripts %}
{{ parent() }}
<script src={{asset('js/mapbox/mapbox-gl.js')}}></script>
<script>
{% if commerce is not empty and mapbox_token is not empty and maptiler_token is not empty and commerce_overpass['@attributes'].lon is defined and commerce_overpass['@attributes'].lat is defined %}
mapboxgl.accessToken = '{{ mapbox_token }}';
map = new mapboxgl.Map({
container: 'map',
style: 'https://api.maptiler.com/maps/basic-v2/style.json?key={{ maptiler_token }}',
center: [{{ commerce_overpass['@attributes'].lon }}, {{ commerce_overpass['@attributes'].lat }}],
zoom: 17
});
new mapboxgl.Marker()
.setLngLat([{{ commerce_overpass['@attributes'].lon }}, {{ commerce_overpass['@attributes'].lat }}])
.setPopup(new mapboxgl.Popup({ offset: 25 }).setHTML('<h1>{{ commerce_overpass.tags_converted.name }}</h1>'))
.addTo(map);
{% endif %}
</script>
{% endblock %}