chore: maplibre migration

source/package.json

@@ -16,7 +16,7 @@
     "env-cmd": "^9.0.3",
     "jspdf": "^2.1.1",
     "lodash.debounce": "^4.0.8",
-    "mapbox-gl": "^1.12.0",
+    "maplibre-gl": "^1.15.2",
     "material-ui": "^0.20.2",
     "proj4": "^2.5.0",
     "prop-types": "^15.7.2",
@@ -39,7 +39,7 @@
   },
   "scripts": {
     "start": "env-cmd -f .env react-scripts start",
-    "build": "env-cmd -f .env react-scripts build",
+    "build": "GENERATE_SOURCEMAP=true env-cmd -f .env react-scripts build",
     "lint": "eslint src/",
     "lint:fix": "eslint src/ --fix",
     "format": "prettier --write \"./**/*.{js,jsx,css,scss,md}\" --ignore-pattern node_modules/",

source/src/components/DimensionBtn/index.js

@@ -36,7 +36,7 @@ const DimensionBtn = () => {
   }
 
   const controlGroup = document.querySelector(
-    '.mapboxgl-ctrl-top-right .mapboxgl-ctrl-group'
+    '.maplibregl-ctrl-top-right .maplibregl-ctrl-group'
   )
   useEffect(() => {
     if (controlGroup) {

source/src/components/Measure/index.js

@@ -31,7 +31,7 @@ const Measure = () => {
   }, [isActive])
 
   const controlGroup = document.querySelector(
-    '.mapboxgl-ctrl-top-right .mapboxgl-ctrl-group'
+    '.maplibregl-ctrl-top-right .maplibregl-ctrl-group'
   )
   useEffect(() => {
     if (controlGroup) {

source/src/containers/Home/index.js

@@ -13,7 +13,7 @@ import SideBar from 'components/SideBar'
 
 import { useSelector } from 'react-redux'
 
-import 'mapbox-gl/dist/mapbox-gl.css'
+import 'maplibre-gl/dist/maplibre-gl.css'
 import useStyles from './styles'
 
 const Home = ({ token }) => {

source/src/state/ducks/map.js

@@ -10,7 +10,7 @@ import {
   getImagesToLoad,
   getImagesToMerge
 } from 'utils/configQueries'
-import { mapOnPromise, loadImages, mergeImages } from 'utils/mapboxUtils'
+import { mapOnPromise, loadImages, mergeImages } from 'utils/maplibreUtils'
 
 import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
 

source/src/steps.js

@@ -103,23 +103,23 @@ export const largeScreenSteps = [
     )
   },
   {
-    selector: '.mapboxgl-ctrl-zoom-in',
+    selector: '.maplibregl-ctrl-zoom-in',
     content: () => (
       <div>
         <p>Acá vas a poder hacer zoom en el mapa.</p>
       </div>
     )
   },
   {
-    selector: '.mapboxgl-ctrl-compass',
+    selector: '.maplibregl-ctrl-compass',
     content: () => (
       <div>
         <p>Acá vas a poder orientar el norte en el mapa.</p>
       </div>
     )
   },
   {
-    selector: '.mapboxgl-ctrl-group button:nth-last-child(1)',
+    selector: '.maplibregl-ctrl-group button:nth-last-child(1)',
     content: () => (
       <div>
         <p>Acá vas a poder medir en el mapa.</p>

source/src/utils/MapaInteractivoGL.js

@@ -1,7 +1,7 @@
 // TODO: Corregir errores lint ¿tal vez migrar a componente funcional?
 /* eslint-disable */
 
-import * as mapboxgl from 'mapbox-gl'
+import * as maplibregl from 'maplibre-gl'
 import getLayer from './layer-builders/GenericLineLayerBuilder'
 import genericLine from './layer-builders/GenericLineLayerBuilder'
 import genericPoint from './layer-builders/GenericPointLayerBuilder'
@@ -14,11 +14,11 @@ const defaults = {
     minzoom: 10,
     maxzoom: 18
   },
-  // activeMarker: mapboxgl.Marker({color:'orange'}),
-  // fromMarker: mapboxgl.Marker({color:'green'}),
-  // toMarker: mapboxgl.Marker({color:'red'}),
-  // marker: mapboxgl.Marker({color:'yellow'}),
-  popup: new mapboxgl.Popup(),
+  // activeMarker: maplibregl.Marker({color:'orange'}),
+  // fromMarker: maplibregl.Marker({color:'green'}),
+  // toMarker: maplibregl.Marker({color:'red'}),
+  // marker: maplibregl.Marker({color:'yellow'}),
+  popup: new maplibregl.Popup(),
   texts: {
     es: {
       loadingLayers: 'Cargando capas...',
@@ -55,8 +55,8 @@ class MapaInteractivoGL {
     }
     const params = { ...this.config.params, ...options }
 
-    this.map = new mapboxgl.Map(params)
-    //		this.map.addControl(new mapboxgl.NavigationControl())
+    this.map = new maplibregl.Map(params)
+    //		this.map.addControl(new maplibregl.NavigationControl())
     this._markers = {}
     this.popup = this.config.popup
     this._layers = {}
@@ -573,7 +573,7 @@ class MapaInteractivoGL {
   ) {
     const self = this
 
-    const marker = new mapboxgl.Marker(options)
+    const marker = new maplibregl.Marker(options)
     marker.setLngLat(latlng).addTo(this.map)
 
     if (goTo) {
@@ -599,7 +599,7 @@ class MapaInteractivoGL {
   }
 
   getMapEngine() {
-    return mapboxgl
+    return maplibregl
   }
 }
 

source/src/utils/mapboxUtils.js → source/src/utils/maplibreUtils.js

@@ -2,7 +2,7 @@ import { Height } from '@material-ui/icons'
 import { promisify } from 'util'
 
 /**
- * Esta función los convierte en promesas eventos de mapbox que reciben callbak
+ * Esta función los convierte en promesas eventos de maplibre que reciben callbak
  * Cuando los callbacks reciben parametros, estos son envidos como un array.
  * Esta función debería usarse principalmente dentro de llamadas al middleware
  * @param {*} map
@@ -29,7 +29,7 @@ const mapOnPromise = (map) => {
 
 /**
  * Para las capas custom cuando se indica icon-image se corresponde al id de la imagen
- * mapbox necesita que al agregar las capas sus iconos se referencien por id
+ * maplibre necesita que al agregar las capas sus iconos se referencien por id
  */
 const loadImages = async (map, images) => {
   await Promise.allSettled(