json-map/js/core.js

//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);