235 lines
8.2 KiB
JavaScript
Executable File
235 lines
8.2 KiB
JavaScript
Executable File
// Carte des POIs et marqueur principal.
|
|
var mymap;
|
|
var poi_layer;
|
|
var poiApiLayer;
|
|
|
|
$(document).ready(function() {
|
|
// Mode : edit (formulaire) ou view (affichage)
|
|
var isEdit = (typeof poi_mode === "undefined" || poi_mode === "edit");
|
|
|
|
// ---------------------------------------------------------
|
|
// Fonds de carte
|
|
// ---------------------------------------------------------
|
|
var topo_maptiler = L.tileLayer(
|
|
'https://api.maptiler.com/maps/topographique/{z}/{x}/{y}.png?key=Sm8M7mJ53GtYdl773rpi',
|
|
{
|
|
tms: false,
|
|
attribution: 'Carte © <a href="https://www.maptiler.com/copyright/" target="_blank">MapTiler</a>, Données © <a href="http://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>',
|
|
tileSize: 512,
|
|
zoomOffset: -1,
|
|
minZoom: 1
|
|
}
|
|
);
|
|
|
|
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}',
|
|
{
|
|
attribution: 'Carte & Connées © <a href="http://ign.fr/" target="_blank">IGN-F/Géoportail</a>'
|
|
}
|
|
);
|
|
|
|
var baseLayers = {
|
|
"OpenStreetMap": topo_maptiler,
|
|
"IGN France": ign
|
|
};
|
|
|
|
// ---------------------------------------------------------
|
|
// Carte
|
|
// ---------------------------------------------------------
|
|
mymap = L.map('mapid', {
|
|
zoomControl: false,
|
|
layers: [topo_maptiler],
|
|
minZoom: 10
|
|
}).setView([47, 3], 6);
|
|
|
|
$("#map-credits").html(topo_maptiler.getAttribution());
|
|
|
|
// ---------------------------------------------------------
|
|
// Icônes / markers issus de poi/api_bbox
|
|
// ---------------------------------------------------------
|
|
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]
|
|
});
|
|
}
|
|
|
|
function refreshPoiApiLayer() {
|
|
var b = mymap.getBounds();
|
|
|
|
$.getJSON(
|
|
root + "poi/api_bbox",
|
|
{
|
|
north: b.getNorth(),
|
|
south: b.getSouth(),
|
|
east: b.getEast(),
|
|
west: b.getWest()
|
|
},
|
|
function(pois) {
|
|
if (poiApiLayer) {
|
|
mymap.removeLayer(poiApiLayer);
|
|
}
|
|
|
|
poiApiLayer = L.layerGroup();
|
|
|
|
const pathParts = window.location.pathname.split('/');
|
|
const poiIndex = pathParts.indexOf('poi');
|
|
const currentPermalink = (poiIndex !== -1 && pathParts[poiIndex + 1])
|
|
? decodeURIComponent(pathParts[poiIndex + 1])
|
|
: null;
|
|
|
|
pois.forEach(function(poi) {
|
|
if (currentPermalink && poi.permalink === currentPermalink) {
|
|
return; // ne pas afficher le POI courant
|
|
}
|
|
|
|
var markerIcon = getMarkerIconFor(poi.type, mymap.getZoom());
|
|
|
|
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;
|
|
});
|
|
|
|
poiApiLayer.addLayer(marker);
|
|
});
|
|
|
|
poiApiLayer.addTo(mymap);
|
|
}
|
|
);
|
|
}
|
|
|
|
// ---------------------------------------------------------
|
|
// Contrôles
|
|
// ---------------------------------------------------------
|
|
L.control.scale({
|
|
position: "bottomleft",
|
|
imperial: false
|
|
}).addTo(mymap);
|
|
|
|
L.control.fullscreen({
|
|
position: "bottomleft"
|
|
}).addTo(mymap);
|
|
|
|
L.control.zoom({
|
|
zoomOutText: "<i class=\"fa fa-minus\" aria-hidden=\"true\"></i>",
|
|
zoomInText: "<i class=\"fa fa-plus\" aria-hidden=\"true\"></i>",
|
|
position: "bottomleft"
|
|
}).addTo(mymap);
|
|
|
|
L.control.layers(baseLayers, null, {
|
|
position: "bottomright"
|
|
}).addTo(mymap);
|
|
|
|
mymap.removeControl(mymap.attributionControl);
|
|
|
|
mymap.on('baselayerchange', function(e) {
|
|
$("#map-credits").html(e.layer.getAttribution());
|
|
});
|
|
|
|
// Position initiale : soit celle du POI, soit le centre par défaut
|
|
var startLat = (typeof poi_lat !== "undefined" && poi_lat) ? poi_lat : 47;
|
|
var startLon = (typeof poi_lon !== "undefined" && poi_lon) ? poi_lon : 3;
|
|
|
|
// Icône centrale : même règle que les POIs
|
|
var poiType = (typeof poi_type !== "undefined" && poi_type) ? poi_type : "default";
|
|
if (typeof poi_type !== "undefined" && poi_type) {
|
|
var poiicon = getMarkerIconFor(poiType, mymap.getZoom());
|
|
}
|
|
|
|
if (poiicon) {
|
|
poi_layer = L.marker([startLat, startLon], { draggable: isEdit, icon: poiicon }).addTo(mymap);
|
|
} else {
|
|
poi_layer = L.marker([startLat, startLon], { draggable: isEdit }).addTo(mymap);
|
|
}
|
|
|
|
// Si le zoom change, on recalcule la taille comme pour les POIs
|
|
mymap.on('zoomend', function() {
|
|
if (poi_layer) {
|
|
poi_layer.setIcon(getMarkerIconFor(poiType, mymap.getZoom()));
|
|
}
|
|
});
|
|
|
|
if (isEdit) {
|
|
poi_layer.bindTooltip("Glissez moi au bon endroit.", { permanent: true, direction: 'auto' }).openTooltip();
|
|
}
|
|
|
|
// Centrage sur la cabane actuelle
|
|
if (typeof poi_lat !== "undefined" && typeof poi_lon !== "undefined") {
|
|
mymap.setView([poi_lat, poi_lon], 14);
|
|
}
|
|
|
|
// ---------------------------------------------------------
|
|
// Interactions uniquement en mode édition
|
|
// ---------------------------------------------------------
|
|
if (isEdit) {
|
|
mymap.on('click', function(e){
|
|
poi_layer.setLatLng(e.latlng);
|
|
});
|
|
|
|
poi_layer.on('move', function(e){
|
|
poi_layer.unbindTooltip();
|
|
$("#lat").val(+e.latlng.lat.toFixed(6));
|
|
$("#lon").val(+e.latlng.lng.toFixed(6));
|
|
$("#elevation_icon").show();
|
|
});
|
|
|
|
$("#lat,#lon").change(function() {
|
|
if(isNaN($("#lat").val()) || isNaN($("#lon").val()) || $("#lat").val().length==0 || $("#lon").val()==null)
|
|
$("#elevation_icon").hide();
|
|
else {
|
|
$("#elevation_icon").show();
|
|
poi_layer.setLatLng([$("#lat").val(),$("#lon").val()]);
|
|
}
|
|
});
|
|
|
|
$("#type_selector label").click(function(e) {
|
|
poi_layer.unbindTooltip();
|
|
poiType = e.currentTarget.getAttribute("for");
|
|
poi_layer.setIcon(getMarkerIconFor(poiType, mymap.getZoom()));
|
|
});
|
|
|
|
$("#elevation_icon").click(function(e) {
|
|
$(this).find($(".fas")).removeClass('fa-search-location').addClass('fa-spinner').addClass('fa-spin');
|
|
$.get(root+"poi/elevation_proxy", {location:$("#lat").val()+","+$("#lon").val()}, function(result){
|
|
$("#ele").val(result.results[0].elevation);
|
|
$("#elevation_icon").find($(".fas")).removeClass('fa-spinner').removeClass('fa-spin').addClass('fa-search-location');
|
|
});
|
|
});
|
|
}
|
|
|
|
// ---------------------------------------------------------
|
|
// Rechargement du calque depuis poi/api_bbox
|
|
// ---------------------------------------------------------
|
|
mymap.on("moveend", function() {
|
|
if (mymap.getZoom() >= 10) {
|
|
refreshPoiApiLayer();
|
|
}
|
|
});
|
|
|
|
refreshPoiApiLayer();
|
|
}); |