leo/kabano
1
0 Fork 0
Code Issues Pull Requests Releases Activity

Ajout des calques de points sur les pages poi

Browse Source
This commit is contained in:
leosw committed 2026-10-20 19:19:43 +02:00
1 parent 6db6090f66
commit 32e8804a5b
5 files changed
+163 -29
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/views/d.map.html
+3 -9
View File
@@ -32,22 +32,16 @@
var root = "<?=$config['rel_root_folder']?>";
// POI icons
window.poi_icons = {
<?php foreach($poi_types as $type) { ?>
"<?=$type[3]?>": "<?=$config['views_url']?>img/<?=$type[3]?>.svg",
<?php } ?>
"default": "<?=$config['views_url']?>img/default.svg"
};
window.poi_style_map = {
<?php foreach($poi_types as $k => $t) {
$color = isset($t[2]) ? $t[2] : '#ef2929';
// Read size/shape from structure if provided, else fallback to sensible defaults
$size = isset($t[6]) ? (int)$t[6] : 16;
$shape = isset($t[7]) ? $t[7] : 'square';
$icon = isset($t[3]) ? $config['views_url']."img/".$t[3].".svg" : $config['views_url']."img/default.svg";
?>
"<?=$k?>": { color: "<?=$color?>", size: <?=$size?>, shape: "<?=$shape?>" },
"<?=$k?>": { color: "<?=$color?>", size: <?=$size?>, shape: "<?=$shape?>", icon: "<?=$icon?>" },
<?php } ?>
"default": { color: "#ef2929", size: 16, shape: "square", icon: "<?=$config['views_url']?>img/default.svg" }
};
</script>
public/views/d.poi.edit.html
+13
View File
@@ -240,6 +240,19 @@ $( "#name" ).change(function() {
var poi_type = "<?=$poi->poi_type?>";
var is_new = <?= isset($new) && $new == 1 ? "true" : "false" ?>;
var root = "<?=$config['rel_root_folder']?>";
// POI icons
window.poi_style_map = {
<?php foreach($poi_types as $k => $t) {
$color = isset($t[2]) ? $t[2] : '#ef2929';
$size = isset($t[6]) ? (int)$t[6] : 16;
$shape = isset($t[7]) ? $t[7] : 'square';
$icon = isset($t[3]) ? $config['views_url']."img/".$t[3].".svg" : $config['views_url']."img/default.svg";
?>
"<?=$k?>": { color: "<?=$color?>", size: <?=$size?>, shape: "<?=$shape?>", icon: "<?=$icon?>" },
<?php } ?>
"default": { color: "#ef2929", size: 16, shape: "square", icon: "<?=$config['views_url']?>img/default.svg" }
};
</script>
public/views/d.poi.view.html
+13
View File
@@ -301,6 +301,19 @@
var poi_type = "<?=$poi->poi_type?>";
var poi_mode = "view";
var root = "<?=$config['rel_root_folder']?>";
// POI icons
window.poi_style_map = {
<?php foreach($poi_types as $k => $t) {
$color = isset($t[2]) ? $t[2] : '#ef2929';
$size = isset($t[6]) ? (int)$t[6] : 16;
$shape = isset($t[7]) ? $t[7] : 'square';
$icon = isset($t[3]) ? $config['views_url']."img/".$t[3].".svg" : $config['views_url']."img/default.svg";
?>
"<?=$k?>": { color: "<?=$color?>", size: <?=$size?>, shape: "<?=$shape?>", icon: "<?=$icon?>" },
<?php } ?>
"default": { color: "#ef2929", size: 16, shape: "square", icon: "<?=$config['views_url']?>img/default.svg" }
};
</script>
<?php if ($canViewHistory) { ?>
public/views/js/d.map.js
+11 -4
View File
@@ -104,7 +104,7 @@ $(document).ready(function() {
return L.icon({
iconUrl: iconUrl,
iconSize: [size, size],
iconAnchor: [Math.floor(size / 2), size],
iconAnchor: [Math.floor(size / 2), Math.floor(size / 2)],
popupAnchor: [0, -size]
});
}
@@ -251,12 +251,19 @@ $(document).ready(function() {
// helper local : construit un L.Icon en fonction du type et du zoom
function getMarkerIconFor(type, zoom) {
var size = (zoom > 11) ? 32 : 24;
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_icons[type],
iconUrl: window.poi_style_map[type].icon || window.poi_style_map["default"].icon,
iconSize: [size, size],
iconAnchor: [Math.floor(size / 2), size],
iconAnchor: [Math.floor(size / 2), Math.floor(size / 2)],
popupAnchor: [0, -size]
});
}
public/views/js/d.poi_map.js
+123 -16
View File
@@ -1,40 +1,131 @@
// 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");
// Différentes couches pour la carte.
// ---------------------------------------------------------
// 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">Contributeurs OpenStreetMap</a>',
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}&apikey=ign_scan_ws',
'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>'
}
);
// Couches de base.
var baseLayers = {
"OpenStreetMap": topo_maptiler,
"IGN France": ign
};
// ---------------------------------------------------------
// Carte
// ---------------------------------------------------------
mymap = L.map('mapid', {
zoomControl: false,
layers: [topo_maptiler]
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
@@ -75,17 +166,23 @@ $(document).ready(function() {
}
if (poiicon) {
poi_layer = L.marker([startLat, startLon], {draggable: isEdit, icon: poiicon}).addTo(mymap);
poi_layer = L.marker([startLat, startLon], { draggable: isEdit, icon: poiicon }).addTo(mymap);
} else {
poi_layer = L.marker([startLat, startLon], {draggable: isEdit}).addTo(mymap);
poi_layer = L.marker([startLat, startLon], { draggable: isEdit }).addTo(mymap);
}
if (isEdit) {
// Mise à jour des coordonnées à chaque déplacement.
poi_layer.bindTooltip("Glissez moi au bon endroit.", {permanent: true, direction: 'auto'}).openTooltip();
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);
@@ -98,8 +195,7 @@ $(document).ready(function() {
$("#elevation_icon").show();
});
// Si l'utilisateur modifie les champs lat/lon manuellement.
$("#lat,#lon").change(function() { // If the user changes the lat/lon input values manualy
$("#lat,#lon").change(function() {
if(isNaN($("#lat").val()) || isNaN($("#lon").val()) || $("#lat").val().length==0 || $("#lon").val()==null)
$("#elevation_icon").hide();
else {
@@ -119,7 +215,6 @@ $(document).ready(function() {
poi_layer.setIcon(editPoiIcon);
});
// Chargement de l'altitude via le proxy.
$("#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){
@@ -127,10 +222,22 @@ $(document).ready(function() {
$("#elevation_icon").find($(".fas")).removeClass('fa-spinner').removeClass('fa-spin').addClass('fa-search-location');
});
});
} else {
// Mode affichage : centrer sur le POI si coordonnées présentes
if (typeof poi_lat !== "undefined" && typeof poi_lon !== "undefined") {
mymap.setView([poi_lat, poi_lon], 14);
}
// ---------------------------------------------------------
// Rechargement du calque depuis poi/api_bbox
// ---------------------------------------------------------
mymap.on("zoomend", function() {
if (mymap.getZoom() >= 10) {
refreshPoiApiLayer();
}
});
mymap.on("moveend", function() {
if (mymap.getZoom() >= 10) {
refreshPoiApiLayer();
}
});
refreshPoiApiLayer();
});