kabano/public/views/js/d.map.js

// Carte principale
var mymap;
var poiLayer;
var vectorLayer;
var icons = {};

$(document).ready(function() {

	// ---------------------------------------------------------
	// Fonds de carte
	// ---------------------------------------------------------

	var topo_maptiler = L.tileLayer(
		'https://api.maptiler.com/maps/topographique/{z}/{x}/{y}.png?key=Sm8M7mJ53GtYdl773rpi',
		{
			tms: false,
			tileSize: 512,
			zoomOffset: -1,
			minZoom: 1,
			attribution:
				'Carte © MapTiler, Données © OpenStreetMap'
		}
	);

	var ign = L.tileLayer(
		'https://data.geopf.fr/private/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&STYLE=normal&TILEMATRIXSET=PM&FORMAT=image/jpeg&LAYER=GEOGRAPHICALGRIDSYSTEMS.MAPS&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&apikey=ign_scan_ws',
		{
			attribution: 'Carte © IGN-F/Géoportail'
		}
	);

	var baseLayers = {
		"OpenStreetMap": topo_maptiler,
		"IGN France": ign
	};

	// ---------------------------------------------------------
	// Carte
	// ---------------------------------------------------------

	mymap = L.map('mapid', {
		zoomControl: false,
		layers: [topo_maptiler]
	}).setView([47, 3], 6);

	$("#map-credits").html(topo_maptiler.getAttribution());

	poiLayer = L.layerGroup().addTo(mymap);

	// ---------------------------------------------------------
	// Styles des POIs pour les vector tiles
	// ---------------------------------------------------------

	function svgDataUriFor(color, size, shape) {
		var width = size;
		var height = size;
		var svg = "";

		if (shape === "triangle") {
			svg =
				"<svg xmlns='http://www.w3.org/2000/svg' width='" + width + "' height='" + height + "' viewBox='0 0 " + width + " " + height + "'>" +
				"<polygon points='" + (width / 2) + ",2 " + (width - 2) + "," + (height - 2) + " 2," + (height - 2) + "' fill='" + color + "'/>" +
				"</svg>";
		} else {
			svg =
				"<svg xmlns='http://www.w3.org/2000/svg' width='" + width + "' height='" + height + "' viewBox='0 0 " + width + " " + height + "'>" +
				"<rect x='2' y='2' width='" + (width - 4) + "' height='" + (height - 4) + "' fill='" + color + "'/>" +
				"</svg>";
		}

		return "data:image/svg+xml;utf8," + encodeURIComponent(svg);
	}

	var poiStyleMap = {
		"wilderness_hut": { color: "#d73a3a", size: 12, shape: "square" },
		"basic_hut":     { color: "#d73a3a", size: 8,  shape: "square" },
		"alpine_hut":    { color: "#d73a3a", size: 16, shape: "square" },
		"halt":          { color: "#4caf50", size: 16, shape: "square" },
		"bivouac":       { color: "#d73a3a", size: 12, shape: "triangle" },
		"campsite":      { color: "#4caf50", size: 12, shape: "triangle" }
	};

	function buildPoiVectorIcon(properties) {
		var type = (properties && (properties.type || properties.poi_type || properties.poiType)) || "default";
		var style = poiStyleMap[type] || { color: "#d73a3a", size: 10, shape: "square" };
		var iconUrl = svgDataUriFor(style.color, style.size, style.shape);

		return L.icon({
			iconUrl: iconUrl,
			iconSize: [style.size, style.size],
			iconAnchor: [Math.floor(style.size / 2), style.size],
			popupAnchor: [0, -style.size]
		});
	}

	// Couche vectorielle utilisée pour les faibles zooms
	vectorLayer = L.vectorGrid.protobuf(
		root + "poi/tile/{z}/{x}/{y}.pbf",
		{
			interactive: true,
			maxZoom: 9,
			rendererFactory: L.svg.tile,
			vectorTileLayerStyles: {
				pois: function(properties, zoom) {
					var icon = buildPoiVectorIcon(properties);

					return {
						icon: icon,
						interactive: true
					};
				}
			}
		}
	);

	// Clic sur un POI vectoriel
	vectorLayer.on("click", function(e) {
		if (
			e.layer &&
			e.layer.properties &&
			e.layer.properties.permalink
		) {
			window.location =
				root +
				"poi/" +
				e.layer.properties.permalink;
		}
	});

	// ---------------------------------------------------------
	// Contrôles
	// ---------------------------------------------------------

	L.control.scale({
		position: "bottomleft",
		imperial: false
	}).addTo(mymap);

	var credits = L.easyButton(
		'fa-info',
		function() {
			$("footer").hide();
			$("#footer-credits").show();
			$("#footer-legend").hide();
		},
		'Credits'
	);

	var legend = L.easyButton(
		'fa-question',
		function() {
			$("footer").hide();
			$("#footer-credits").hide();
			$("#footer-legend").show();
		},
		'Legend'
	);

	L.easyBar(
		[credits, legend],
		{
			position: "bottomleft"
		}
	).addTo(mymap);

	L.control.fullscreen({
		position: "bottomleft"
	}).addTo(mymap);

	L.control.zoom({
		zoomOutText: '<i class="fa fa-minus"></i>',
		zoomInText: '<i class="fa fa-plus"></i>',
		position: "bottomleft"
	}).addTo(mymap);

	L.control.layers(
		baseLayers,
		null,
		{
			position: "bottomright"
		}
	).addTo(mymap);

	mymap.removeControl(mymap.attributionControl);

	// ---------------------------------------------------------
	// Footer
	// ---------------------------------------------------------

	$(".close-link").click(function() {
		$("footer").show();
		$("#footer-credits").hide();
		$("#footer-legend").hide();
	});

	mymap.on('baselayerchange', function(e) {
		$("#map-credits").html(
			e.layer.getAttribution()
		);
	});

	// ---------------------------------------------------------
	// Icônes
	// ---------------------------------------------------------

	for (const type in window.poi_icons) {
		icons[type] = L.icon({
			iconUrl: window.poi_icons[type],
			iconSize: [32, 32],
			iconAnchor: [16, 32],
			popupAnchor: [0, -32]
		});
	}

	// ---------------------------------------------------------
	// Chargement des POI visibles
	// ---------------------------------------------------------

	function loadVisiblePois() {
		if (mymap.getZoom() < 10)
			return;

		var b = mymap.getBounds();

		$.getJSON(
			root + "poi/api_bbox",
			{
				north: b.getNorth(),
				south: b.getSouth(),
				east: b.getEast(),
				west: b.getWest()
			},
			function(pois) {
				poiLayer.clearLayers();

				pois.forEach(function(poi) {
					var icon =
						icons[poi.type] ||
						icons["default"];

					var marker = L.marker(
						[poi.lat, poi.lon],
						{
							icon: icon
						}
					);

					marker.bindTooltip(
						poi.name,
						{
							direction: "top",
							offset: [0, -10],
							opacity: 0.9,
							className: "poi-tooltip"
						}
					);

					marker.on(
						"click",
						function() {
							window.location =
								root +
								"poi/" +
								poi.permalink;
						}
					);

					poiLayer.addLayer(marker);
				});
			}
		);
	}

	// ---------------------------------------------------------
	// Bascule entre le calque vectoriel et geojson
	// ---------------------------------------------------------

	function switchLayers() {
		var z = mymap.getZoom();

		if (z < 10) {
			poiLayer.clearLayers();

			if (!mymap.hasLayer(vectorLayer)) {
				mymap.addLayer(vectorLayer);
			}
		} else {
			if (mymap.hasLayer(vectorLayer)) {
				mymap.removeLayer(vectorLayer);
			}

			loadVisiblePois();
		}
	}

	// ---------------------------------------------------------
	// Rechargement automatique
	// ---------------------------------------------------------

	mymap.on("zoomend", switchLayers);
	mymap.on("moveend", function() {
		if (mymap.getZoom() >= 10) {
			loadVisiblePois();
		}
	});

	switchLayers();
});