Improve/display density results

envergo/demos/views.py

@@ -89,7 +89,6 @@ class HedgeDensity(LatLngDemoMixin, FormView):
     def get_result_data(self, lng, lat):
         """Return context with data to display map"""
         lng_lat = Point(float(lng), float(lat), srid=EPSG_WGS84)
-        density_200 = compute_hedge_density_around_point(lng_lat, 200)
         density_400 = compute_hedge_density_around_point(lng_lat, 400)
         density_5000 = compute_hedge_density_around_point(lng_lat, 5000)
 
@@ -120,17 +119,6 @@ def get_result_data(self, lng, lat):
                 "opacity": 1.0,
             }
         )
-        polygons.append(
-            {
-                "polygon": to_geojson(
-                    density_200["artifacts"]["truncated_circle"]
-                    or density_200["artifacts"]["circle"]
-                ),
-                "color": "#f89540",
-                "legend": "200m",
-                "opacity": 1.0,
-            }
-        )
         polygons.append(
             {
                 "polygon": to_geojson(
@@ -155,10 +143,6 @@ def get_result_data(self, lng, lat):
         )
         context = {
             "result_available": True,
-            "length_200": density_200["artifacts"]["length"],
-            "area_200_ha": density_200["artifacts"]["area_ha"],
-            "truncated_circle_200": density_200["artifacts"]["truncated_circle"],
-            "density_200": density_200["density"],
             "length_400": density_400["artifacts"]["length"],
             "area_400_ha": density_400["artifacts"]["area_ha"],
             "truncated_circle_400": density_400["artifacts"]["truncated_circle"],

envergo/static/js/demos/hedge_density_map.js

@@ -13,14 +13,17 @@
       this.drawEnvelope();
     }
     this.drawPolygons();
-    this.addLegend();
     this.addScaleControl();
+    this.addLegend();
+    this.addZoomControl();
 
     if (this.options.displayMarker) {
       this.marker.addTo(this.map);
     }
 
-    this.registerEvents();
+    if(this.options.interactive){
+      this.registerEvents();
+    }
 
     this.map.fitBounds(this.geoJSON.getBounds());
   };
@@ -42,23 +45,44 @@
   Map.prototype.initializeMap = function () {
     const map = L.map('map', {
       maxZoom: 21,
+      zoomControl: false,
     }).setView(this.options.centerMap, this.options.defaultZoom);
     map.doubleClickZoom.disable();
 
-    L.tileLayer("https://data.geopf.fr/wmts?" +
-      "&REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0" +
-      "&STYLE=normal" +
-      "&TILEMATRIXSET=PM" +
-      "&FORMAT=image/jpeg" +
-      "&LAYER=ORTHOIMAGERY.ORTHOPHOTOS" +
-      "&TILEMATRIX={z}" +
-      "&TILEROW={y}" +
-      "&TILECOL={x}", {
-      maxZoom: 22,
-      maxNativeZoom: 19,
-      tileSize: 256,
-      attribution: '&copy; <a href="https://geoservices.ign.fr/bdhaie">BD Haie IGN</a>'
-    }).addTo(map);
+    const ignWmtsLayer = (layer, format) => L.tileLayer(
+      "https://data.geopf.fr/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0" +
+      "&STYLE=normal&TILEMATRIXSET=PM" +
+      `&FORMAT=${format}&LAYER=${layer}` +
+      "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}", {
+        maxZoom: 22,
+        maxNativeZoom: 19,
+        tileSize: 256,
+        attribution: '&copy; <a href="https://geoservices.ign.fr/bdhaie">BD Haie IGN</a>'
+      });
+
+    const planLayer = ignWmtsLayer("GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2", "image/png");
+    const pciLayer = ignWmtsLayer("CADASTRALPARCELS.PARCELLAIRE_EXPRESS", "image/png");
+    const satelliteLayer = ignWmtsLayer("ORTHOIMAGERY.ORTHOPHOTOS", "image/jpeg").addTo(map);
+
+     const baseMaps = {
+      "Plan": planLayer,
+      "Satellite": satelliteLayer
+    };
+
+    const overlayMaps = {
+      "Cadastre": pciLayer
+    };
+
+    const layerControl = L.control.layers(baseMaps, overlayMaps);
+    layerControl.addTo(map);
+
+    // Zoom on the selected address
+    window.addEventListener('Envergo:citycode_selected', function (event) {
+      const coordinates = event.detail.coordinates;
+      const latLng = [coordinates[1], coordinates[0]];
+      let zoomLevel = 16;
+      map.setView(latLng, zoomLevel);
+    });
 
     return map;
   };
@@ -164,6 +188,12 @@
     legend.addTo(this.map);
   };
 
