src/assets/img/logo.svg

-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="210mm"
-   height="297mm"
-   viewBox="0 0 744.09448819 1052.3622047"
-   id="svg2"
-   version="1.1"
-   inkscape:version="0.91 r13725"
-   sodipodi:docname="logo.svg">
-  <defs
-     id="defs4">
-    <filter
-       inkscape:collect="always"
-       style="color-interpolation-filters:sRGB"
-       id="filter4343"
-       x="-0.0516"
-       width="1.1032"
-       y="-0.0516"
-       height="1.1032">
-      <feGaussianBlur
-         inkscape:collect="always"
-         stdDeviation="11.51431"
-         id="feGaussianBlur4345" />
-    </filter>
-  </defs>
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="0.35"
-     inkscape:cx="375"
-     inkscape:cy="520"
-     inkscape:document-units="px"
-     inkscape:current-layer="layer1"
-     showgrid="false" />
-  <metadata
-     id="metadata7">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     inkscape:label="Calque 1"
-     inkscape:groupmode="layer"
-     id="layer1">
-    <rect
-       inkscape:export-ydpi="74.43"
-       inkscape:export-xdpi="74.43"
-       transform="matrix(1.0337351,-0.17155069,0.17155069,1.0337351,-49.111849,56.004698)"
-       y="259.4512"
-       x="83.736664"
-       height="465.6055"
-       width="465.6055"
-       id="rect4293"
-       style="opacity:0.46200005;fill:#000000;fill-opacity:1;stroke:none;stroke-width:49.23444748;stroke-linejoin:miter;stroke-miterlimit:22;stroke-dasharray:none;stroke-opacity:1;filter:url(#filter4343)" />
-    <rect
-       style="fill:#8adcec;fill-opacity:1;stroke:#000000;stroke-width:49.23444748;stroke-linejoin:miter;stroke-miterlimit:22;stroke-dasharray:none;stroke-opacity:1"
-       id="rect3336"
-       width="440.76556"
-       height="440.76556"
-       x="56.281677"
-       y="327.0433"
-       transform="matrix(0.98650797,-0.16371323,0.16371323,0.98650797,0,0)"
-       inkscape:export-xdpi="74.43"
-       inkscape:export-ydpi="74.43" />
-    <text
-       xml:space="preserve"
-       style="font-style:normal;font-weight:normal;font-size:226.91236877px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       x="196.70358"
-       y="579.59528"
-       id="text4138"
-       sodipodi:linespacing="125%"
-       inkscape:export-xdpi="74.43"
-       inkscape:export-ydpi="74.43"><tspan
-         sodipodi:role="line"
-         id="tspan4140"
-         x="196.70358"
-         y="579.59528"
-         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:226.91288757px;line-height:125%;font-family:Alegreya;-inkscape-font-specification:'Alegreya Bold';text-align:start;writing-mode:lr-tb;text-anchor:start">Lab</tspan></text>
-  </g>
-</svg>

src/assets/js/formset_handlers.js

-window.addEventListener('load', function () {
-
-  // ---------------------------------------------------------------------------
-  // Suppression d'un ligne de formset
-  // ---------------------------------------------------------------------------
-  let removables = document.getElementsByClassName('remove-row');
-  function RemoveIt() {
-
-    let getter = this.getAttribute('id').replace('-REM', '')
-    let hidden_input_delete = document.getElementById(''.concat('id_', getter, '-DELETE'));
-    let current_row = document.getElementById(getter + '-ROW');
-
-    hidden_input_delete.value = 'checked';
-    current_row.style.display = 'none';
-  };
-
-  for (let i = 0; i < removables.length; i++) {
-    removables[i].addEventListener('click', RemoveIt, false);
-  }
-
-  // ---------------------------------------------------------------------------
-  // Ajout d'un ligne de formset
-  // ---------------------------------------------------------------------------
-  let add_buttons = document.getElementsByClassName('add_button');
-
-  function AddRow() {
-    let prefix = this.getAttribute('data-related-fieldset');
-    let total_form = document.getElementById('id_' + prefix + '-TOTAL_FORMS')
-    let form_idx = total_form.value;
-
-    // Injection de l'indice de la ligne et ajout au formset
-    let empty_tbody = document.getElementById(prefix + '-EMPTY_TBODY').innerHTML.replace(/__prefix__/g, form_idx);
-    console.log(empty_tbody);
-    let tbody = document.getElementById(prefix + '-TBODY').insertAdjacentHTML('beforeend', empty_tbody);
-
-
-    // Ajout d'un event ciblant la nouvelle ancre de suppression
-    let remove_field = document.getElementById(prefix + '-' + form_idx + '-REM');
-    remove_field.addEventListener('click', RemoveIt, false);
-
-    total_form.setAttribute("value", parseInt(form_idx) + 1);
-    // total_form.value++
-  };
-
-  for (let i = 0; i < add_buttons.length; i++) {
-    add_buttons[i].addEventListener('click', AddRow, false);
-  }
-
-});

src/assets/js/map-util.js

