src/assets/js/utils.js

@@ -2,7 +2,9 @@ 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];
+    if (aSize<def[i][0]) {
+      return (aSize/def[i-1][0]).toFixed(def[i-1][2]) + ' ' + def[i-1][1];
+    }
   }
 }
 
@@ -11,3 +13,116 @@ export function fileConvertSizeToMo(aSize){
   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

-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) {
-  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 */