mapkick-rb 0.1.1 → 0.1.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 142c0d5f613b1bf31098593e360bcef22fc2f67f8bec3df00eae695ffc38374a
-  data.tar.gz: 5f9411788846f23203395f615448736c12712f4d71b0069306c0b053731e4ba7
+  metadata.gz: 5af8b1f85970b613f96f189922c9be421f657e9c56d3986976ae3cdf366a9f2b
+  data.tar.gz: 4de73c3a4b3d91dc42b93a607cec9daa8a26adfbdba99a70bad660d38a0037dc
 SHA512:
-  metadata.gz: 3b40922653a27f565fa349d4d1687d04b2add2aacf26bcab042f6ef9a87168940e3dafe7cf39e058f93b430391fbdb484779b3fce8eec3ae4d43678d97b5fa30
-  data.tar.gz: 17a189a1a596dfa60889ba6c8c2595faeebdeeecc4235d74adc3ebba3c8a774fcbd1347b7ce0d5c579ebb7dc363a8186a0d3763eaf2f83be3fd0ce2dd7ff9a2b
+  metadata.gz: d3c4f0f38d8039fb1caf42fd5e45fd3abd5051ed90411ed38ee5a237b89cd3728fcfecef2189887e2649ad7397e20f49a984935567e8a7e0873ade87de5509fd
+  data.tar.gz: bc67f76b17cf72d8e2ad6f2a23408ca06c84c6fc06a118dedccd930b8a60838ac4a0e5ba013c6205a17155b6aaf6d79322cf9af7b03e82c0211a7cfbbd368fe9

data/CHANGELOG.md

@@ -1,3 +1,12 @@
+## 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
+- Added experimental support for area maps
+
 ## 0.1.1 (2023-01-24)
 
 - Updated Mapkick.js to 0.2.2

data/README.md

@@ -16,7 +16,7 @@ Add this line to your application’s Gemfile:
 gem "mapkick-rb"
 ```
 
-Mapkick uses [Mapbox GL JS v1](https://github.com/mapbox/mapbox-gl-js/tree/v1.13.3). To use tiles from Mapbox, [create a Mapbox account](https://account.mapbox.com/auth/signup/) to get an access token and set `ENV["MAPBOX_ACCESS_TOKEN"]` in your environment.
+Mapkick uses [Mapbox GL JS v1](https://github.com/mapbox/mapbox-gl-js/tree/v1.13.3). To use tiles from Mapbox, [create a Mapbox account](https://account.mapbox.com/auth/signup/) to get an access token and set `ENV["MAPBOX_ACCESS_TOKEN"]` in your environment (or set `Mapkick.options[:access_token]` in an initializer).
 
 Then follow the instructions for your JavaScript setup:
 
@@ -79,12 +79,18 @@ In `app/assets/javascripts/application.js`, add:
 
 ## Maps
 
-Create a map
+Point map
 
 ```erb
 <%= js_map [{latitude: 37.7829, longitude: -122.4190}] %>
 ```
 
+Area map (experimental)
+
+```erb
+<%= area_map [{geometry: {type: "Polygon", coordinates: ...}}] %>
+```
+
 ## Data
 
 Data can be an array
@@ -99,16 +105,34 @@ Or a URL that returns JSON (same format as above)
 <%= js_map cities_path %>
 ```
 
-You can use `latitude`, `lat`, `longitude`, `lon`, and `lng`
+### Point Map
+
+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
 
-```javascript
+```ruby
 {
   latitude: ...,
   longitude: ...,
   label: "Hot Chicken Takeover",
-  tooltip: "5 stars"
+  tooltip: "5 stars",
+  color: "#f84d4d"
+}
+```
+
+### Area Map
+
+Use `geometry` with a GeoJSON `Polygon` or `MultiPolygon`
+
+You can specify a label, tooltip, and color for each data point
+
+```ruby
+{
+  geometry: {type: "Polygon", coordinates: ...},
+  label: "Hot Chicken Takeover",
+  tooltip: "5 stars",
+  color: "#0090ff"
 }
 ```
 
@@ -120,16 +144,22 @@ Id, width, and height
 <%= js_map data, id: "cities-map", width: "800px", height: "500px" %>
 ```
 
-Markers
+Marker color
 
 ```erb
 <%= js_map data, markers: {color: "#f84d4d"} %>
 ```
 
-Tooltips
+Show tooltips on click instead of hover
+
+```erb
+<%= js_map data, tooltips: {hover: false} %>
+```
+
+Allow HTML in tooltips (must sanitize manually)
 
 ```erb
-<%= js_map data, tooltips: {hover: false, html: true} %>
+<%= js_map data, tooltips: {html: true} %>
 ```
 
 Map style