-/* eslint-disable no-mixed-spaces-and-tabs */
-/* eslint-disable no-unused-vars */
-/* eslint-disable no-undef */
-import L from "leaflet"
-import "leaflet/dist/leaflet.css";
-import flip from '@turf/flip'
-import axios from '@/axios-client.js';
-import "leaflet.vectorgrid";
-import store from '@/store';
-
-import { FillSymbolizer, PointSymbolizer, LineSymbolizer } from "@/assets/js/vector_tile_fix.js";
-
-let map;
-let dictLayersToLeaflet = {};
-var layerMVT;
-let statusList = [
-  {
-    name: "Brouillon",
-    value: "draft",
-  },
-  {
-    name: "Publié",
-    value: "published",
-  },
-  {
-    name: "Archivé",
-    value: "archived",
-  },
-  {
-    name: "En attente de publication",
-    value: "pending",
-  },
-];
-L.TileLayer.BetterWMS = L.TileLayer.WMS.extend({
-
-  onAdd: function (map) {
-    // Triggered when the layer is added to a map.
-    //   Register a click listener, then do all the upstream WMS things
-    L.TileLayer.WMS.prototype.onAdd.call(this, map);
-    map.on('click', this.getFeatureInfo, this);
-  },
-
-  onRemove: function (map) {
-    // Triggered when the layer is removed from a map.
-    //   Unregister a click listener, then do all the upstream WMS things
-    L.TileLayer.WMS.prototype.onRemove.call(this, map);
-    map.off('click', this.getFeatureInfo, this);
-  },
-
-  getFeatureInfo: function (evt) {
-    if (this.wmsParams.basemapId != undefined) {
-      const queryableLayerSelected = document.getElementById(`queryable-layers-selector-${this.wmsParams.basemapId}`).getElementsByClassName('selected')[0].textContent;
-      if (queryableLayerSelected.trim() === this.wmsParams.title.trim()) {
-        // Make an AJAX request to the server and hope for the best
-        var params = this.getFeatureInfoUrl(evt.latlng);
-        var showResults = L.Util.bind(this.showGetFeatureInfo, this);
-
-        axios.get(
-          window.proxy_url,
-          {
-            params: params,
-            //dataType: "json",
-          }
-        ).then(response => {
-          let data = response.data;
-          var err = typeof data === 'object' ? null : data;
-          if (data.features || err) {
-            showResults(err, evt.latlng, data);
-          }
-        })
-          .catch(error => {
-            throw (error)
-            //xhr.status;
-            //xhr.responseText;
-            //console.log(status)
-          }
-          )
-
-      }
-    }
-  },
-
-  getFeatureInfoUrl: function (latlng) {
-    // Construct a GetFeatureInfo request URL given a point
-    var point = this._map.latLngToContainerPoint(latlng, this._map.getZoom());
-    var size = this._map.getSize(),
-
-      params = {
-        url: this._url,
-        request: 'GetFeatureInfo',
-        service: 'WMS',
-        // srs: this.wmsParams.srs,
-        srs: 'EPSG:4326',
-        // styles: this.wmsParams.styles,
-        // transparent: this.wmsParams.transparent,
-        version: this.wmsParams.version,
-        // format: this.wmsParams.format,
-        bbox: this._map.getBounds().toBBoxString(),
-        height: size.y,
-        width: size.x,
-        layers: this.wmsParams.layers,
-        query_layers: this.wmsParams.layers,
-        info_format: 'application/json'
-      };
-
-    params[params.version === '1.3.0' ? 'i' : 'x'] = Math.floor(point.x);
-    params[params.version === '1.3.0' ? 'j' : 'y'] = Math.floor(point.y);
-
-    return params;
-  },
-
-  showGetFeatureInfo: function (err, latlng, data) {
-
-    let content;
-
-    if (err) {
-      //console.log(err);
-      content = `
-				<h4>${this.options.title}</h4>
-				<p>Données de la couche inaccessibles</p>
-			`
-
-      L.popup({ maxWidth: 800 })
-        .setLatLng(latlng)
-        .setContent(content)
-        .openOn(this._map);
-    } else {
-
-      // Otherwise show the content in a popup
-      let contentLines = [];
-      let contentTitle;
-      if (data.features.length > 0) {
-        Object.entries(data.features[0].properties).forEach(entry => {
-          const [key, value] = entry;
-          if (key !== 'bbox') {
-            contentLines.push(`<div>${key}: ${value}</div>`);
-          }
-        })
-        contentTitle = `<h4>${this.options.title}</h4>`;
-        content = contentTitle.concat(contentLines.join(''));
-
-        L.popup({ maxWidth: 800 })
-          .setLatLng(latlng)
-          .setContent(content)
-          .openOn(this._map);
-      }
-    }
-  }
-
-});
-
-L.tileLayer.betterWms = function (url, options) {
-  return new L.TileLayer.BetterWMS(url, options);
-};
-
-const mapUtil = {
-  getMap: () => {
-    return map;
-  },
-
-  createMap: function (el, options) {
-    const {
-      lat,
-      lng,
-      mapDefaultViewCenter,
-      mapDefaultViewZoom,
-      zoom,
-      zoomControl = true,
-    } = options;
-
-    map = L.map(el, {
-      maxZoom: 18,
-      minZoom: 1,
-      zoomControl: false,
-    }).setView(
-      [
-        !lat ? mapDefaultViewCenter[0] : lat,
-        !lng ? mapDefaultViewCenter[1] : lng,
-      ],
-      !zoom ? mapDefaultViewZoom : zoom
-    );
-    map.setMaxBounds(  [[-90,-180],   [90,180]]  )
-    if (zoomControl) {
-      L.control
-        .zoom({
-          zoomInTitle: 'Zoomer',
-          zoomOutTitle: 'Dézoomer',
-          position: 'topright',
-        })
-        .addTo(map);
-    }
-
-    L.control.scale().addTo(map);
-
-    return map;
-  },
-  addGeocoders: function (configuration) {
-    let geocoder;
-    const geocoderLabel = configuration.SELECTED_GEOCODER.PROVIDER;
-    if (geocoderLabel && L.Control.Geocoder) {
-      const LIMIT_RESULTS = 5;
-      if (
-        geocoderLabel === configuration.GEOCODER_PROVIDERS.ADDOK
-      ) {
-        geocoder = L.Control.Geocoder.addok({ limit: LIMIT_RESULTS });
-      } else if (
-        geocoderLabel === configuration.GEOCODER_PROVIDERS.PHOTON
-      ) {
-        geocoder = L.Control.Geocoder.photon();
-      } else if (
-        geocoderLabel === configuration.GEOCODER_PROVIDERS.NOMINATIM
-      ) {
-        geocoder = L.Control.Geocoder.nominatim();
-      }
-
-      L.Control.geocoder({
-        placeholder: "Chercher une adresse...",
-        geocoder: geocoder,
-      }).addTo(map);
-    }
-  },
-  addLayers: function (layers, serviceMap, optionsMap) {
-    if (layers) {
-      layers.forEach((layer) => {
-        if (layer) {
-          const options = layer.options;
-          options.noWrap=true;
-          if (options) {
-            options.opacity = layer.opacity;
-
-            if (layer.schema_type === 'wms') {
-              let leafletLayer;
-              if (layer.queryable) {
-                options.title = layer.title;
-                leafletLayer = L.tileLayer
-                  .betterWms(layer.service, options)
-                  .addTo(map);
-              } else {
-                leafletLayer = L.tileLayer
-                  .wms(layer.service, options)
-                  .addTo(map);
-              }
-              dictLayersToLeaflet[layer.id] = leafletLayer._leaflet_id;
-            } else if (layer.schema_type === 'tms') {
-              const leafletLayer = L.tileLayer(layer.service, options).addTo(map);
-              dictLayersToLeaflet[layer.id] = leafletLayer._leaflet_id;
-            }
-          }
-        }
-      });
-    } else {
-      optionsMap.noWrap=true;
-      L.tileLayer(serviceMap, optionsMap).addTo(map);
-    }
-  },
-
-  // Remove the base layers (not the features)
-  removeLayers: function () {
-    map.eachLayer((leafLetlayer) => {
-      if (
-        Object.values(dictLayersToLeaflet).includes(leafLetlayer._leaflet_id)
-      ) {
-        map.removeLayer(leafLetlayer);
-      }
-    });
-    dictLayersToLeaflet = {};
-  },
-
-  updateOpacity(layerId, opacity) {
-    const internalLeafletLayerId = dictLayersToLeaflet[layerId];
-    map.eachLayer((layer) => {
-      if (layer._leaflet_id === internalLeafletLayerId) {
-        layer.setOpacity(opacity);
-      }
-    });
-  },
-
-  updateOrder(layers) {
-    // First remove existing layers undefined
-    layers = layers.filter(function (x) {
-      return x !== undefined;
-    });
-    // First remove existing layers
-    map.eachLayer((leafLetlayer) => {
-      layers.forEach((layerOptions) => {
-        if (dictLayersToLeaflet[layerOptions.id] === leafLetlayer._leaflet_id) {
-          map.removeLayer(leafLetlayer);
-        }
-      });
-    });
-    dictLayersToLeaflet = {};
-
-    // Redraw the layers
-    this.addLayers(layers);
-  },
-
-  retrieveFeatureColor: function (featureType, properties) {
-    const colorsStyle = featureType.colors_style && featureType.colors_style.value ? featureType.colors_style.value : featureType.colors_style;
-    if (featureType && colorsStyle && colorsStyle.custom_field_name) {
-      const currentValue = properties[colorsStyle.custom_field_name];
-      const colorStyle = colorsStyle.colors[currentValue];
-      return colorStyle ? colorStyle : featureType.color
-    }
-    else{
-      return featureType.color;
-    }
-  },
-
-  addVectorTileLayer: function (url, project_slug, featureTypes, form_filters) {
-    layerMVT = L.vectorGrid.protobuf(url, {
-      noWrap:true,
-      vectorTileLayerStyles: {
-        "default": (properties) => {
-          const featureType = featureTypes.find((x) => x.slug.split('-')[0] === '' + properties.feature_type_id);
-          const color = this.retrieveFeatureColor(featureType, properties)
-
-          const hiddenStyle = ({
-            radius: 0,
-            fillOpacity: 0.5,
-            weight: 0,
-            fill: false,
-            color: featureType.color,
-          })
-          // Filtre sur le feature type
-          if (form_filters && form_filters.type.selected) {
-            if (featureType.title !== form_filters.type.selected) {
-              return hiddenStyle;
-            }
-          }
-          // Filtre sur le statut
-          if (form_filters && form_filters.status.selected.value) {
-            if (properties.status !== form_filters.status.selected.value) {
-              return hiddenStyle;
-            }
-          }
-          // Filtre sur le titre
-          if (form_filters && form_filters.title) {
-            if (!properties.title.toLowerCase().includes(form_filters.title.toLowerCase())) {
-              return hiddenStyle;
-            }
-          }
-          return ({
-            radius: 4,
-            fillOpacity: 0.5,
-            weight: 3,
-            fill: true,
-            color: color,
-          });
-        },
-      },
-      // subdomains: "0123",
-      // key: 'abcdefghi01234567890',
-      interactive: true,
-      maxNativeZoom: 18,
-      getFeatureId: function (f) {
-        return f.properties.id;
-      }
-    });
-    layerMVT.on('click', (e) => {    // The .on method attaches an event handler
-      const popupContent = this._createContentPopup(e.layer, featureTypes, project_slug);
-      L.popup()
-        .setContent(popupContent)
-        .setLatLng(e.latlng)
-        .openOn(map)
-    });
-    layerMVT.addTo(map);
-    window.layerMVT = layerMVT;
-  },
-
-  addFeatures: function (features, filter, addToMap = true, featureTypes) {
-    const featureGroup = new L.FeatureGroup();
-    features.forEach((feature) => {
-
-      const featureProperties = feature.properties ? feature.properties : feature;
-      const featureType = featureTypes.find((ft) => ft.slug === (featureProperties.feature_type.slug || featureProperties.feature_type));
-      let filters = [];
-      if (filter) {
-        const typeCheck = filter.featureType && featureProperties.feature_type.slug === filter.featureType;
-        const statusCheck = filter.featureStatus && featureProperties.status.value === filter.featureStatus;
-        const titleCheck = filter.featureTitle && featureProperties.title.includes(filter.featureTitle);
-        filters = [typeCheck, statusCheck, titleCheck];
-      }
-
-      if (
-        !filter ||
-        !Object.values(filter).some(val => val) ||
-        Object.values(filter).some(val => val) &&
-        filters.length && filters.every(val => val !== false)
-      ) {
-        const geomJSON = flip(feature.geometry || feature.geom);
-        const popupContent = this._createContentPopup(feature);
-
-        // Look for a custom field
-        let customField;
-        let customFieldOption;
-        if (featureType.customfield_set && Object.keys(featureProperties).some(el => featureType.customfield_set.map(e => e.name).includes(el))) {
-          customField = Object.keys(featureProperties).filter(el => featureType.customfield_set.map(e => e.name).includes(el));
-          customFieldOption = featureProperties[customField[0]];
-        }
-        let color = this.retrieveFeatureColor(featureType, featureProperties) || featureProperties.color;
-        if (color == undefined){
-          color = featureType.color;
-        }
-        const colorValue = color.value ? color.value : color;
-        if (geomJSON.type === 'Point') {
-          if (customFieldOption && featureType.colors_style && featureType.colors_style.value && featureType.colors_style.value.icons) {
-            const iconHTML = `
-              <i
-                class="fas fa-${featureType.colors_style.value.icons[customFieldOption] || 'circle'} fa-2x"
-                style="color: ${colorValue}"
-              ></i>
-            `;
-            const customMapIcon = L.divIcon({
-              html: iconHTML,
-              iconSize: [20, 20],
-              className: 'myDivIcon',
-            });
-            L.marker(geomJSON.coordinates, {
-              icon: customMapIcon,
-              color: colorValue,
-              zIndexOffset: 100
-            })
-              .bindPopup(popupContent)
-              .addTo(featureGroup);
-          } else {
-            const iconHTML = `
-              <i
-                class="fas fa-${featureType.icon || 'circle'} fa-2x"
-                style="color: ${colorValue}"
-              ></i>
-            `;
-            const customMapIcon = L.divIcon({
-              html: iconHTML,
-              iconSize: [20, 20],
-              className: 'myDivIcon',
-            });
-            L.marker(geomJSON.coordinates, {
-              icon: customMapIcon,
-              color: colorValue,
-              zIndexOffset: 100
-            })
-              .bindPopup(popupContent)
-              .addTo(featureGroup);
-          }
-        } else if (geomJSON.type === 'LineString') {
-          L.polyline(geomJSON.coordinates, {
-            color: colorValue,
-            weight: 3,
-          })
-            .bindPopup(popupContent)
-            .addTo(featureGroup);
-        } else if (geomJSON.type === 'Polygon') {
-          L.polygon(geomJSON.coordinates, {
-            color: colorValue,
-            weight: 3,
-            fillOpacity: 0.5,
-          })
-            .bindPopup(popupContent)
-            .addTo(featureGroup);
-        }
-      }
-    });
-    if (map && addToMap) {
-      map.addLayer(featureGroup);
-    }
-
-    return featureGroup;
-  },
-  addMapEventListener: function (eventName, callback) {
-    map.on(eventName, callback);
-  },
-
-  _createContentPopup: function (feature, featureTypes, project_slug) {
-    const formatDate = (current_datetime) => {
-      let formatted_date = current_datetime.getFullYear() + "-" + ("0" + (current_datetime.getMonth() + 1)).slice(-2) + "-" + ("0" + current_datetime.getDate()).slice(-2) + " " +
-        ("0" + current_datetime.getHours()).slice(-2) + ":" + ("0" + current_datetime.getMinutes()).slice(-2);
-      return formatted_date;
-    }
-    let feature_type;
-    let status;
-    let date_maj;
-    let feature_type_url;
-    let feature_url;
-
-    if (feature.properties) {
-      status = feature.properties.status;
-      date_maj = feature.properties.updated_on;
-      feature_type_url = feature.properties.feature_type_url;
-      feature_url = feature.properties.feature_url;
-    } else {
-      status = feature.status;
-      date_maj = feature.updated_on;
-      feature_type_url =feature.feature_type_url;
-      feature_url = feature.feature_url;
-    }
-
-    if (featureTypes) { // => VectorTile
-      feature_type = featureTypes.find((x) => x.slug.split('-')[0] === '' + feature.properties.feature_type_id);
-      status = statusList.find((x) => x.value === feature.properties.status).name;
-      date_maj = formatDate(new Date(feature.properties.updated_on));
-      feature_type_url = '/geocontrib/projet/' + project_slug + '/type-signalement/' + feature_type.slug + '/';
-      feature_url = feature_type_url + 'signalement/' + feature.properties.feature_id + '/';
-      //status=feature.properties.status;
-    } else {
-      feature_type = feature.properties ? feature.properties.feature_type : feature.feature_type;
-      status = feature.properties ? feature.properties.status.label : feature.status.label;
-    }
-
-    let author = '';
-    const creator = feature.properties ? feature.properties.creator : feature.creator
-    if (creator) {
-      author = creator.full_name
-        ? `<div>
-					Auteur : ${creator.first_name} ${creator.last_name}
-				</div>`
-        : creator.username ? `<div>Auteur: ${creator.username}</div>` : '';
-    }
-
-    const title = feature.properties ? feature.properties.title : feature.title;
-    return `
-					<h4>
-						<a href="${feature_url}">${title}</a>
-					</h4>
-					<div>
-						Statut : ${status}
-					</div>
-					<div>
-						Type : <a href="${feature_type_url}"> ${feature_type.title} </a>
-					</div>
-					<div>
-						Dernière mise à jour : ${date_maj}
-					</div>
-					${author}
-				`;
-  },
-};
-
-export { mapUtil }

