GeotrekCE · kayarhabby · Jul 15, 2025 · Jul 15, 2025 · Jul 16, 2025 · Jul 22, 2025
diff --git a/django-mapentity b/django-mapentity
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -16,7 +16,7 @@ x-images:
 
 services:
   postgres:
-    image: ${POSTGRES_IMAGE:-pgrouting/pgrouting:12-3.0-3.0.0}
+    image: ${POSTGRES_IMAGE:-pgrouting/pgrouting:17-3.5-3.6}
     env_file:
       - .env
     ports:

diff --git a/docker/Dockerfile b/docker/Dockerfile
@@ -92,6 +92,7 @@ ENV UV_PYTHON=/opt/venv/bin/python
 ENV UV_LINK_MODE=copy
 ENV UV_CACHE_DIR=/opt/geotrek-admin/var/cache/
 
+COPY --chown=geotrek:geotrek django-mapentity/ django-mapentity/
 RUN --mount=type=bind,src=./requirements.txt,dst=/requirements.txt \
     --mount=type=cache,target=/opt/geotrek-admin/var/cache/,sharing=locked,uid=1001,gid=1001 \
     uv pip install -r /requirements.txt

diff --git a/geotrek/altimetry/templates/altimetry/altimetric_profile_fragment.html b/geotrek/altimetry/templates/altimetry/altimetric_profile_fragment.html
@@ -10,7 +10,7 @@
         });
     });
 
