mapkick-rb 0.1.2 → 0.1.4

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 6040b675cb3aebd2b20f20fb679d6dbd8da27282bfca83a2a3063ed8ebf9a593
4
- data.tar.gz: 0b1de6cbd644d9d9f5eb52ec854403c47218fc2198e00a23d5d435420b2b68c4
3
+ metadata.gz: f5a2b37b33ecba167e0844af635b9a87a3afad84eb92b06e19cd3db6ecf6ceb8
4
+ data.tar.gz: db38e21238698891fa79c21dfcafddba4b97fe3e4b31a91083871279a90836bb
5
5
  SHA512:
6
- metadata.gz: f312d4524c8705ed35a2f4d6d51d3cc1651156e93ac335c22d74ae5a143687303a3062b8877c92008836c3db50fdfa62c59238cddf2448a82448f5565e73399f
7
- data.tar.gz: da747aaa4b2bb078f981d5de52ba4c61fa9070c46e8ce6ff2364be7ec2c188077d717b31d1e69063ecbdafc2b26d4dbfb4094165a3ceba91739e8b3bdaecb588
6
+ metadata.gz: 54729a215c5960c9b73395d98a395941231fa76b6e7b8c9c4d85364f5299e6c4032ac66d08988b236a4fe06a0f40018be997eb53822d44c11003671c4143e43b
7
+ data.tar.gz: 303226c8be546b020ff81054559f8cff01560ac5a1c26f30f97b1931e1990dcb9186db4a6a885530b80714e89db3de92881f554253ec6c164a47794a3b787034
data/CHANGELOG.md CHANGED
@@ -1,3 +1,11 @@
1
+ ## 0.1.4 (2023-03-11)
2
+
3
+ - Updated Mapkick.js to 0.2.5
4
+
5
+ ## 0.1.3 (2023-02-13)
6
+
7
+ - Updated Mapkick.js to 0.2.4
8
+
1
9
  ## 0.1.2 (2023-02-08)
2
10
 
3
11
  - Updated Mapkick.js to 0.2.3
data/README.md CHANGED
@@ -109,14 +109,15 @@ Or a URL that returns JSON (same format as above)
109
109
 
110
110
  Use `latitude` or `lat` for latitude and `longitude`, `lon`, or `lng` for longitude
111
111
 
112
- You can specify a label and tooltip for each data point
112
+ You can specify a label, tooltip, and color for each data point
113
113
 
114
114
  ```ruby
115
115
  {
116
116
  latitude: ...,
117
117
  longitude: ...,
118
118
  label: "Hot Chicken Takeover",
119
- tooltip: "5 stars"
119
+ tooltip: "5 stars",
120
+ color: "#f84d4d"
120
121
  }
121
122
  ```
122
123
 
@@ -124,13 +125,14 @@ You can specify a label and tooltip for each data point
124
125
 
125
126
  Use `geometry` with a GeoJSON `Polygon` or `MultiPolygon`
126
127
 
127
- You can specify a label and tooltip for each data point
128
+ You can specify a label, tooltip, and color for each data point
128
129
 
129
130
  ```ruby
130
131
  {
131
132
  geometry: {type: "Polygon", coordinates: ...},
132
133
  label: "Hot Chicken Takeover",
133
- tooltip: "5 stars"
134
+ tooltip: "5 stars",
135
+ color: "#0090ff"
134
136
  }
135
137
  ```
136
138
 