src/assets/js/utils.js

 export function fileConvertSize(aSize){
-	aSize = Math.abs(parseInt(aSize, 10));
-	const def = [[1, 'octets', 0], [1024, 'ko', 0], [1024*1024, 'Mo', 1], [1024*1024*1024, 'Go', 2], [1024*1024*1024*1024, 'To', 2]];
-	for (let i=0; i<def.length; i++) {
-		if (aSize<def[i][0]) return (aSize/def[i-1][0]).toFixed(def[i-1][2]) + ' ' + def[i-1][1];
-	}
+  aSize = Math.abs(parseInt(aSize, 10));
+  const def = [[1, 'octets', 0], [1024, 'ko', 0], [1024*1024, 'Mo', 1], [1024*1024*1024, 'Go', 2], [1024*1024*1024*1024, 'To', 2]];
+  for (let i=0; i<def.length; i++) {
+    if (aSize<def[i][0]) {
+      return (aSize/def[i-1][0]).toFixed(def[i-1][2]) + ' ' + def[i-1][1];
+    }
+  }
 }
 
 export function fileConvertSizeToMo(aSize){
-	aSize = Math.abs(parseInt(aSize, 10));
-	const def = [1024*1024, 'Mo', 1];
-	return (aSize/def[0]).toFixed(def[2]);
+  aSize = Math.abs(parseInt(aSize, 10));
+  const def = [1024*1024, 'Mo', 1];
+  return (aSize/def[0]).toFixed(def[2]);
+}
+
+/**
+ * Determines the likely field delimiter in a CSV string by analyzing the first few lines.
+ * The function counts the occurrences of common delimiters such as commas, semicolons, and tabs.
+ * The most frequently and consistently occurring delimiter across the sampled lines is chosen as the likely delimiter.
+ *
+ * @param {string} text - The CSV string to analyze for determining the delimiter.
+ * @returns {string|false} The most likely delimiter character if one can be determined, or false if none is found.
+ */
+export function determineDelimiter(text) {
+  const lines = text.split('\n').slice(0, 5); // Analyze the first 5 lines
+  const delimiters = [',', ';', '\t']; // List of possible delimiters
+  let delimiterCounts = new Map(delimiters.map(d => [d, 0])); // Initialize a map to count delimiter occurrences
+
+  // Count the occurrences of each delimiter in each line
+  lines.forEach(line => {
+    delimiters.forEach(delimiter => {
+      const count = line.split(delimiter).length - 1; // Count the occurrences of the delimiter in the line
+      delimiterCounts.set(delimiter, delimiterCounts.get(delimiter) + count); // Update the count in the map
+    });
+  });
+
+  let mostCommonDelimiter = '';
+  let maxCount = 0;
+
+  // Determine the most common delimiter
+  delimiterCounts.forEach((count, delimiter) => {
+    if (count > maxCount) {
+      mostCommonDelimiter = delimiter; // Set the most common delimiter found so far
+      maxCount = count; // Update the maximum count found so far
+    }
+  });
+
+  return mostCommonDelimiter || false; // Return the most common delimiter or false if none is found
+}
+
+/**
+ * Parses a CSV string into an array of rows, where each row is an array of fields.
+ * The function correctly handles multiline fields enclosed in double quotes, removes
+ * carriage return characters (\r) at the end of lines, and allows for different field
+ * delimiters.
+ * 
+ * @param {string} text - The CSV string to be parsed.
+ * @param {string} delimiter - The field delimiter character (default is comma ',').
+ * @returns {Array<Array<string>>} An array of rows, each row being an array of fields.
+ */
+export function parseCSV(text, delimiter = ',') {
+  let rows = [];     // This will hold the parsed rows
+  let row = [];      // Temporary array to hold the fields of the current row
+  let field = '';    // Temporary string to hold the current field
+  let inQuotes = false; // Boolean to track whether we are inside quotes
+
+  for (let i = 0; i < text.length; i++) {
+    const char = text[i]; // Current character
+
+    if (char === '"' && text[i - 1] !== '\\') {
+      inQuotes = !inQuotes; // Toggle the inQuotes flag if not escaped
+    } else if (char === delimiter && !inQuotes) {
+      // If the current character is the delimiter and we are not inside quotes,
+      // add the field to the row and reset the field variable
+      row.push(field.replace(/\r$/, '')); // Remove trailing carriage return
+      field = '';
+    } else if (char === '\n' && !inQuotes) {
+      // If the current character is a newline and we are not inside quotes,
+      // add the field to the row, add the row to the list of rows,
+      // and reset the field and row variables
+      row.push(field.replace(/\r$/, '')); // Remove trailing carriage return
+      rows.push(row);
+      row = [];
+      field = '';
+    } else {
+      // If the current character is part of a field, add it to the field variable
+      field += char;
+    }
+  }
+
+  // After the loop, check if there's a remaining field or row to be added
+  if (field) {
+    row.push(field.replace(/\r$/, '')); // Remove trailing carriage return
+    rows.push(row);
+  }
+
+  return rows; // Return the parsed rows
+}
+
+/**
+ * Checks if the values in 'lon' and 'lat' columns are decimal numbers in the provided CSV data.
+ *
+ * @param {Array<string>} headers - The array of headers from the CSV file.
+ * @param {Array<Array<string>>} data - The CSV data as an array of rows, each row being an array of field values.
+ * @returns {boolean} True if 'lon' and 'lat' are found and their values are decimal numbers, false otherwise.
+ */
+export function checkLonLatValues(headers, data) {
+  const lonIndex = headers.indexOf('lon');
+  const latIndex = headers.indexOf('lat');
+
+  // Check if both 'lon' and 'lat' headers are found
+  if (lonIndex === -1 || latIndex === -1) {
+    return false;
+  }
+
+  // Function to check if a string is a decimal number
+  const isDecimal = (str) => !isNaN(str) && str.includes('.');
+
+  for (const row of data) {
+    // Check if 'lon' and 'lat' values are decimal numbers
+    if (!isDecimal(row[lonIndex]) || !isDecimal(row[latIndex])) {
+      return false;
+    }
+  }
+
+  return true;
 }