data/lib/mapkick/helper.rb

@@ -1,7 +1,17 @@
 module Mapkick
   module Helper
-    # don't break out options since need to merge with default options
     def js_map(data_source, **options)
+      mapkick_map "Map", data_source, **options
+    end
+
+    def area_map(data_source, **options)
+      mapkick_map "AreaMap", data_source, **options
+    end
+
+    private
+
+    # don't break out options since need to merge with default options
+    def mapkick_map(type, data_source, **options)
       options = Mapkick::Utils.deep_merge(Mapkick.options, options)
 
       @mapkick_map_id ||= 0
@@ -67,6 +77,7 @@ module Mapkick
 
       # js vars
       js_vars = {
+        type: type,
         id: element_id,
         data: data_source,
         options: options
@@ -74,7 +85,7 @@ module Mapkick
       js_vars.each_key do |k|
         js_vars[k] = Mapkick::Utils.json_escape(js_vars[k].to_json)
       end
-      createjs = "new Mapkick.Map(%{id}, %{data}, %{options});" % js_vars
+      createjs = "new Mapkick[%{type}](%{id}, %{data}, %{options});" % js_vars
 
       # don't rerun JS on preview
       js = <<~JS

data/lib/mapkick/version.rb

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

data/licenses/LICENSE-mapkick-bundle.txt

@@ -1,5 +1,5 @@
 ================================================================================
-Mapkick.js 0.2.2
+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.2
+ * 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);
@@ -304,7 +308,7 @@
 
   var maps = {};
 
-  var Map = function Map(element, data, options) {
+  var BaseMap = function BaseMap(element, data, options, mapType) {
     var this$1$1 = this;
 
     if (!Mapkick.library && typeof window !== "undefined") {
@@ -405,24 +409,28 @@
       element.textContent = message;
     }
 
+    function errorCatcher(element, data, options, callback) {
+      try {
+        callback(element, data, options);
+      } catch (err) {
+        showError(element, err.message);
+        throw err
+      }
+    }
+
     function fetchData(element, data, options, callback) {
       if (typeof data === "string") {
         getJSON(element, data, function (newData) {
-          callback(element, newData, options);
+          errorCatcher(element, newData, options, callback);
         });
       } else if (typeof data === "function") {
-        try {
-          data(function (newData) {
-            callback(element, newData, options);
-          }, function (message) {
-            showError(element, message);
-          });
-        } catch (err) {
-          showError(element, "Error");
-          throw err
-        }
+        data(function (newData) {
+          errorCatcher(element, newData, options, callback);
+        }, function (message) {
+          showError(element, message);
+        });
       } else {
-        callback(element, data, options);
+        errorCatcher(element, data, options, callback);
       }
     }
 
@@ -436,6 +444,9 @@
       });
     }
 
+    // use Map instead of object for security
+    var markerIds = new window.Map();
+
     function generateGeoJSON(data, options) {
       var geojson = {
         type: "FeatureCollection",
@@ -445,21 +456,60 @@
       for (var i = 0; i < data.length; i++) {
         var row = data[i];
         var properties = Object.assign({}, row);
+        var geometry = (void 0);
+
+        if (mapType === "point") {
+          if (!properties.icon) {
+            properties.icon = options.defaultIcon || "mapkick";
+          }
+          properties.mapkickIconSize = properties.icon === "mapkick" ? 0.5 : 1;
+          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]) {
+            throw new Error(("missing latitude (index: " + i + ")"))
+          }
+
+          if (!coordinates[0]) {
+            throw new Error(("missing longitude (index: " + i + ")"))
+          }
+
+          geometry = {
+            type: "Point",
+            coordinates: coordinates
+          };
+        } else {
+          geometry = row.geometry;
+
+          if (!geometry) {
+            throw new Error(("missing geometry (index: " + i + ")"))
+          }
+
+          delete properties.geometry;
+
+          properties.mapkickColor = properties.color || markerOptions.color || "#0090ff";
 
-        if (!properties.icon) {
-          properties.icon = options.defaultIcon || "mapkick";
         }
-        properties.mapkickIconSize = properties.icon === "mapkick" ? 0.5 : 1;
-        properties.mapkickIconAnchor = properties.icon === "mapkick" ? "bottom" : "center";
-        properties.mapkickIconOffset = properties.icon === "mapkick" ? [0, 10] : [0, 0];
 
         geojson.features.push({
           type: "Feature",
           id: i,
-          geometry: {
-            type: "Point",
-            coordinates: rowCoordinates(row),
-          },
+          geometry: geometry,
           properties: properties
         });
       }
@@ -509,42 +559,146 @@
       return geojson
     }
 
