mapkick-rb 0.1.2 → 0.1.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6040b675cb3aebd2b20f20fb679d6dbd8da27282bfca83a2a3063ed8ebf9a593
-  data.tar.gz: 0b1de6cbd644d9d9f5eb52ec854403c47218fc2198e00a23d5d435420b2b68c4
+  metadata.gz: 5af8b1f85970b613f96f189922c9be421f657e9c56d3986976ae3cdf366a9f2b
+  data.tar.gz: 4de73c3a4b3d91dc42b93a607cec9daa8a26adfbdba99a70bad660d38a0037dc
 SHA512:
-  metadata.gz: f312d4524c8705ed35a2f4d6d51d3cc1651156e93ac335c22d74ae5a143687303a3062b8877c92008836c3db50fdfa62c59238cddf2448a82448f5565e73399f
-  data.tar.gz: da747aaa4b2bb078f981d5de52ba4c61fa9070c46e8ce6ff2364be7ec2c188077d717b31d1e69063ecbdafc2b26d4dbfb4094165a3ceba91739e8b3bdaecb588
+  metadata.gz: d3c4f0f38d8039fb1caf42fd5e45fd3abd5051ed90411ed38ee5a237b89cd3728fcfecef2189887e2649ad7397e20f49a984935567e8a7e0873ade87de5509fd
+  data.tar.gz: bc67f76b17cf72d8e2ad6f2a23408ca06c84c6fc06a118dedccd930b8a60838ac4a0e5ba013c6205a17155b6aaf6d79322cf9af7b03e82c0211a7cfbbd368fe9

data/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.1.3 (2023-02-13)
+
+- Updated Mapkick.js to 0.2.4
+
 ## 0.1.2 (2023-02-08)
 
 - Updated Mapkick.js to 0.2.3

data/README.md

@@ -109,14 +109,15 @@ Or a URL that returns JSON (same format as above)
 
 Use `latitude` or `lat` for latitude and `longitude`, `lon`, or `lng` for longitude
 
-You can specify a label and tooltip for each data point
+You can specify a label, tooltip, and color for each data point
 
 ```ruby
 {
   latitude: ...,
   longitude: ...,
   label: "Hot Chicken Takeover",
-  tooltip: "5 stars"
+  tooltip: "5 stars",
+  color: "#f84d4d"
 }
 ```
 
@@ -124,13 +125,14 @@ You can specify a label and tooltip for each data point
 
 Use `geometry` with a GeoJSON `Polygon` or `MultiPolygon`
 
-You can specify a label and tooltip for each data point
+You can specify a label, tooltip, and color for each data point
 
 ```ruby
 {
   geometry: {type: "Polygon", coordinates: ...},
   label: "Hot Chicken Takeover",
-  tooltip: "5 stars"
+  tooltip: "5 stars",
+  color: "#0090ff"
 }
 ```
 

data/lib/mapkick/version.rb

@@ -1,3 +1,3 @@
 module Mapkick
-  VERSION = "0.1.2"
+  VERSION = "0.1.3"
 end

data/licenses/LICENSE-mapkick-bundle.txt

@@ -1,5 +1,5 @@
 ================================================================================
-Mapkick.js 0.2.3
+Mapkick.js 0.2.4
 ================================================================================
 
 Copyright (c) 2017-2023 Andrew Kane

data/vendor/assets/javascripts/mapkick.bundle.js