src/assets/js/vector_tile_fix.js

-/* eslint-disable no-unused-vars */
-import L from "leaflet"
-export var Symbolizer = L.Class.extend({
-	// 🍂method initialize(feature: GeoJSON, pxPerExtent: Number)
-	// Initializes a new Line Symbolizer given a GeoJSON feature and the
-	// pixel-to-coordinate-units ratio. Internal use only.
-
-	// 🍂method render(renderer, style)
-	// Renders this symbolizer in the given tiled renderer, with the given
-	// `L.Path` options.  Internal use only.
-	render: function(renderer, style) {
-		this._renderer = renderer;
-		this.options = style;
-		renderer._initPath(this);
-		renderer._updateStyle(this);
-	},
-
-	// 🍂method render(renderer, style)
-	// Updates the `L.Path` options used to style this symbolizer, and re-renders it.
-	// Internal use only.
-	updateStyle: function(renderer, style) {
-		this.options = style;
-		renderer._updateStyle(this);
-	},
-
-	_getPixelBounds: function() {
-		var parts = this._parts;
-		var bounds = L.bounds([]);
-		for (var i = 0; i < parts.length; i++) {
-			var part = parts[i];
-			for (var j = 0; j < part.length; j++) {
-				bounds.extend(part[j]);
-			}
-		}
-
-		var w = this._clickTolerance(),
-            p = new L.Point(w, w);
-
-		bounds.min._subtract(p);
-		bounds.max._add(p);
-
-		return bounds;
-	},
-	_clickTolerance: L.Path.prototype._clickTolerance,
-})
-
-export var PolyBase = {
-	_makeFeatureParts: function(feat, pxPerExtent) {
-		var rings = feat.geometry;
-		var coord;
-
-		this._parts = [];
-		for (var i = 0; i < rings.length; i++) {
-			var ring = rings[i];
-			var part = [];
-			for (var j = 0; j < ring.length; j++) {
-				coord = ring[j];
-				// Protobuf vector tiles return {x: , y:}
-				// Geojson-vt returns [,]
-				part.push(L.point(coord).scaleBy(pxPerExtent));
-			}
-			this._parts.push(part);
-		}
-	},
-
-	makeInteractive: function() {
-		this._pxBounds = this._getPixelBounds();
-	}
-}
-export var LineSymbolizer = L.Polyline.extend({
-	includes: [Symbolizer.prototype, PolyBase],
-
-	initialize: function(feature, pxPerExtent) {
-		this.properties = feature.properties;
-		this._makeFeatureParts(feature, pxPerExtent);
-	},
-
-	render: function(renderer, style) {
-		style.fill = false;
-		Symbolizer.prototype.render.call(this, renderer, style);
-		this._updatePath();
-	},
-
-	updateStyle: function(renderer, style) {
-		style.fill = false;
-		Symbolizer.prototype.updateStyle.call(this, renderer, style);
-	},
-})
-export var FillSymbolizer = L.Polygon.extend({
-	includes: [Symbolizer.prototype, PolyBase],
-
-	initialize: function(feature, pxPerExtent) {
-		this.properties = feature.properties;
-		this._makeFeatureParts(feature, pxPerExtent);
-	},
-
-	render: function(renderer, style) {
-		Symbolizer.prototype.render.call(this, renderer, style);
-		this._updatePath();
-	}
-})
-export var PointSymbolizer = L.CircleMarker.extend({
-	includes: Symbolizer.prototype,
-
-	statics: {
-		iconCache: {}
-	},
-
-	initialize: function(feature, pxPerExtent) {
-		this.properties = feature.properties;
-		this._makeFeatureParts(feature, pxPerExtent);
-	},
-
-	render: function(renderer, style) {
-		Symbolizer.prototype.render.call(this, renderer, style);
-		this._radius = style.radius || L.CircleMarker.prototype.options.radius;
-		this._updatePath();
-	},
-
-	_makeFeatureParts: function(feat, pxPerExtent) {
-		var coord = feat.geometry[0];
-		if (typeof coord[0] === 'object' && 'x' in coord[0]) {
-			// Protobuf vector tiles return [{x: , y:}]
-			this._point = L.point(coord[0]).scaleBy(pxPerExtent);
-			this._empty = L.Util.falseFn;
-		} else {
-			// Geojson-vt returns [,]
-			this._point = L.point(coord).scaleBy(pxPerExtent);
-			this._empty = L.Util.falseFn;
-		}
-	},
-
-	makeInteractive: function() {
-		this._updateBounds();
-	},
-
-	updateStyle: function(renderer, style) {
-		this._radius = style.radius || this._radius;
-		this._updateBounds();
-		return Symbolizer.prototype.updateStyle.call(this, renderer, style);
-	},
-
-	_updateBounds: function() {
-		var icon = this.options.icon
-		if (icon) {
-			var size = L.point(icon.options.iconSize),
-                anchor = icon.options.iconAnchor ||
-                size && size.divideBy(2, true),
-                p = this._point.subtract(anchor);
-			this._pxBounds = new L.Bounds(p, p.add(icon.options.iconSize));
-		} else {
-			L.CircleMarker.prototype._updateBounds.call(this);
-		}
-	},
-
-	_updatePath: function() {
-		if (this.options.icon) {
-			this._renderer._updateIcon(this)
-		} else {
-			L.CircleMarker.prototype._updatePath.call(this);
-		}
-	},
-
-	_getImage: function () {
-		if (this.options.icon) {
-			var url = this.options.icon.options.iconUrl,
-            img = PointSymbolizer.iconCache[url];
-			if (!img) {
-				var icon = this.options.icon;
-				img = PointSymbolizer.iconCache[url] = icon.createIcon();
-			}
-			return img;
-		} else {
-			return null;
-		}
-
-	},
-
-	_containsPoint: function(p) {
-		var icon = this.options.icon;
-		if (icon) {
-			return this._pxBounds.contains(p);
-		} else {
-			return L.CircleMarker.prototype._containsPoint.call(this, p);
-		}
-	}
-});
-
-L.VectorGrid.prototype._createLayer=function(feat, pxPerExtent, layerStyle) {
-    var layer;
-    switch (feat.type) {
-    case 1:
-        layer = new PointSymbolizer(feat, pxPerExtent);
-        // [YB 2019-10-23: prevent leaflet from treating these canvas points as real markers]
-        layer.getLatLng = null;         
-        break;
-    case 2:
-        layer = new LineSymbolizer(feat, pxPerExtent);
-        break;
-    case 3:
-        layer = new FillSymbolizer(feat, pxPerExtent);
-        break;
-    }
-  
-    if (this.options.interactive) {
-        layer.addEventParent(this);
-    }
-  
-    return layer;
-  }
\ No newline at end of file

