cedric/json-map
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

initial commit

Browse source
This commit is contained in:
cpinte 2026-01-14 12:58:15 +01:00
commit ff607ff17d
8 changed files with 3866 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

147
js/core.js Normal file
View file

@ -0,0 +1,147 @@
//Update url //Rester au même endroit de la liste après clic const
searchInput = document.getElementById("search");
var refreshCategories = true;
var currentCategory = null;
var regexValue = '.*';
var searchedFeatures;
searchInput.addEventListener('input', function (evt) {
display(this.value);
});
function categoryFilter(categorie) {
if (currentCategory === categorie) {
document.getElementById(currentCategory).classList.remove('selected');
currentCategory = null;
display(searchInput.value);
} else if (currentCategory != null) {
document.getElementById(currentCategory).classList.remove('selected');
document.getElementById(categorie).classList.add('selected');
currentCategory = categorie;
display(searchInput.value);
} else {
document.getElementById(categorie).classList.add('selected');
currentCategory = categorie;
display(searchInput.value);
}
}
function display(value) {
regexValue = '.*' + value + '.*';
searchedFeatures = data.features.filter(function (feature) {
const regex = new RegExp(regexValue, 'gi');
if (currentCategory === null) {
return feature.properties.name.match(regex);
} else {
return feature.properties.name.match(regex) && feature.properties.category.match(currentCategory);
}
});
var categories = [];
var categoriesLink = '';
var locationLink = '';
searchedFeatures.forEach(function (element) {
if (refreshCategories) {
var category = element.properties.category;
if (!categories.includes(category)) {
categories.push(category);
categoriesLink += `<button id="${category}" onClick="categoryFilter('${category}');" >${category}</button>`;
}
}
var long = element.geometry.coordinates[0];
var lat = element.geometry.coordinates[1];
locationLink += `<button id="${lat}-${long}" class="item" href="javascript:;" onClick="focusOnLocation('${lat}', '${long}');"> <div class ="icon icon-care"></div> <div> <div><b>${element.properties.name}</b></div> ${element.properties.chapo} </div> </button>`;
});
document.getElementById('list').innerHTML = locationLink;
if (refreshCategories) {
document.getElementById('categories').innerHTML = categoriesLink;
}
refreshCategories = false;
}
function focusOnLocation(lat, long) {
document.getElementById("action").classList.remove('suggestion');
document.getElementById("action").classList.add('geo');
var infoElements = document.getElementsByClassName('item-info');
Array.prototype.forEach.call(infoElements, function (infoElement) {
infoElement.style.display = "block";
});
var mapElements = document.getElementsByClassName('map-info');
Array.prototype.forEach.call(mapElements, function (mapElement) {
mapElement.style.display = "none";
});
searchedFeatures.forEach(function (element) {
var currentLong = element.geometry.coordinates[0];
var currentLat = element.geometry.coordinates[1];
if (currentLat == lat && currentLong == long) {
map.setView([lat, long], 17);
document.getElementById('name').innerHTML = element.properties.name;
document.getElementById('description').innerHTML = element.properties.description;
document.getElementById('action').href = `geo:${lat},${long}`;
document.getElementById('contact').innerHTML = "";
var contactContent = '';
var webValue = element.properties.website;
if (webValue !== undefined) {
var web = `<a class="icon icon-web" href="${webValue}"></a>`;
contactContent += web;
}
var phoneValue = element.properties.phone;
if (phoneValue !== undefined) { //TODO : Don't show if undefined
var phone = `<a class="icon icon-phone" href="tel:${phoneValue}"></a>`;
contactContent += phone;
}
var mailValue = element.properties.mail;
if (phoneValue !== undefined) {
var mail = `<a class="icon icon-mail" href="mailto:${mailValue}"></a>`;
contactContent += mail;
}
var facebookValue = element.properties.mail;
if (facebookValue !== undefined) {
var facebook = `<a class="icon icon-facebook" href="${facebookValue}"></a>`;
contactContent += facebook;
}
document.getElementById('contact').innerHTML += contactContent;
var popup = L.popup().setLatLng(new L.LatLng(lat, long)).setContent(element.properties.name).openOn(map);
}
});
}
function closeDetail() {
document.getElementById("action").classList.remove('geo');
document.getElementById("action").classList.add('suggestion');
var infoElements = document.getElementsByClassName('item-info');
Array.prototype.forEach.call(infoElements, function (infoElement) {
infoElement.style.display = "none";
});
var mapElements = document.getElementsByClassName('map-info');
Array.prototype.forEach.call(mapElements, function (mapElement) {
mapElement.style.display = "block";
});
}
display(''); /** Leaflet **/
function whenClicked(e) {
var lat = e.latlng.lat;
var long = e.latlng.lng;
focusOnLocation(lat, long);
}
function onEachFeature(feature, layer) {
layer.on({
click: whenClicked
});
}
function searchFilter(feature) {
return feature.properties.name.match(regexValue);
}
var map = L.map('map').setView([47.16801, 5.174217], 11);
map.zoomControl.setPosition('topright');
map.attributionControl.setPosition('bottomleft');
L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/rastertiles/voyager/{z}/{x}/{y}.png', {
id: 'mapbox.light'
}).addTo(map); //TODO : Refresh when filter
L.geoJson(searchedFeatures, {
filter: searchFilter,
onEachFeature: onEachFeature
}).addTo(map);