+  Map.prototype.addZoomControl = function () {
+      L.control.zoom({
+        position: 'bottomleft'
+      }).addTo(this.map);
+  };
+
   Map.prototype.addScaleControl = function () {
     L.control.scale({ imperial: false }).addTo(this.map);
   };

envergo/static/js/libs/moulinette_map.js

@@ -48,50 +48,20 @@
    * Create and initialize the leaflet map and add default layers.
    */
   MoulinetteMap.prototype.initializeMap = function () {
-    const planLayer = L.tileLayer("https://data.geopf.fr/wmts?" +
-      "&REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0" +
-      "&STYLE=normal" +
-      "&TILEMATRIXSET=PM" +
-      "&FORMAT=image/png" +
-      "&LAYER=GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2" +
-      "&TILEMATRIX={z}" +
-      "&TILEROW={y}" +
-      "&TILECOL={x}", {
-      maxZoom: 22,
-      maxNativeZoom: 19,
-      tileSize: 256,
-      attribution: '&copy; <a href="https://www.ign.fr/">IGN</a>'
-    });
-
-    const satelliteLayer = L.tileLayer("https://data.geopf.fr/wmts?" +
-      "&REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0" +
-      "&STYLE=normal" +
-      "&TILEMATRIXSET=PM" +
-      "&FORMAT=image/jpeg" +
-      "&LAYER=ORTHOIMAGERY.ORTHOPHOTOS" +
-      "&TILEMATRIX={z}" +
-      "&TILEROW={y}" +
-      "&TILECOL={x}", {
-      maxZoom: 22,
-      maxNativeZoom: 19,
-      tileSize: 256,
-      attribution: '&copy; <a href="https://www.ign.fr/">IGN</a>'
-    });
-
-    const pciLayer = L.tileLayer("https://data.geopf.fr/wmts?" +
-      "&REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0" +
-      "&STYLE=normal" +
-      "&TILEMATRIXSET=PM" +
-      "&FORMAT=image/png" +
-      "&LAYER=CADASTRALPARCELS.PARCELLAIRE_EXPRESS" +
-      "&TILEMATRIX={z}" +
-      "&TILEROW={y}" +
-      "&TILECOL={x}", {
-      maxZoom: 22,
-      maxNativeZoom: 19,
-      tileSize: 256,
-      attribution: '&copy; <a href="https://www.ign.fr/">IGN</a>'
-    });
+    const ignWmtsLayer = (layer, format) => L.tileLayer(
+      "https://data.geopf.fr/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0" +
+      "&STYLE=normal&TILEMATRIXSET=PM" +
+      `&FORMAT=${format}&LAYER=${layer}` +
+      "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}", {
+        maxZoom: 22,
+        maxNativeZoom: 19,
+        tileSize: 256,
+        attribution: '&copy; <a href="https://www.ign.fr/">IGN</a>'
+      });
+
+    const planLayer = ignWmtsLayer("GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2", "image/png");
+    const satelliteLayer = ignWmtsLayer("ORTHOIMAGERY.ORTHOPHOTOS", "image/jpeg");
+    const pciLayer = ignWmtsLayer("CADASTRALPARCELS.PARCELLAIRE_EXPRESS", "image/png");
 
     var layers = [planLayer];
     if (this.options.showPciLayer) {

envergo/static/js/libs/share_url_modal.js

@@ -6,15 +6,16 @@
  *
  * Note that UrlMapping can be undefined if the file was not loaded
  */
-(function (exports, _paq, UrlMapping) {
+(function (exports, UrlMapping) {
   'use strict';
 
-  const ShareModal = function (dialogElt, shortenUrl) {
+  const ShareModal = function (dialogElt, shortenUrl, analyticEventName) {
     this.dialogElt = dialogElt;
     this.urlInput = dialogElt.querySelector("input[type=url]");
     this.shareBtn = dialogElt.querySelector("button[type=submit]");
     this.firstDisclosed = true;
     this.shortenUrl = shortenUrl;
+    this.analyticEventName = analyticEventName;
   };
   exports.ShareModal = ShareModal;
 
@@ -25,7 +26,7 @@
   };
 
   ShareModal.prototype.onModalDisclose = function () {
-    _paq.push(['trackEvent', 'ShareDialog', 'Disclose']);
+    _paq.push(['trackEvent', 'ShareDialog', 'Disclose', this.analyticEventName]);
 
     // Optionaly replacing current url with a short url
     if (this.firstDisclosed && this.shortenUrl && UrlMapping) {
@@ -41,7 +42,7 @@
   };
 
   ShareModal.prototype.onModalConceal = function () {
-    _paq.push(['trackEvent', 'ShareDialog', 'Conceal']);
+    _paq.push(['trackEvent', 'ShareDialog', 'Conceal', this.analyticEventName]);
   };
 
   ShareModal.prototype.copyUrlToClipboard = function () {
@@ -53,14 +54,15 @@
     this.shareBtn.classList.add('fr-btn--icon-left');
     this.shareBtn.classList.add('fr-icon-thumb-up-fill');
 
-    _paq.push(['trackEvent', 'ShareDialog', 'UrlCopy']);
+    _paq.push(['trackEvent', 'ShareDialog', 'UrlCopy', this.analyticEventName]);
   };
 
-})(this, window._paq, window.UrlMapping);
+})(this, window.UrlMapping);
 
 window.addEventListener('load', function () {
   const dialogElt = document.getElementById(window.SHARE_MODAL_DIALOG_ID);
   const shortenUrl = dialogElt.getAttribute('data-shorten-url') == "true";
-  var shareModal = new ShareModal(dialogElt, shortenUrl);
+  const analyticEventName = dialogElt.getAttribute('data-event-name');
+  const shareModal = new ShareModal(dialogElt, shortenUrl, analyticEventName);
   shareModal.init();
 });

envergo/static/sass/project_haie.scss

@@ -1128,9 +1128,9 @@ button.hide-expanded[aria-expanded="true"] {
   vertical-align: top;
 }
 
-/* Density buffer */
-.demo-hedge-density-buffer {
-  thead th {
-    text-align: left;
+#hedge-density-demo,
+#hedge-density-buffer-demo {
+  .fr-search-bar .autocomplete__wrapper {
+    margin-top: 0;
   }
 }

envergo/templates/_share_url_modal.html

@@ -2,6 +2,7 @@
         role="dialog"
         id="share-modal"
         data-shorten-url="{{ shorten_url|yesno:"true,false,false" }}"
+        data-event-name="{{ analytics_event_name }}"
         class="fr-modal">
   <div class="fr-container fr-container--fluid fr-container-md">
     <div class="fr-grid-row fr-grid-row--center">

envergo/templates/demos/_hedge_density_base.html

@@ -0,0 +1,90 @@
+{% extends 'base.html' %}
+
+{% load static l10n evaluations moulinette %}
+
+{% block title %}Démonstrateur densité de haie{% endblock %}
+
+{% block main-classes %}demos{% endblock %}
+
+{% block content %}
+  <article id="{% block article_id %}{% endblock %}">
+    <h1>
+      {% block article_heading %}{% endblock %}
+    </h1>
+    <div class="fr-grid-row fr-grid-row--gutters">
+      <div class="fr-col-7">
+        {% block map_column %}
+          <div class="ratio-4x3 ratio-sm-4x5 fr-my-3w">
+            <div class="ratio-content">
+              <div id="map"></div>
+            </div>
+          </div>
+        {% endblock %}
+      </div>
+      <div class="fr-col-5">
+
+        {% if result_available %}
+          <div class="fr-table fr-mb-3w">
+            <div class="fr-table__wrapper">
+              <div class="fr-table__container">
+                <div class="fr-table__content">
+                  {% block table %}{% endblock %}
+                </div>
+              </div>
+            </div>
+          </div>
+        {% else %}
+          {% block no_result %}{% endblock %}
+        {% endif %}
+
+        {% block feedback %}{% endblock %}
+
+        <div class="share-btn hide-print fr-my-8w">{% include '_share_url_btn.html' %}</div>
+      </div>
+    </div>
+  </article>
+{% endblock %}
+
+{% block extra_body %}{% endblock %}
+
+{% block extra_css %}
+  <link href="{% static 'leaflet/dist/leaflet.css' %}" rel="stylesheet">
+  <link href="{% static 'leaflet/draw/leaflet.draw.css' %}" rel="stylesheet">
+{% endblock %}
+
+{% block extra_js %}
+  <script defer src="{% static 'leaflet/leaflet.js' %}"></script>
+  <script defer src="{% static 'leaflet/draw/leaflet.draw.js' %}"></script>
+  <script defer src="{% static 'js/libs/leaflet-icon-fix.js' %}"></script>
+  <script defer src="{% static 'js/demos/hedge_density_map.js' %}"></script>
+  <script defer src="{% static 'js/libs/urlmappings.js' %}"></script>
+  <script defer src="{% static 'js/libs/share_url_modal.js' %}"></script>
+  <script>
+    var DISPLAY_MARKER = {{ display_marker|yesno:'true,false' }};
+    var CENTER_MAP = { lng: {{ center_map.0|unlocalize }}, lat: {{ center_map.1|unlocalize }} };
+    var DEFAULT_ZOOM = {{ default_zoom }};
+    var LAT_FIELD_ID = "id_lat";
+    var LNG_FIELD_ID = "id_lng";
+    var POLYGONS = {{ polygons|default:"[]"|safe }};
+    var ENVELOPE = {{ envelope|default:"{}"|safe }};
+    var DEBUG = {{ debug|yesno:'true,false' }};
+    var LEGEND = [];
+
+    window.addEventListener("load", function() {
+      const options = {
+        displayMarker: DISPLAY_MARKER,
+        centerMap: CENTER_MAP,
+        defaultZoom: DEFAULT_ZOOM,
+        latFieldId: LAT_FIELD_ID,
+        lngFieldId: LNG_FIELD_ID,
+        polygons: POLYGONS,
+        envelope: ENVELOPE,
+        legend: LEGEND,
+        debug: DEBUG,
+        interactive: typeof IS_MAP_INTERACTIVE === "undefined" ? false : IS_MAP_INTERACTIVE,
+      };
+
+      let map = new DemoMap(options);
+    });
+  </script>
+{% endblock %}

envergo/templates/demos/catchment_area.html

@@ -126,7 +126,7 @@ <h2 class="fr-h4">Pour améliorer ce démonstrateur</h2>
 {% endblock %}
 
 {% block extra_body %}
-  {% include '_share_url_modal.html' with shorten_url=False share_url=share_btn_url %}
+  {% include '_share_url_modal.html' with shorten_url=False share_url=share_btn_url analytics_event_name="DemoBV" %}
 {% endblock %}
 
 {% block extra_css %}