src/assets/resources/leaflet-control-geocoder-1.13.0/Control.Geocoder.css

-/* required styles */
-/* For input, we add the strong #map selector to avoid conflicts with semantic-ui */
-
-#map .leaflet-control-geocoder {
-  border-radius: 4px;
-  background: white;
-  min-width: 26px;
-  min-height: 26px;
-}
-
-.leaflet-touch .leaflet-control-geocoder {
-  min-width: 30px;
-  min-height: 30px;
-}
-
-.leaflet-control-geocoder a,
-.leaflet-control-geocoder .leaflet-control-geocoder-icon {
-  border-bottom: none;
-  display: inline-block;
-}
-
-.leaflet-control-geocoder .leaflet-control-geocoder-alternatives a {
-  width: inherit;
-  height: inherit;
-  line-height: inherit;
-}
-
-.leaflet-control-geocoder a:hover,
-.leaflet-control-geocoder .leaflet-control-geocoder-icon:hover {
-  border-bottom: none;
-  display: inline-block;
-}
-
-.leaflet-control-geocoder-form {
-  display: none;
-  vertical-align: middle;
-}
-.leaflet-control-geocoder-expanded .leaflet-control-geocoder-form {
-  display: inline-block;
-}
-#map .leaflet-control-geocoder-form input {
-  font-size: 120%;
-  border: 0;
-  background-color: transparent;
-  width: 246px;
-}
-
-.leaflet-control-geocoder-icon {
-  border-radius: 4px;
-  width: 26px;
-  height: 26px;
-  border: none;
-  background-color: white;
-  background-image: url(./images/geocoder.svg);
-  background-repeat: no-repeat;
-  background-position: center;
-  cursor: pointer;
-}
-
-.leaflet-touch .leaflet-control-geocoder-icon {
-  width: 30px;
-  height: 30px;
-}
-
-.leaflet-control-geocoder-throbber .leaflet-control-geocoder-icon {
-  background-image: url(./images/throbber.gif);
-}
-
-.leaflet-control-geocoder-form-no-error {
-  display: none;
-}
-
-#map .leaflet-control-geocoder-form input:focus {
-  outline: none;
-}
-
-.leaflet-control-geocoder-form button {
-  display: none;
-}
-.leaflet-control-geocoder-error {
-  margin-top: 8px;
-  margin-left: 8px;
-  display: block;
-  color: #444;
-}
-.leaflet-control-geocoder-alternatives {
-  display: block;
-  width: 272px;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.leaflet-control-geocoder-alternatives-minimized {
-  display: none;
-  height: 0;
-}
-.leaflet-control-geocoder-alternatives li {
-  white-space: nowrap;
-  display: block;
-  overflow: hidden;
-  padding: 5px 8px;
-  text-overflow: ellipsis;
-  border-bottom: 1px solid #ccc;
-  cursor: pointer;
-}
-
-.leaflet-control-geocoder-alternatives li a,
-.leaflet-control-geocoder-alternatives li a:hover {
-  width: inherit;
-  height: inherit;
-  line-height: inherit;
-  background: inherit;
-  border-radius: inherit;
-  text-align: left;
-}
-
-.leaflet-control-geocoder-alternatives li:last-child {
-  border-bottom: none;
-}
-.leaflet-control-geocoder-alternatives li:hover,
-.leaflet-control-geocoder-selected {
-  background-color: #f5f5f5;
-}
-
-
-/* Custom style */
-.leaflet-control-geocoder-icon {
-  border-radius: 4px;
-  width: 35px;
-  height: 35px;
-}
-
-#map .leaflet-control-geocoder-form input {
-  height: 35px;
-}
-
-.leaflet-control-geocoder-alternatives li:first-of-type {
-  border-top: 1px solid #ccc;
-}
-
-.leaflet-control-geocoder-address-item {
-	font-weight: 600;
-}
-
-.leaflet-control-geocoder-address-detail {
-	font-size: 12px;
-	font-weight: normal;
-}
-
-.leaflet-control-geocoder-address-context {
-	color: #666;
-	font-size: 12px;
-	font-weight: lighter;
-}