+    function generateLabelGeoJSON(data) {
+      var geojson = {
+        type: "FeatureCollection",
+        features: []
+      };
+
+      for (var i = 0; i < data.features.length; i++) {
+        var feature = data.features[i];
+        var coordinates = (void 0);
+
+        // use center for now
+        var bounds = new library.LngLatBounds();
+        extendBounds(bounds, feature.geometry);
+        if (!bounds.isEmpty()) {
+          var center = bounds.getCenter();
+          coordinates = [center.lng, center.lat];
+        }
+
+        if (coordinates) {
+          geojson.features.push({
+            type: "Feature",
+            id: i,
+            geometry: {
+              type: "Point",
+              coordinates: coordinates
+            },
+            properties: feature.properties
+          });
+        }
+      }
+
+      return geojson
+    }
+
+    function layerBeforeFill(map) {
+      // place below labels
+      var layers = map.getStyle().layers;
+      var beforeId;
+      for (var i = layers.length - 1; i >= 0; i--) {
+        var layer = layers[i];
+        // TODO improve
+        if (!(layer.metadata && layer.metadata["mapbox:featureComponent"] === "place-labels")) {
+          break
+        }
+        beforeId = layer.id;
+      }
+      return beforeId
+    }
+
     function addLayer(name, geojson) {
+      var centersById = {};
+
       map.addSource(name, {
         type: "geojson",
         data: geojson
       });
 
-      // use a symbol layer for markers for performance
-      // https://docs.mapbox.com/help/getting-started/add-markers/#approach-1-adding-markers-inside-a-map
-      // use separate layers to prevent labels from overlapping markers
-      map.addLayer({
-        id: (name + "-text"),
-        source: name,
-        type: "symbol",
-        layout: {
-          "text-field": "{label}",
-          "text-size": 11,
-          "text-anchor": "top",
-          "text-offset": [0, 1]
-        },
-        paint: {
-          "text-halo-color": "rgba(255, 255, 255, 1)",
-          "text-halo-width": 1
-        }
-      });
-      map.addLayer({
-        id: name,
-        source: name,
-        type: "symbol",
-        layout: {
-          "icon-image": "{icon}-15",
-          "icon-allow-overlap": true,
-          "icon-size": {type: "identity", property: "mapkickIconSize"},
-          "icon-anchor": {type: "identity", property: "mapkickIconAnchor"},
-          "icon-offset": {type: "identity", property: "mapkickIconOffset"}
+      if (mapType === "point") {
+        // use a symbol layer for markers for performance
+        // https://docs.mapbox.com/help/getting-started/add-markers/#approach-1-adding-markers-inside-a-map
+        // use separate layers to prevent labels from overlapping markers
+        map.addLayer({
+          id: (name + "-text"),
+          source: name,
+          type: "symbol",
+          layout: {
+            "text-field": "{label}",
+            "text-size": 11,
+            "text-anchor": "top",
+            "text-offset": [0, 1]
+          },
+          paint: {
+            "text-halo-color": "rgba(255, 255, 255, 1)",
+            "text-halo-width": 1
+          }
+        });
+        map.addLayer({
+          id: name,
+          source: name,
+          type: "symbol",
+          layout: {
+            "icon-image": "{icon}-15",
+            "icon-allow-overlap": true,
+            "icon-size": {type: "identity", property: "mapkickIconSize"},
+            "icon-anchor": {type: "identity", property: "mapkickIconAnchor"},
+            "icon-offset": {type: "identity", property: "mapkickIconOffset"}
+          }
+        });
+      } else {
+        var beforeId = layerBeforeFill(map);
+
+        var outlineId = name + "-outline";
+        map.addLayer({
+          id: outlineId,
+          source: name,
+          type: "line",
+          paint: {
+            "line-color": {type: "identity", property: "mapkickColor"},
+            "line-opacity": 0.7,
+            "line-width": 1
+          }
+        }, beforeId);
+
+        map.addLayer({
+          id: name,
+          source: name,
+          type: "fill",
+          paint: {
+            "fill-color": {type: "identity", property: "mapkickColor"},
+            "fill-opacity": 0.3
+          }
+        }, outlineId);
+
+        var labelName = name + "-text";
+        var labelData = generateLabelGeoJSON(geojson);
+
+        for (var i = 0; i < labelData.features.length; i++) {
+          var feature = labelData.features[i];
+          centersById[feature.id] = feature.geometry.coordinates;
         }
-      });
+
+        map.addSource(labelName, {
+          type: "geojson",
+          data: labelData
+        });
+
+        map.addLayer({
+          id: (name + "-text"),
+          source: labelName,
+          type: "symbol",
+          layout: {
+            "text-field": "{label}",
+            "text-size": 11
+          },
+          paint: {
+            "text-halo-color": "rgba(255, 255, 255, 1)",
+            "text-halo-width": 1
+          }
+        });
+      }
 
       var hover = !("hover" in tooltipOptions) || tooltipOptions.hover;
 
@@ -582,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],
@@ -597,8 +751,15 @@
           popup.options.offset = 14;
         }
 