@@ -194,10 +196,6 @@ Download [mapkick.bundle.js](https://raw.githubusercontent.com/ankane/mapkick/ma
194
196
  <script src="mapkick.bundle.js"></script>
195
197
  ```
196
198
 
197
- ## No Ruby? No Problem
198
-
199
- Check out [mapkick.js](https://github.com/ankane/mapkick.js)
200
-
201
199
  ## History
202
200
 
203
201
  View the [changelog](CHANGELOG.md)
@@ -1,3 +1,3 @@
1
1
  module Mapkick
2
- VERSION = "0.1.2"
2
+ VERSION = "0.1.4"
3
3
  end
@@ -1,5 +1,5 @@
1
1
  ================================================================================
2
- Mapkick.js 0.2.3
2
+ Mapkick.js 0.2.5
3
3
  ================================================================================
4
4
 
5
5
  Copyright (c) 2017-2023 Andrew Kane
@@ -1,7 +1,7 @@
1
1
  /*
2
2
  * This bundle includes:
3
3
  *
4
- * Mapkick.js v0.2.3
4
+ * Mapkick.js v0.2.5
5
5
  * https://github.com/ankane/mapkick.js
6
6
  * MIT License
7
7
  *
@@ -260,6 +260,13 @@
260
260
  return element
261
261
  }
262
262
 
263
+ // check for hex or named color
264
+ function validateColor(color) {
265
+ if (!/^#([0-9a-f]{3}){1,2}$/i.test(color) && !/^[a-z]+$/i.test(color)) {
266
+ throw new Error("Invalid color")
267
+ }
268
+ }
269
+
263
270
  function createMarkerImage(library, color) {
264
271
  // set height to center vertically
265
272
  var height = 41;
@@ -276,10 +283,7 @@
276
283
  svg.setAttribute("width", width);
277
284
  svg.setAttribute("viewBox", ("0 0 " + width + " " + height));
278
285
 
279
- // check for hex or named color
280
- if (!/^#([0-9a-f]{3}){1,2}$/i.test(color) && !/^[a-z]+$/i.test(color)) {
281
- throw new Error("Invalid color")
282
- }
286
+ validateColor(color);
283
287
 
284
288
  // set color
285
289
  svg.querySelector("*[fill='#3FB1CE']").setAttribute("fill", color);
@@ -440,6 +444,9 @@
440
444
  });
441
445
  }
442
446
 
447
+ // use Map instead of object for security
448
+ var markerIds = new window.Map();
449
+
443
450
  function generateGeoJSON(data, options) {
444
451
  var geojson = {
445
452
  type: "FeatureCollection",
@@ -459,6 +466,19 @@
459
466
  properties.mapkickIconAnchor = properties.icon === "mapkick" ? "bottom" : "center";
460
467
  properties.mapkickIconOffset = properties.icon === "mapkick" ? [0, 10] : [0, 0];
461
468
 
469
+ if (properties.icon === "mapkick") {
470
+ var color = properties.color || markerOptions.color || "#f84d4d";
471
+
472
+ var markerId = markerIds.get(color);
473
+ if (markerId === undefined) {
474
+ markerId = markerIds.size;
475
+ validateColor(color);
476
+ markerIds.set(color, markerId);
477
+ }
478
+
479
+ properties.icon = "mapkick-" + markerId;
480
+ }
481
+
462
482
  var coordinates = rowCoordinates(row);
463
483
 
464
484
  if (!coordinates[1]) {
@@ -481,6 +501,9 @@
481
501
  }
482
502
 
483
503
  delete properties.geometry;
504
+
505
+ properties.mapkickColor = properties.color || markerOptions.color || "#0090ff";
506
+
484
507
  }
485
508
 
486
509
  geojson.features.push({
@@ -625,8 +648,6 @@
625
648
  }
626
649
  });
627
650
  } else {
628
- var fillColor = markerOptions.color || "#0090ff";
629
-
630
651
  var beforeId = layerBeforeFill(map);
631
652
 
632
653
  var outlineId = name + "-outline";
@@ -635,7 +656,7 @@
635
656
  source: name,
636
657
  type: "line",
637
658
  paint: {
638
- "line-color": fillColor,
659
+ "line-color": {type: "identity", property: "mapkickColor"},
639
660
  "line-opacity": 0.7,
640
661
  "line-width": 1
641
662
  }
@@ -646,7 +667,7 @@
646
667
  source: name,
647
668
  type: "fill",
648
669
  paint: {
649
- "fill-color": fillColor,
670
+ "fill-color": {type: "identity", property: "mapkickColor"},
650
671
  "fill-opacity": 0.3
651
672
  }
652
673
  }, outlineId);
@@ -715,7 +736,7 @@
715
736
  return
716
737
  }
717
738
 
718
- if (feature.properties.icon === "mapkick") {
739
+ if (mapType === "point" && feature.properties.icon.startsWith("mapkick-")) {
719
740
  popup.options.offset = {
720
741
  "top": [0, 14],
721
742
  "top-left": [0, 14],
@@ -855,13 +876,26 @@
855
876
  }
856
877
  }
857
878
 
879
+ var zoom = options.zoom;
880
+ var center = options.center;
881
+ if (!center) {
882
+ if (!bounds.isEmpty()) {
883
+ center = bounds.getCenter();
884
+ } else {
885
+ center = [0, 0];
886
+ if (!zoom) {
887
+ zoom = 1;
888
+ }
889
+ }
890
+ }
891
+
858
892
  var mapOptions = {
859
893
  container: element,
860
894
  style: style,
861
895
  dragRotate: false,
862
896
  touchZoomRotate: false,
863
- center: options.center || bounds.getCenter(),
864
- zoom: options.zoom || 15
897
+ center: center,
898
+ zoom: zoom || 15
865
899
  };
866
900
  if (!options.style) {
867
901
  mapOptions.projection = "mercator";
@@ -880,7 +914,10 @@
880
914
  if (!map.style.stylesheet) {
881
915
  map.style.stylesheet = {};
882
916
  }
883
- map.fitBounds(bounds, {padding: 40, animate: false, maxZoom: 15});
917
+
918
+ if (!bounds.isEmpty()) {
919
+ map.fitBounds(bounds, {padding: 40, animate: false, maxZoom: 15});
920
+ }
884
921
  }
885
922
 
886
923
  this$1$1.map = map;
@@ -909,10 +946,13 @@
909
946
  });
910
947
  }
911
948
 
912
- var color = markerOptions.color || "#f84d4d";
913
- var image = createMarkerImage(library, color);
914
- image.addEventListener("load", function () {
915
- map.addImage("mapkick-15", image);
949
+ var outstanding = markerIds.size;
950
+
951
+ function checkReady() {
952
+ if (outstanding !== 0) {
953
+ outstanding--;
954
+ return
955
+ }
916
956
 
917
957
  addLayer("objects", geojson);
918
958
 
@@ -921,7 +961,18 @@
921
961
  while ((cb = layersReadyQueue.shift())) {
922
962
  cb();
923
963
  }
964
+ }
965
+
966
+ // load marker images
967
+ markerIds.forEach(function (id, color) {
968
+ var image = createMarkerImage(library, color);
969
+ image.addEventListener("load", function () {
970
+ map.addImage(("mapkick-" + id + "-15"), image);
971
+ checkReady();
972
+ });
924
973
  });
974
+
975
+ checkReady();
925
976
  });
926
977
  };
927
978
 
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: mapkick-rb
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.1.2
4
+ version: 0.1.4
5
5
  platform: ruby
6
6
  authors:
7
7
  - Andrew Kane
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2023-02-08 00:00:00.000000000 Z
11
+ date: 2023-03-11 00:00:00.000000000 Z
12
12
  dependencies: []
13
13
  description:
14
14
  email: andrew@ankane.org