Style denue with sector_nombre. Fix circle geojson location

public/js/functions.js

@@ -138,12 +138,35 @@ map.on("style.load", async () => {
                 22, 4
             ],
             "circle-color": [
-                "interpolate",
+                /*"interpolate",
                 ["linear"],
                 ["get", "sector"],
                 10, "rgb(49,54,149)",
                 50, "rgb(255,255,191)",
-                100, "rgb(158,1,66)"
+                100, "rgb(158,1,66)"*/
+                "match",
+                ["get", "sector_nombre"],
+                "Apoyo a negocios y manejo de residuos", "#0292b7",
+                "Actividades legistalivas y gubernamentales", "#1ac8db",
+                "Agricultura, ganadería y pesca", "#8c756a",
+                "Alojamiento y alimentación", "#dee2ec",
+                "Comercio al por mayor", "#fa26a0",
+                "Comercio al por menor", "#f51720",
+                "Construcción", "#f8d210",
+                "Corporativos", "#2ff3e0",
+                "Industria manufacturera", "#d8a7b1",
+                "Información en medios masivos", "#b6e2d3",
+                "Minería", "#fae8e0",
+                "Otros servicios", "#ef7c8e",
+                "Servicios de salud y asistencia social", "#ffaebc",
+                "Servicios educativos", "#a0e7e5",
+                "Servicios financieros y de seguros", "#b4f8c8",
+                "Servicios inmobiliarios", "#fbe7c6",
+                "Servicios profesionales, científicos y técnicos", "#81b622",
+                "Servicios públicos", "#0000ff",
+                "Servicios recreativos", "#ecf87f",
+                "Transportes, correo y almacenamiento", "#b68d40",
+                /* other values */ "#ccc"
             ]
         }
     });
@@ -158,24 +181,24 @@ map.on("style.load", async () => {
         });
     });
 
-    map.addSource('circle', {
-        'type': 'geojson',
-        'data': 'http://localhost:8090/circle.geojson'
+    map.addSource("circle", {
+        "type": "geojson",
+        //"data": "http://localhost:8090/circle.geojson"
+        "data": new URL(`/circle.geojson`, window.location.href).href
     });
     map.addLayer({
-        'id': 'circle',
-        'type': 'fill',
-        'source': 'circle',
-        'layout': {},
-        'paint': {
-            'fill-color': '#088',
-            'fill-opacity': 0.56
+        "id": "circle",
+        "type": "fill",
+        "source": "circle",
+        "layout": {},
+        "paint": {
+            "fill-color": "#088",
+            "fill-opacity": 0.56
         }
     });
 });
 
-let muniID = null,
-    intersects = null,
+let muniID = null
     muniGeoms = [];
 
 map.on("click", "denue", async e => {
@@ -250,7 +273,7 @@ map.on("click", "muni_polygon", e => {
                     selectedIDs2.length > 0 ? selectedIDs2 : ["sin-clave"],
                     true,
                     false
-                ], ['within', circleGeom]
+                ], ["within", circleGeom]
                 ]
             );
         } else if (selectedIDs.length > 0) { // if no circle intersection but only selected polygons
@@ -280,7 +303,7 @@ map.on("click", "muni_polygon", e => {
 });
 
 // Change the cursor to a pointer when the mouse is over the denue layer.
-map.on("mouseenter", "denue", e => {
+map.on("mouseenter", "denue", () => {
     map.getCanvas().style.cursor = "pointer";
     //}
 });