-    $(window).on('detailmap:ready', function () {
+    $(window).on('entity:map:detail', function (e) {
         $('#altitudegraph').append('<img src="{% url profile_url LANGUAGE_CODE object.pk %}">');
     });
 </script>
diff --git a/geotrek/common/static/common/style.css → geotrek/common/static/common/css/style.css b/geotrek/common/static/common/style.css → geotrek/common/static/common/css/style.css
diff --git a/geotrek/common/templates/common/attachment_accessibility_list.html b/geotrek/common/templates/common/attachment_accessibility_list.html
@@ -91,4 +91,5 @@ <h3>{% trans "Photos accessibility" %}</h3>
 data-confirm-delete-msg="{% trans "Are you sure to delete this file {file} ?" %}"
 data-confirm-delete-close-button="{% trans "Cancel" %}"
 data-confirm-delete-confirm-button="{% trans "Delete" %}"></div>
-<script type="text/javascript" src="{% static "trekking/attachment_accessibility.js" %}"></script>
+
+<script type="text/javascript" src="{% static "trekking/js/attachment_accessibility.js" %}"></script>
diff --git a/geotrek/common/templates/common/check_extents.html b/geotrek/common/templates/common/check_extents.html
@@ -1,9 +1,9 @@
 {% load leaflet_tags i18n static %}
 <html>
 <head>
-    {% leaflet_js %}
-    <script src="{% static "leaflet/proj4js.js" %}" type="text/javascript"></script>
-    <script src="{% static "proj4js/" %}{{ SRID }}.js" type="text/javascript"></script>
+{#    {% leaflet_js %}#}
+{#    <script src="{% static "leaflet/proj4js.js" %}" type="text/javascript"></script>#}
+{#    <script src="{% static "proj4js/" %}{{ SRID }}.js" type="text/javascript"></script>#}
 
     {% leaflet_css %}
     <style>
@@ -56,35 +56,37 @@
             </tr>
         </table>
     </div>
-    <script type="text/javascript">
-        (function () {
-            var map = L.map('map');
-            map.fitBounds({{ viewport }});
 
-            var mouseMarker = L.marker();
+{#    <script type="text/javascript">#}
+{#        (function () {#}
+{#            var map = L.map('map');#}
+{#            map.fitBounds({{ viewport }});#}
+{##}
+{#            var mouseMarker = L.marker();#}
+{##}
+{#            L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);#}
+{##}
+{#            L.rectangle({{ path_extent }}, {fillOpacity: 0, color: '#009F5F'}).addTo(map);#}
+{#            L.rectangle({{ tiles_extent }}, {fillOpacity: 0, color: '#005EFF'}).addTo(map);#}
+{#            L.rectangle({{ viewport }}, {fillOpacity: 0, color: '#FF6E00'}).addTo(map);#}
+{#            {% if dem_extent %}#}
+{#                L.rectangle({{ dem_extent }}, {fillOpacity: 0, color: '#CF00FF'}).addTo(map);#}
+{#            {% endif %}#}
+{##}
+{#            map.on('click', function (e) {#}
+{#                mouseMarker.setLatLng(L.latLng(e.latlng.lat, e.latlng.lng))#}
+{#                           .addTo(map);#}
+{#                var source = new Proj4js.Proj('EPSG:{{ API_SRID }}'),#}
+{#                    dest = new Proj4js.Proj('EPSG:{{ SRID }}'),#}
+{#                    pos = Proj4js.transform(source,#}
+{#                                            dest,#}
+{#                                            {x: e.latlng.lng, y: e.latlng.lat}),#}
+{#                    td = document.getElementById('mouseposition');#}
+{#                td.innerHTML = 'POINT(' + pos.x + ', ' + pos.y + ')';#}
+{#            });#}
+{##}
+{#        })();#}
+{#    </script>#}
 
-            L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
-
-            L.rectangle({{ path_extent }}, {fillOpacity: 0, color: '#009F5F'}).addTo(map);
-            L.rectangle({{ tiles_extent }}, {fillOpacity: 0, color: '#005EFF'}).addTo(map);
-            L.rectangle({{ viewport }}, {fillOpacity: 0, color: '#FF6E00'}).addTo(map);
-            {% if dem_extent %}
-                L.rectangle({{ dem_extent }}, {fillOpacity: 0, color: '#CF00FF'}).addTo(map);
-            {% endif %}
-
-            map.on('click', function (e) {
-                mouseMarker.setLatLng(L.latLng(e.latlng.lat, e.latlng.lng))
-                           .addTo(map);
-                var source = new Proj4js.Proj('EPSG:{{ API_SRID }}'),
-                    dest = new Proj4js.Proj('EPSG:{{ SRID }}'),
-                    pos = Proj4js.transform(source,
-                                            dest,
-                                            {x: e.latlng.lng, y: e.latlng.lat}),
-                    td = document.getElementById('mouseposition');
-                td.innerHTML = 'POINT(' + pos.x + ', ' + pos.y + ')';
-            });
-
-        })();
-    </script>
 </body>
 </html>
diff --git a/geotrek/common/templates/common/common_extracss_fragment.html b/geotrek/common/templates/common/common_extracss_fragment.html
@@ -1,3 +1,3 @@
 {% load static %}
 {# loaded by MapEntity, used to inject custom CSS at project level #}
-<link rel="stylesheet" href="{% static "common/style.css" %}" />
+<link rel="stylesheet" href="{% static "common/css/style.css" %}" />
diff --git a/geotrek/common/templates/common/hdviewpoint_annotation_form.html b/geotrek/common/templates/common/hdviewpoint_annotation_form.html
@@ -35,9 +35,9 @@
     {% url 'common:hdviewpoint-drf-detail' object.pk as base_tile_url %}
     {{object.annotations|json_script:"geojson_annotations"}}
     <div id="hdviewpoint-map" class='large'><span class="loader-wrapper"><span class="loader"></span></span></div>
-    <script type="text/javascript" src="{% static 'common/js/annotations.js' %}"></script>
-    <script type="text/javascript" src="{% static 'common/js/hdviewpoint_viewer.js' %}"></script>
-    <script type="text/javascript" src="{% static 'common/js/geojs-1.10.17-min.js' %}"></script>
+{#    <script type="text/javascript" src="{% static 'common/js/annotations.js' %}"></script>#}
+{#    <script type="text/javascript" src="{% static 'common/js/hdviewpoint_viewer.js' %}"></script>#}
+{#    <script type="text/javascript" src="{% static 'common/js/geojs-1.10.17-min.js' %}"></script>#}
     <script>
         initializeViewer("{{base_tile_url}}", edit_annotations=true);
     </script>

diff --git a/geotrek/common/templates/common/hdviewpoint_detail.html b/geotrek/common/templates/common/hdviewpoint_detail.html
@@ -89,12 +89,14 @@ <h1 class="details-title">{{ object }}</h1>
             {% url 'common:hdviewpoint-drf-detail' object.pk as base_tile_url %}
             {{object.annotations|json_script:"geojson_annotations"}}
             <div id="hdviewpoint-map"><span class="loader-wrapper"><span class="loader"></span></span></div>
-            <script type="text/javascript" src="{% static 'common/js/geojs-1.10.17-min.js' %}"></script>
+
+              {#            <script type="text/javascript" src="{% static 'common/js/geojs-1.10.17-min.js' %}"></script>#}
             <script>
-              $(window).on('detailmap:ready', function (e, data) {
+              $(window).on('entity:map:detail', function (e) {
                 initializeViewer("{{base_tile_url}}");
               });
             </script>
+
           {% endblock detailspanel %}
         </div>
       {% if ACTION_HISTORY_ENABLED %}
@@ -154,6 +156,6 @@ <h1 class="details-title">{{ object }}</h1>
 {% endblock mainpanel %}
 {% block extrabody %}
   {{ block.super}}
-  <script type="text/javascript" src="{% static 'mapentity/mapentity.detail.js' %}"></script>
-  <script type="text/javascript" src="{% static 'common/js/hdviewpoint_viewer.js' %}"></script>
+{#  <script type="text/javascript" src="{% static 'mapentity/mapentity.detail.js' %}"></script>#}
+{#  <script type="text/javascript" src="{% static 'common/js/hdviewpoint_viewer.js' %}"></script>#}
 {% endblock %}
diff --git a/geotrek/core/static/core/style.css → geotrek/core/static/core/css/style.css b/geotrek/core/static/core/style.css → geotrek/core/static/core/css/style.css
@@ -1,25 +1,25 @@
 
 .cursor-topo-start {
-    cursor: url('images/marker-source-snap.png') 13 40, w-resize;
+    cursor: url('../images/marker-source-snap.png') 13 40, w-resize;
 }
 
 .cursor-topo-end {
-    cursor: url('images/marker-target-snap.png') 13 40, e-resize;
+    cursor: url('../images/marker-target-snap.png') 13 40, e-resize;
 }
 
 /* Point topology */
 .marker-point {
     padding-left: 25px;
     padding-top: 41px;
-    background-image: url('images/marker-add.png') ;
+    background-image: url('../images/marker-add.png') ;
     background-repeat: no-repeat;
     height: 0px !important;
     width: 0px !important;
 
 }
 
 .marker-point.marker-snapped {
-    background-image: url('images/marker-snap.png');
+    background-image: url('../images/marker-snap.png');
 }
 
 
@@ -30,7 +30,7 @@
     height: 0px !important;
     width: 0px !important;
 
-    background-image: url('images/marker-source.png');
+    background-image: url('../images/marker-source.png');
 }
 
 .marker-drag {
@@ -43,7 +43,7 @@
     margin-left: -9px !important;
     margin-top: -9px !important;
 
-    background-image: url('images/marker-drag.png');
+    background-image: url('../images/marker-drag.png');
 }
 
 .marker-target {
@@ -53,44 +53,44 @@
     height: 0px !important;
     width: 0px !important;
 
-    background-image: url('images/marker-target.png');
+    background-image: url('../images/marker-target.png');
 }
 
 .marker-source.marker-disabled {
-    background-image: url('images/marker-bound-disabled.png');
+    background-image: url('../images/marker-bound-disabled.png');
 }
 
 .marker-target.marker-disabled {
-    background-image: url('images/marker-bound-disabled.png');
+    background-image: url('../images/marker-bound-disabled.png');
 }
 
 .marker-drag.marker-disabled {
-    background-image: url('images/marker-drag-disabled.png');
+    background-image: url('../images/marker-drag-disabled.png');
 }
 
 .marker-drag.marker-highlighted {
-    background-image: url('images/marker-drag-highlighted.png'); 
+    background-image: url('../images/marker-drag-highlighted.png');
 }
 
 .marker-source.marker-snapped {
-    background-image: url('images/marker-source-snap.png');
+    background-image: url('../images/marker-source-snap.png');
 }
 
 .marker-target.marker-snapped {
-    background-image: url('images/marker-target-snap.png');
+    background-image: url('../images/marker-target-snap.png');
 }
 
-.marker-drag { background-image: url('images/marker-drag.png') }
+.marker-drag { background-image: url('../images/marker-drag.png') }
 .marker-drag.marker-snapped {
-    background-image: url('images/marker-drag-snap.png');
+    background-image: url('../images/marker-drag-snap.png');
 }
 
 .linetopology-control {
-    background-image: url(images/linetopology-control.png);
+    background-image: url(../images/linetopology-control.png);
 }
 
 .pointtopology-control {
-    background-image: url(images/pointtopology-control.png);
+    background-image: url(../images/pointtopology-control.png);
 }
 
 .details-panel td.paths li {

diff --git a/geotrek/core/static/core/js/maplibreTrail.js b/geotrek/core/static/core/js/maplibreTrail.js
@@ -0,0 +1,25 @@
+window.addEventListener("entity:map", () => {
+    const map = window.MapEntity.currentMap.map;
+    const modelname = 'trail';
+    const layername = `${modelname}_layer`;
+    const layerUrl = window.SETTINGS.urls[layername];
+
+    const nameHTML = tr('Trails');
+    const category = tr('Trail');
+    const primaryKey = generateUniqueId();
+    const style = window.SETTINGS.map.styles['path'] ?? window.SETTINGS.map.styles['autres'];
+
+    const objectsLayer = new MaplibreObjectsLayer(null, {
+            style: style,
+            modelname: modelname,
+            readonly: true,
+            nameHTML: nameHTML,
+            category: category,
+            primaryKey: primaryKey,
+            dataUrl: layerUrl,
+            isLazy: true
+    });
+
+    objectsLayer.initialize(map.getMap());
+    objectsLayer.registerLazyLayer(modelname,category,nameHTML, primaryKey, layerUrl);
+});
diff --git a/geotrek/core/static/core/trail.js b/geotrek/core/static/core/trail.js
diff --git a/geotrek/core/templates/core/core_extrabody_fragment.html b/geotrek/core/templates/core/core_extrabody_fragment.html
@@ -1,12 +1,12 @@
 {% load static i18n %}
 <script type="text/javascript">
-    MapEntity.i18n['Paths'] = "{% trans "Paths" %}";
-    MapEntity.i18n['Trail'] = "{% trans "Trail" %}";
-    MapEntity.i18n['Trails'] = "{% trans "Trails" %}";
+    {#MapEntity.i18n['Paths'] = "{% trans "Paths" %}";#}
+    {#MapEntity.i18n['Trail'] = "{% trans "Trail" %}";#}
+    {#MapEntity.i18n['Trails'] = "{% trans "Trails" %}";#}
 
     window.SETTINGS.urls['path_layer'] = "{% url "core:path-drf-list" format="geojson" %}";
     window.SETTINGS.urls['trail_layer'] = "{% url "core:trail-drf-list" format="geojson" %}";
     window.SETTINGS.urls['route_geometry'] = "{% url "core:path-drf-route-geometry" %}";
 </script>
-<script type="text/javascript" src="{% static "core/main.js" %}"></script>
-<script type="text/javascript" src="{% static "core/trail.js" %}"></script>
+{#<script type="text/javascript" src="{% static "core/main.js" %}"></script>#}
+<script type="text/javascript" src="{% static "core/js/maplibreTrail.js" %}"></script>