src/assets/resources/leaflet-control-geocoder-1.13.0/images/geocoder.svg

-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
\ No newline at end of file

src/assets/styles/openlayers-custom.css

+/* OPENLAYERS */
+.ol-zoom{
+  right: 5px !important;
+  left:unset !important;
+}
+ 
+.ol-popup {
+  position: absolute;
+  background-color: white;
+  padding: 15px 5px 15px 15px;
+  border-radius: 10px;
+  bottom: 12px;
+  left: -120px;
+  width: 240px;
+  line-height: 1.4;
+  -webkit-box-shadow: 0 3px 14px rgba(0,0,0,.4);
+  box-shadow: 0 3px 14px rgba(0,0,0,.4);
+}
+
+.ol-popup #popup-content {
+  line-height: 1.3;
+  font-size: .95em;
+}
+.ol-popup #popup-content h4 {
+  margin-right: 15px;
+  margin-bottom: .5em;
+  color: #cacaca;
+}
+.ol-popup #popup-content h4,
+.ol-popup #popup-content div {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.ol-popup #popup-content div {
+  color: #434343;
+}
+.ol-popup #popup-content .fields {
+  max-height: 200px;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  padding-right: 10px;
+  display: block; /* overide .ui.form.fields rule conflict in featureEdit page */
+  margin: 0; /* overide .ui.form.fields rule conflict in featureEdit page */
+}
+.ol-popup #popup-content .divider {
+  margin-bottom: 0;
+}
+.ol-popup #popup-content #customFields h5 {
+  max-height: 20;
+  margin: .5em 0;
+}
+
+.ol-popup:after, .ol-popup:before {
+  top: 100%;
+  border: solid transparent;
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+}
+.ol-popup:after {
+  border-top-color: white;
+  border-width: 10px;
+  left: 50%;
+  margin-left: -10px;
+}
+.ol-popup:before {
+  border-top-color: #cccccc;
+  border-width: 11px;
+  left: 50%;
+  margin-left: -11px;
+}
+.ol-popup-closer {
+  text-decoration: none;
+  position: absolute;
+  top: 4px;
+  right: 0;
+  width: 24px;
+  height: 24px;
+  font: 18px/24px Tahoma,Verdana,sans-serif;
+  color: #757575;
+}
+.ol-popup-closer:after {
+  content: "×";
+}
+.ol-scale-line {
+  left: 2em;
+  background: hsla(0,0%,100%,.5);
+  padding: 0;
+}
+.ol-scale-line-inner {
+  color: #333;
+  font-size: 0.9em;
+  text-align: left;
+  padding-left: 0.5em;
+  border: 2px solid #777;
+  border-top: none;
+}
+
+.ol-control {
+  border: 2px solid rgba(0,0,0,.2);
+  background-clip: padding-box;
+  padding: 0;
+}
+
+.ol-control button {
+  background-color: #fff;
+  color: #000;
+  height: 30px;
+  width: 30px;
+  font: 700 18px Lucida Console,Monaco,monospace;
+  margin: 0;
+}
+.ol-control button:hover {
+  cursor: pointer;
+  background-color: #ebebeb;
+}
+.ol-control button:focus {
+  background-color: #ebebeb;
+}
+
+/* hide the popup before the map get loaded */
+.map-container > #popup.ol-popup {
+  display: none;
+}
+
+.ol-full-screen {
+  top: calc(1em + 60px);
+  right: 5px !important;
+}
+
+/* Geolocation button */
+div.geolocation-container {
+  position: absolute;
+  right: 6px;
+  z-index: 9;
+  border: 2px solid rgba(0,0,0,.2);
+  background-clip: padding-box;
+  padding: 0;
+  border-radius: 4px;
+}
+button.button-geolocation {
+  border: none;
+  padding: 0;
+  margin: 0;
+  text-align: center;
+  background-color: #fff;
+  color: rgb(39, 39, 39);
+  width: 30px;
+  height: 30px;
+  font: 700 18px Lucida Console,Monaco,monospace;
+  border-radius: 2px;
+  line-height: 1.15;
+  cursor: pointer;
+}
+button.button-geolocation:hover {
+    background-color: #ebebeb;
+  }
+button.button-geolocation.tracking {
+  background-color: rgba(255, 145, 0, 0.904);
+  color: #fff;
+}
+button.button-geolocation i {
+  margin: 0;
+  vertical-align: top; /* strangely top is the only value that center at middle */
+  background-image: url(../img/geolocation-icon.png);
+  background-size: cover;
+  width: 25px;
+  height: 25px;
+}
\ No newline at end of file

