mirror of
https://forge.chapril.org/tykayn/osm-commerces
synced 2025-06-20 01:44:42 +02:00
search by insee code
This commit is contained in:
parent
8081889f1e
commit
8d83186a68
7 changed files with 130 additions and 78 deletions
|
@ -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;
|
||||
>;
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 %}
|
Loading…
Add table
Add a link
Reference in a new issue