@@ -1,7 +1,7 @@
 /*
  * This bundle includes:
  *
- * Mapkick.js v0.2.3
+ * Mapkick.js v0.2.4
  * https://github.com/ankane/mapkick.js
  * MIT License
  *
@@ -260,6 +260,13 @@
     return element
   }
 
+  // check for hex or named color
+  function validateColor(color) {
+    if (!/^#([0-9a-f]{3}){1,2}$/i.test(color) && !/^[a-z]+$/i.test(color)) {
+      throw new Error("Invalid color")
+    }
+  }
+
   function createMarkerImage(library, color) {
     // set height to center vertically
     var height = 41;
@@ -276,10 +283,7 @@
     svg.setAttribute("width", width);
     svg.setAttribute("viewBox", ("0 0 " + width + " " + height));
 
-    // check for hex or named color
-    if (!/^#([0-9a-f]{3}){1,2}$/i.test(color) && !/^[a-z]+$/i.test(color)) {
-      throw new Error("Invalid color")
-    }
+    validateColor(color);
 
     // set color
     svg.querySelector("*[fill='#3FB1CE']").setAttribute("fill", color);
@@ -440,6 +444,9 @@
       });
     }
 
+    // use Map instead of object for security
+    var markerIds = new window.Map();
+
     function generateGeoJSON(data, options) {
       var geojson = {
         type: "FeatureCollection",
@@ -459,6 +466,19 @@
           properties.mapkickIconAnchor = properties.icon === "mapkick" ? "bottom" : "center";
           properties.mapkickIconOffset = properties.icon === "mapkick" ? [0, 10] : [0, 0];
 
+          if (properties.icon === "mapkick") {
+            var color = properties.color || markerOptions.color || "#f84d4d";
+
+            var markerId = markerIds.get(color);
+            if (markerId === undefined) {
+              markerId = markerIds.size;
+              validateColor(color);
+              markerIds.set(color, markerId);
+            }
+
+            properties.icon = "mapkick-" + markerId;
+          }
+
           var coordinates = rowCoordinates(row);
 
           if (!coordinates[1]) {
@@ -481,6 +501,9 @@
           }
 
           delete properties.geometry;
+
+          properties.mapkickColor = properties.color || markerOptions.color || "#0090ff";
+
         }
 
         geojson.features.push({
@@ -625,8 +648,6 @@
           }
         });
       } else {
-        var fillColor = markerOptions.color || "#0090ff";
-
         var beforeId = layerBeforeFill(map);
 
         var outlineId = name + "-outline";
@@ -635,7 +656,7 @@
           source: name,
           type: "line",
           paint: {
-            "line-color": fillColor,
+            "line-color": {type: "identity", property: "mapkickColor"},
             "line-opacity": 0.7,
             "line-width": 1
           }
@@ -646,7 +667,7 @@
           source: name,
           type: "fill",
           paint: {
-            "fill-color": fillColor,
+            "fill-color": {type: "identity", property: "mapkickColor"},
             "fill-opacity": 0.3
           }
         }, outlineId);
@@ -715,7 +736,7 @@
           return
         }
 
-        if (feature.properties.icon === "mapkick") {
+        if (mapType === "point" && feature.properties.icon.startsWith("mapkick-")) {
           popup.options.offset = {
             "top": [0, 14],
             "top-left": [0, 14],
@@ -909,10 +930,13 @@
           });
         }
 
-        var color = markerOptions.color || "#f84d4d";
-        var image = createMarkerImage(library, color);
-        image.addEventListener("load", function () {
-          map.addImage("mapkick-15", image);
+        var outstanding = markerIds.size;
+
+        function checkReady() {
+          if (outstanding !== 0) {
+            outstanding--;
+            return
+          }
 
           addLayer("objects", geojson);
 
@@ -921,7 +945,18 @@
           while ((cb = layersReadyQueue.shift())) {
             cb();
           }
+        }
+
+        // load marker images
+        markerIds.forEach(function (id, color) {
+          var image = createMarkerImage(library, color);
+          image.addEventListener("load", function () {
+            map.addImage(("mapkick-" + id + "-15"), image);
+            checkReady();
+          });
         });
+
+        checkReady();
       });
     };
 

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: mapkick-rb
 version: !ruby/object:Gem::Version
-  version: 0.1.2
+  version: 0.1.3
 platform: ruby
 authors:
 - Andrew Kane
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-02-08 00:00:00.000000000 Z
+date: 2023-02-13 00:00:00.000000000 Z
 dependencies: []
 description:
 email: andrew@ankane.org