+        var coordinates;
+        if (mapType === "point") {
+          coordinates = feature.geometry.coordinates;
+        } else {
+          coordinates = centersById[feature.id];
+        }
+
         // add the tooltip
-        popup.setLngLat(feature.geometry.coordinates);
+        popup.setLngLat(coordinates);
         if (tooltipOptions.html) {
           popup.setHTML(tooltip);
         } else {
@@ -612,7 +773,9 @@
           popup._container.style.width = popup._container.offsetWidth + 1 + "px";
         }
 
-        panMap(map, popup);
+        if (mapType !== "area") {
+          panMap(map, popup);
+        }
       };
 
       var getLatitude = function (feature) {
@@ -673,12 +836,31 @@
       });
     }
 
+    function extendBounds(bounds, geometry) {
+      if (geometry.type === "Point") {
+        bounds.extend(geometry.coordinates);
+      } else if (geometry.type === "Polygon") {
+        var coordinates = geometry.coordinates[0];
+        for (var j = 0; j < coordinates.length; j++) {
+          bounds.extend(coordinates[j]);
+        }
+      } else if (geometry.type === "MultiPolygon") {
+        var coordinates$1 = geometry.coordinates;
+        for (var j$1 = 0; j$1 < coordinates$1.length; j$1++) {
+          var polygon = coordinates$1[j$1][0];
+          for (var k = 0; k < polygon.length; k++) {
+            bounds.extend(polygon[k]);
+          }
+        }
+      }
+    }
+
     var generateMap = function (element, data, options) {
       var geojson = generateGeoJSON(data, options);
       options = options || {};
 
       for (var i = 0; i < geojson.features.length; i++) {
-        bounds.extend(geojson.features[i].geometry.coordinates);
+        extendBounds(bounds, geojson.features[i].geometry);
       }
 
       // remove any child elements
@@ -748,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);
 
@@ -760,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();
       });
     };
 
@@ -795,11 +991,11 @@
     }
   };
 
-  Map.prototype.getMapObject = function getMapObject () {
+  BaseMap.prototype.getMapObject = function getMapObject () {
     return this.map
   };
 
-  Map.prototype.destroy = function destroy () {
+  BaseMap.prototype.destroy = function destroy () {
     this.stopRefresh();
 
     if (this.map) {
@@ -808,15 +1004,40 @@
     }
   };
 
-  Map.prototype.stopRefresh = function stopRefresh () {
+  BaseMap.prototype.stopRefresh = function stopRefresh () {
     if (this.intervalId) {
       clearInterval(this.intervalId);
       this.intervalId = null;
     }
   };
 
+  var Map = /*@__PURE__*/(function (BaseMap) {
+    function Map(element, data, options) {
+      BaseMap.call(this, element, data, options, "point");
+    }
+
+    if ( BaseMap ) Map.__proto__ = BaseMap;
+    Map.prototype = Object.create( BaseMap && BaseMap.prototype );
+    Map.prototype.constructor = Map;
+
+    return Map;
+  }(BaseMap));
+
+  var AreaMap = /*@__PURE__*/(function (BaseMap) {
+    function AreaMap(element, data, options) {
+      BaseMap.call(this, element, data, options, "area");
+    }
+
+    if ( BaseMap ) AreaMap.__proto__ = BaseMap;
+    AreaMap.prototype = Object.create( BaseMap && BaseMap.prototype );
+    AreaMap.prototype.constructor = AreaMap;
+
+    return AreaMap;
+  }(BaseMap));
+
   var Mapkick = {
     Map: Map,
+    AreaMap: AreaMap,
     maps: maps,
     options: {},
     library: null

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: mapkick-rb
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.1.3
 platform: ruby
 authors:
 - Andrew Kane
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-01-25 00:00:00.000000000 Z
+date: 2023-02-13 00:00:00.000000000 Z
 dependencies: []
 description:
 email: andrew@ankane.org
@@ -47,7 +47,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.4.1
+rubygems_version: 3.4.6
 signing_key:
 specification_version: 4
 summary: Create beautiful JavaScript maps with one line of Ruby