src/assets/styles/sidebar-layers.css

@@ -13,8 +13,7 @@
   border: 1px solid grey;
   top: 0;
   position: absolute;
-  /* Under this value, the map hide the sidebar */
-  z-index: 400;
+  z-index: 9;
 }
 
 .sidebar-layers {
@@ -62,7 +61,7 @@
 
 .sidebar-container.expanded .layers-icon svg path,
 .sidebar-container.closing .layers-icon svg path {
-  fill: #00b5ad;
+  fill: var(--primary-color, #00b5ad);
 }
 
 @keyframes open-sidebar {
@@ -132,7 +131,7 @@
 }
 
 .layers-icon:hover svg path {
-  fill: #00b5ad;
+  fill: var(--primary-color, #00b5ad);
 }
 
 .basemaps-title {
@@ -144,7 +143,6 @@
 }
 
 /* Layer item */
-
 .layer-item {
   padding-bottom: 0.5rem;
 }
@@ -164,6 +162,7 @@
 
 .range-container {
   display: flex;
+  min-width: 15em; /* give space for the bubble since adding a min-width to keep its shape */
 }
 
 .range-output-bubble {
@@ -172,6 +171,8 @@
   padding: 4px 7px;
   border-radius: 40px;
   background-color: #2c3e50;
+  min-width: 2em;
+  text-align: center;
 }
 
 /* Overrides default padding of semantic-ui accordion */