fix bug and generate random color

maplibre · Sep 1, 2023 · dd0ad1d · dd0ad1d
1 parent d505a74
commit dd0ad1d
Showing 1 changed file with 55 additions and 33 deletions.
diff --git a/tests/debug.html b/tests/debug.html
@@ -7,6 +7,7 @@
     <meta name="viewport" content="initial-scale=1,width=device-width"/>
     <script src="https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-gl.js"></script>
     <link href="https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-gl.css" rel="stylesheet"/>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/randomcolor/0.6.1/randomColor.js"></script>
 
     <style>
         body {
@@ -215,19 +216,22 @@
         }
     }
 
-    // Reference from: https://stackoverflow.com/a/16348977/11522644
-    const stringToColour = function (str) {
-        let hash = 0;
-        for (let i = 0; i < str.length; i++) {
-            hash = str.charCodeAt(i) + ((hash << 5) - hash);
-        }
-        let colour = "#";
-        for (let i = 0; i < 3; i++) {
-            const value = (hash >> (i * 8)) & 0xff;
-            colour += ("00" + value.toString(16)).substr(-2);
-        }
-        return colour;
-    };
+    const string2RandColor = function (layerName) {
+        const luminosity = "bright";
+        const alpha = 1
+        const hues = ["pink", "blue", "orange", "monochrome", "yellow", "dark", "green"];
+        let hue = hues[Math.floor(Math.random() * hues.length)];
+
+        var rgb = randomColor({
+            luminosity: luminosity,
+            hue: hue,
+            seed: layerName,
+            format: 'rgbArray'
+        });
+
+        let rgba = rgb.concat([alpha]).join(', ');
+        return `rgba(${rgba})`;
+    }
 
     const map = new maplibregl.Map({
         container: 'map',
@@ -240,36 +244,36 @@
     const onSourceChanged = function () {
         for (const sourceId of Object.keys(map.style.sourceCaches)) {
             let sourceCache = map.style.sourceCaches[sourceId];
-            let layerIds = sourceCache._source.vectorLayerIds;
-            if (layerIds === null || layerIds === undefined) {
+            let sourceLayers = sourceCache._source.vectorLayerIds;
+            if (sourceLayers === null || sourceLayers === undefined) {
                 console.log(`Can't find layers in ${sourceId}'s tilejson`);
                 return;
             }
-            for (const lyrId of layerIds) {
+            for (const sourceLayer of sourceLayers) {
                 for (const [type, geoType] of [["circle", "Point"], ["line", "LineString"], ["fill", "Polygon"]]) {
+                    const layerId = `${sourceId}_${sourceLayer}_${type}`;
                     let layer = {
-                        id: `${sourceId}_${lyrId}_${type}`,
+                        id: layerId,
                         source: sourceId,
                         type: type,
-                        'source-layer': lyrId,
+                        'source-layer': sourceLayer,
                         filter: ['==', '$type', geoType],
                         layout: {
                             visibility: 'none'
                         },
                         paint: {
-                            [`${type}-color`]: stringToColour(`${sourceId}_${lyrId}_${type}`)
+                            [`${type}-color`]: string2RandColor(layerId)
                         }
                     };
-                    if (map.getLayer(`${sourceId}_${lyrId}_${type}`) === undefined) {
+                    if (map.getLayer(layerId) === undefined) {
                         map.addLayer(layer);
                     }
                 }
             }
         }
     }
 
-    const QUERY_THRESHOLD = 5;
-
+    const QUERY_THRESHOLD = 20;
     const popup = new maplibregl.Popup({
         closeButton: false,
         closeOnClick: false
@@ -315,16 +319,22 @@
                 </inspect_popup>`;
     }
 
-    let popupFixed = false;
+    let isPopupFixed = false;
     map.on("click", e => {
-        popupFixed = !popupFixed;
-    });
-
-    map.on("mousemove", function (e) {
-        if (popupFixed) {
-            return;
+        //remove the popup immediately if it's benn shown already
+        if (popup.isOpen()) {
+            popup.remove();
+            isPopupFixed = false;
+        }
+        const showOk = tryShow(e);
+        if (showOk) {
+            isPopupFixed = true;
+        } else {
+            isPopupFixed = false;
         }
+    });
 
+    const tryShow = function (e) {
         const queryBox = [
             [
                 e.point.x - QUERY_THRESHOLD,
@@ -343,6 +353,17 @@
             const renderedPopup = renderFeatures(features);
             popup.setHTML(renderedPopup);
             popup.addTo(map);
+            return true;
+        } else {
+            return false;
+        }
+    }
+
+    map.on("mousemove", function (e) {
+        if (isPopupFixed) return;
+        let showOk = tryShow(e);
+        if (!showOk) {
+            popup.remove();
         }
     });
 
@@ -372,14 +393,14 @@
             link.onclick = function (e) {
                 e.preventDefault();
                 e.stopPropagation();
-                const layerNames = map.style.sourceCaches[sourceName]._source.vectorLayerIds;
-                if (layerNames === undefined || layerNames === null) {
+                const sourceLayers = map.style.sourceCaches[sourceName]._source.vectorLayerIds;
+                if (sourceLayers === undefined || sourceLayers === null) {
                     return;
                 }
 
-                for (const layerName of layerNames) {
+                for (const sourceLayer of sourceLayers) {
                     for (const [type, geoType] of [["circle", "Point"], ["line", "LineString"], ["fill", "Polygon"]]) {
-                        const clickedLayer = `${sourceName}_${layerName}_${type}`;
+                        const clickedLayer = `${sourceName}_${sourceLayer}_${type}`;
                         const visibility = map.getLayoutProperty(
                             clickedLayer,
                             'visibility'
@@ -392,6 +413,7 @@
                         } else {
                             this.className = 'active';
                             map.setLayoutProperty(clickedLayer, 'visibility', 'visible');
+                            map.setPaintProperty(clickedLayer, `${type}-color`, string2RandColor(clickedLayer));
                         }
                     }
                 }