346 lines
8.6 KiB
JavaScript
Executable File
346 lines
8.6 KiB
JavaScript
Executable File
// 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);
|
|
|
|
// Pane dédiée pour les vector tiles, au-dessus du fond
|
|
if (!mymap.getPane('vectorPane')) {
|
|
mymap.createPane('vectorPane');
|
|
mymap.getPane('vectorPane').style.zIndex = 650;
|
|
mymap.getPane('vectorPane').style.pointerEvents = 'auto';
|
|
}
|
|
|
|
$("#map-credits").html(topo_maptiler.getAttribution());
|
|
|
|
poiLayer = L.layerGroup().addTo(mymap);
|
|
|
|
// ---------------------------------------------------------
|
|
// Styles des POIs pour les vector tiles
|
|
// ---------------------------------------------------------
|
|
|
|
// Fonction qui génère le SVG du point pour les calques en pbf
|
|
function svgDataUriFor(color, size, shape, strokeOpacity = 0.4) {
|
|
const w = size, h = size, strokeWidth = 1, r = Math.max(1, Math.round(size * 0.15));
|
|
const inset = 2 + strokeWidth / 2, innerW = w - inset * 2, innerH = h - inset * 2;
|
|
let shapeSvg;
|
|
|
|
if (shape === 'triangle') {
|
|
const p1 = `${w/2},${inset}`, p2 = `${w-inset},${h-inset}`, p3 = `${inset},${h-inset}`, points = `${p1} ${p2} ${p3}`;
|
|
shapeSvg = `<g>
|
|
<polygon points='${points}' fill='${color}' stroke='none'/>
|
|
<polygon points='${points}' fill='none' stroke='#fff' stroke-opacity='${strokeOpacity}' stroke-width='${strokeWidth}' stroke-linejoin='round'/>
|
|
</g>`;
|
|
} else {
|
|
shapeSvg = `<g>
|
|
<rect x='${inset}' y='${inset}' rx='${r}' ry='${r}' width='${innerW}' height='${innerH}' fill='${color}' stroke='none'/>
|
|
<rect x='${inset}' y='${inset}' rx='${r}' ry='${r}' width='${innerW}' height='${innerH}' fill='none' stroke='#fff' stroke-opacity='${strokeOpacity}' stroke-width='${strokeWidth}' stroke-linejoin='round'/>
|
|
</g>`;
|
|
}
|
|
|
|
const svg = `<svg xmlns='http://www.w3.org/2000/svg' width='${w}' height='${h}' viewBox='0 0 ${w} ${h}'>${shapeSvg}</svg>`;
|
|
return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
|
|
}
|
|
|
|
function getPoiStyle(type) {
|
|
if (window.poi_style_map && window.poi_style_map[type]) {
|
|
return window.poi_style_map[type];
|
|
}
|
|
// Final hardcoded fallback (keeps previous defaults)
|
|
return { color: "#ef2929", size: 14, shape: "square" };
|
|
}
|
|
|
|
function buildPoiVectorIcon(properties, zoom) {
|
|
var type = (properties && (properties.type || properties.poi_type || properties.poiType)) || "default";
|
|
var style = getPoiStyle(type);
|
|
var scale = 1;
|
|
if (zoom === 8) {
|
|
scale = 1.2;
|
|
} else if (zoom >= 9) {
|
|
scale = 1.4;
|
|
}
|
|
var size = Math.max(1, Math.round(style.size * scale));
|
|
var iconUrl = svgDataUriFor(style.color, size, style.shape);
|
|
|
|
return L.icon({
|
|
iconUrl: iconUrl,
|
|
iconSize: [size, size],
|
|
iconAnchor: [Math.floor(size / 2), Math.floor(size / 2)],
|
|
popupAnchor: [0, -size]
|
|
});
|
|
}
|
|
|
|
// Couche vectorielle utilisée pour les faibles zooms
|
|
vectorLayer = L.vectorGrid.protobuf(
|
|
root + "poi/tile/{z}/{x}/{y}.pbf",
|
|
{
|
|
maxZoom: 9,
|
|
rendererFactory: L.svg.tile,
|
|
pane: 'vectorPane',
|
|
vectorTileLayerStyles: {
|
|
pois: function(properties, zoom) {
|
|
var icon = buildPoiVectorIcon(properties, zoom);
|
|
|
|
return {
|
|
icon: icon,
|
|
};
|
|
}
|
|
}
|
|
}
|
|
);
|
|
|
|
var mapZoomHintTimer = null;
|
|
|
|
function showMapZoomHint() {
|
|
if ($('#map-zoom-hint').length === 0) {
|
|
$('#mapid').append('<div id="map-zoom-hint">Zoomer pour pouvoir cliquer sur la carte</div>');
|
|
}
|
|
|
|
$('#map-zoom-hint')
|
|
.stop(true, true)
|
|
.fadeIn(100)
|
|
.delay(1500)
|
|
.fadeOut(100);
|
|
}
|
|
|
|
mymap.on('click', function(e) {
|
|
if (mymap.getZoom() < 10) {
|
|
if (mapZoomHintTimer) {
|
|
clearTimeout(mapZoomHintTimer);
|
|
mapZoomHintTimer = null;
|
|
return;
|
|
}
|
|
|
|
mapZoomHintTimer = setTimeout(function() {
|
|
showMapZoomHint();
|
|
mapZoomHintTimer = null;
|
|
}, 300);
|
|
}
|
|
});
|
|
|
|
// ---------------------------------------------------------
|
|
// 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()
|
|
);
|
|
|
|
if (mymap.hasLayer(vectorLayer)) {
|
|
if (vectorLayer.bringToFront) {
|
|
vectorLayer.bringToFront();
|
|
} else {
|
|
mymap.removeLayer(vectorLayer);
|
|
mymap.addLayer(vectorLayer);
|
|
}
|
|
}
|
|
});
|
|
|
|
// ---------------------------------------------------------
|
|
// Chargement des POI visibles
|
|
// ---------------------------------------------------------
|
|
|
|
function loadVisiblePois() {
|
|
if (mymap.getZoom() < 10)
|
|
return;
|
|
|
|
var b = mymap.getBounds();
|
|
var currentZoom = mymap.getZoom();
|
|
|
|
// helper local : construit un L.Icon en fonction du type et du zoom
|
|
function getMarkerIconFor(type, zoom) {
|
|
var baseSize = 16;
|
|
if (window.poi_style_map && window.poi_style_map[type] && window.poi_style_map[type].size) {
|
|
baseSize = window.poi_style_map[type].size;
|
|
}
|
|
|
|
var size = zoom > 11
|
|
? Math.round(baseSize * 2)
|
|
: Math.round(baseSize * 1.5);
|
|
|
|
return L.icon({
|
|
iconUrl: window.poi_style_map[type].icon || window.poi_style_map["default"].icon,
|
|
iconSize: [size, size],
|
|
iconAnchor: [Math.floor(size / 2), Math.floor(size / 2)],
|
|
popupAnchor: [0, -size]
|
|
});
|
|
}
|
|
|
|
$.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 markerIcon = getMarkerIconFor(poi.type, currentZoom);
|
|
|
|
var marker = L.marker(
|
|
[poi.lat, poi.lon],
|
|
{
|
|
icon: markerIcon
|
|
}
|
|
);
|
|
|
|
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();
|
|
}); |