mapkick-rb 0.1.0 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7678cfa0645e5386090c2ce73f06ffca32e0cbe3d3643b23d241ac80036d8c9d
-  data.tar.gz: 348c96a8b02cc983dda7fcc4a655bd2bb276d20b210290d6cce424b669449eac
+  metadata.gz: 6040b675cb3aebd2b20f20fb679d6dbd8da27282bfca83a2a3063ed8ebf9a593
+  data.tar.gz: 0b1de6cbd644d9d9f5eb52ec854403c47218fc2198e00a23d5d435420b2b68c4
 SHA512:
-  metadata.gz: 466776e05996b2a6cd0144c7f68e627696b6bbf85742f700ceab060a347a444a8152aa2b8fe6f30d4f0ca677985e5cbc93b7ea80c9c736500ab6e609ae620f04
-  data.tar.gz: 68f2cf1f40bdd1242a2b91ade1bfce042bf2a234c23a64ec87b9989bf6708adcbe822d11e2c477714f989ec151b15358ac082773593f0ad400730c169d12b7a2
+  metadata.gz: f312d4524c8705ed35a2f4d6d51d3cc1651156e93ac335c22d74ae5a143687303a3062b8877c92008836c3db50fdfa62c59238cddf2448a82448f5565e73399f
+  data.tar.gz: da747aaa4b2bb078f981d5de52ba4c61fa9070c46e8ce6ff2364be7ec2c188077d717b31d1e69063ecbdafc2b26d4dbfb4094165a3ceba91739e8b3bdaecb588

data/CHANGELOG.md

@@ -1,3 +1,12 @@
+## 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
+
 ## 0.1.0 (2023-01-19)
 
 - First release

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,10 +79,16 @@ In `app/assets/javascripts/application.js`, add:
 
 ## Maps
 
-Create a map
+Point map
 
 ```erb
-<%= js_map [{latitude: 1.23, longitude: 4.56}] %>
+<%= js_map [{latitude: 37.7829, longitude: -122.4190}] %>
+```
+
+Area map (experimental)
+
+```erb
+<%= area_map [{geometry: {type: "Polygon", coordinates: ...}}] %>
 ```
 
 ## Data
@@ -90,7 +96,7 @@ Create a map
 Data can be an array
 
 ```erb
-<%= js_map [{latitude: 1.23, longitude: 4.56}] %>
+<%= js_map [{latitude: 37.7829, longitude: -122.4190}] %>
 ```
 
 Or a URL that returns JSON (same format as above)
@@ -99,11 +105,13 @@ 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
 
-```javascript
+```ruby
 {
   latitude: ...,
   longitude: ...,
@@ -112,6 +120,20 @@ You can specify a label and tooltip for each data point
 }
 ```
 
+### Area Map
+
+Use `geometry` with a GeoJSON `Polygon` or `MultiPolygon`
+
+You can specify a label and tooltip for each data point
+
+```ruby
+{
+  geometry: {type: "Polygon", coordinates: ...},
+  label: "Hot Chicken Takeover",
+  tooltip: "5 stars"
+}
+```
+
 ## Options
 
 Id, width, and height
@@ -120,16 +142,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
@@ -160,7 +188,7 @@ Mapkick.options[:height] = "400px"
 
 ## Sinatra and Padrino
 
-Download [mapkick.bundle.js](https://raw.githubusercontent.com/ankane/mapkick/master/vendor/assets/javascripts/mapkick.js) and include it manually.
+Download [mapkick.bundle.js](https://raw.githubusercontent.com/ankane/mapkick/master/vendor/assets/javascripts/mapkick.bundle.js) and include it manually.
 
 ```html
 <script src="mapkick.bundle.js"></script>

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.0"
+  VERSION = "0.1.2"
 end

data/licenses/LICENSE-mapkick-bundle.txt

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

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

@@ -1,7 +1,7 @@
 /*
  * This bundle includes:
  *
- * Mapkick.js v0.2.1
+ * Mapkick.js v0.2.3
  * https://github.com/ankane/mapkick.js
  * MIT License
  *
@@ -262,7 +262,7 @@
 
   function createMarkerImage(library, color) {
     // set height to center vertically
-    var height = 71;
+    var height = 41;
     var width = 27;
     var scale = 2;
 
@@ -304,7 +304,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 +405,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);
       }
     }
 
@@ -445,19 +449,44 @@
       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];
+
+          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 + ")"))
+          }
 
-        if (!properties.icon) {
-          properties.icon = options.defaultIcon || "mapkick";
+          delete properties.geometry;
         }
-        properties.mapkickIconSize = properties.icon === "mapkick" ? 0.5 : 1;
 
         geojson.features.push({
           type: "Feature",
           id: i,
-          geometry: {
-            type: "Point",
-            coordinates: rowCoordinates(row),
-          },
+          geometry: geometry,
           properties: properties
         });
       }
@@ -507,29 +536,148 @@
       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
-      map.addLayer({
-        id: name,
-        source: name,
-        type: "symbol",
-        layout: {
-          "icon-image": "{icon}-15",
-          "icon-allow-overlap": true,
-          "icon-size": {type: "identity", property: "mapkickIconSize"},
-          "text-field": "{label}",
-          "text-size": 11,
-          "text-anchor": "top",
-          "text-offset": [0, 1],
-          "text-allow-overlap": true
+      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 fillColor = markerOptions.color || "#0090ff";
+
+        var beforeId = layerBeforeFill(map);
+
+        var outlineId = name + "-outline";
+        map.addLayer({
+          id: outlineId,
+          source: name,
+          type: "line",
+          paint: {
+            "line-color": fillColor,
+            "line-opacity": 0.7,
+            "line-width": 1
+          }
+        }, beforeId);
+
+        map.addLayer({
+          id: name,
+          source: name,
+          type: "fill",
+          paint: {
+            "fill-color": fillColor,
+            "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,8 +730,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 {
@@ -597,7 +752,9 @@
           popup._container.style.width = popup._container.offsetWidth + 1 + "px";
         }
 
-        panMap(map, popup);
+        if (mapType !== "area") {
+          panMap(map, popup);
+        }
       };
 
       var getLatitude = function (feature) {
@@ -658,12 +815,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
@@ -780,11 +956,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) {
@@ -793,15 +969,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.0
+  version: 0.1.2
 platform: ruby
 authors:
 - Andrew Kane
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-01-20 00:00:00.000000000 Z
+date: 2023-02-08 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