mapkick-rb 0.1.2 → 0.1.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6040b675cb3aebd2b20f20fb679d6dbd8da27282bfca83a2a3063ed8ebf9a593
-  data.tar.gz: 0b1de6cbd644d9d9f5eb52ec854403c47218fc2198e00a23d5d435420b2b68c4
+  metadata.gz: f5a2b37b33ecba167e0844af635b9a87a3afad84eb92b06e19cd3db6ecf6ceb8
+  data.tar.gz: db38e21238698891fa79c21dfcafddba4b97fe3e4b31a91083871279a90836bb
 SHA512:
-  metadata.gz: f312d4524c8705ed35a2f4d6d51d3cc1651156e93ac335c22d74ae5a143687303a3062b8877c92008836c3db50fdfa62c59238cddf2448a82448f5565e73399f
-  data.tar.gz: da747aaa4b2bb078f981d5de52ba4c61fa9070c46e8ce6ff2364be7ec2c188077d717b31d1e69063ecbdafc2b26d4dbfb4094165a3ceba91739e8b3bdaecb588
+  metadata.gz: 54729a215c5960c9b73395d98a395941231fa76b6e7b8c9c4d85364f5299e6c4032ac66d08988b236a4fe06a0f40018be997eb53822d44c11003671c4143e43b
+  data.tar.gz: 303226c8be546b020ff81054559f8cff01560ac5a1c26f30f97b1931e1990dcb9186db4a6a885530b80714e89db3de92881f554253ec6c164a47794a3b787034

data/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 0.1.4 (2023-03-11)
+
+- Updated Mapkick.js to 0.2.5
+
+## 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"
 }
 ```
 
@@ -194,10 +196,6 @@ Download [mapkick.bundle.js](https://raw.githubusercontent.com/ankane/mapkick/ma
 <script src="mapkick.bundle.js"></script>
 ```
 
-## No Ruby? No Problem
-
-Check out [mapkick.js](https://github.com/ankane/mapkick.js)
-
 ## History
 
 View the [changelog](CHANGELOG.md)

data/lib/mapkick/version.rb

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

data/licenses/LICENSE-mapkick-bundle.txt

@@ -1,5 +1,5 @@
 ================================================================================
-Mapkick.js 0.2.3
+Mapkick.js 0.2.5
 ================================================================================
 
 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.5
  * 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],
@@ -855,13 +876,26 @@
         }
       }
 
+      var zoom = options.zoom;
+      var center = options.center;
+      if (!center) {
+        if (!bounds.isEmpty()) {
+          center = bounds.getCenter();
+        } else {
+          center = [0, 0];
+          if (!zoom) {
+            zoom = 1;
+          }
+        }
+      }
+
       var mapOptions = {
         container: element,
         style: style,
         dragRotate: false,
         touchZoomRotate: false,
-        center: options.center || bounds.getCenter(),
-        zoom: options.zoom || 15
+        center: center,
+        zoom: zoom || 15
       };
       if (!options.style) {
         mapOptions.projection = "mercator";
@@ -880,7 +914,10 @@
         if (!map.style.stylesheet) {
           map.style.stylesheet = {};
         }
-        map.fitBounds(bounds, {padding: 40, animate: false, maxZoom: 15});
+
+        if (!bounds.isEmpty()) {
+          map.fitBounds(bounds, {padding: 40, animate: false, maxZoom: 15});
+        }
       }
 
       this$1$1.map = map;
@@ -909,10 +946,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 +961,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.4
 platform: ruby
 authors:
 - Andrew Kane
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-02-08 00:00:00.000000000 Z
+date: 2023-03-11 00:00:00.000000000 Z
 dependencies: []
 description:
 email: andrew@ankane.org