mapkick-rb 0.1.1 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/CHANGELOG.md +9 -0
- data/README.md +39 -9
- data/lib/mapkick/helper.rb +13 -2
- data/lib/mapkick/version.rb +1 -1
- data/licenses/LICENSE-mapkick-bundle.txt +1 -1
- data/vendor/assets/javascripts/mapkick.bundle.js +288 -67
- metadata +3 -3
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 5af8b1f85970b613f96f189922c9be421f657e9c56d3986976ae3cdf366a9f2b
|
4
|
+
data.tar.gz: 4de73c3a4b3d91dc42b93a607cec9daa8a26adfbdba99a70bad660d38a0037dc
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: d3c4f0f38d8039fb1caf42fd5e45fd3abd5051ed90411ed38ee5a237b89cd3728fcfecef2189887e2649ad7397e20f49a984935567e8a7e0873ade87de5509fd
|
7
|
+
data.tar.gz: bc67f76b17cf72d8e2ad6f2a23408ca06c84c6fc06a118dedccd930b8a60838ac4a0e5ba013c6205a17155b6aaf6d79322cf9af7b03e82c0211a7cfbbd368fe9
|
data/CHANGELOG.md
CHANGED
data/README.md
CHANGED
@@ -16,7 +16,7 @@ Add this line to your application’s Gemfile:
|
|
16
16
|
gem "mapkick-rb"
|
17
17
|
```
|
18
18
|
|
19
|
-
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.
|
19
|
+
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).
|
20
20
|
|
21
21
|
Then follow the instructions for your JavaScript setup:
|
22
22
|
|
@@ -79,12 +79,18 @@ In `app/assets/javascripts/application.js`, add:
|
|
79
79
|
|
80
80
|
## Maps
|
81
81
|
|
82
|
-
|
82
|
+
Point map
|
83
83
|
|
84
84
|
```erb
|
85
85
|
<%= js_map [{latitude: 37.7829, longitude: -122.4190}] %>
|
86
86
|
```
|
87
87
|
|
88
|
+
Area map (experimental)
|
89
|
+
|
90
|
+
```erb
|
91
|
+
<%= area_map [{geometry: {type: "Polygon", coordinates: ...}}] %>
|
92
|
+
```
|
93
|
+
|
88
94
|
## Data
|
89
95
|
|
90
96
|
Data can be an array
|
@@ -99,16 +105,34 @@ Or a URL that returns JSON (same format as above)
|
|
99
105
|
<%= js_map cities_path %>
|
100
106
|
```
|
101
107
|
|
102
|
-
|
108
|
+
### Point Map
|
109
|
+
|
110
|
+
Use `latitude` or `lat` for latitude and `longitude`, `lon`, or `lng` for longitude
|
103
111
|
|
104
|
-
You can specify a label and
|
112
|
+
You can specify a label, tooltip, and color for each data point
|
105
113
|
|
106
|
-
```
|
114
|
+
```ruby
|
107
115
|
{
|
108
116
|
latitude: ...,
|
109
117
|
longitude: ...,
|
110
118
|
label: "Hot Chicken Takeover",
|
111
|
-
tooltip: "5 stars"
|
119
|
+
tooltip: "5 stars",
|
120
|
+
color: "#f84d4d"
|
121
|
+
}
|
122
|
+
```
|
123
|
+
|
124
|
+
### Area Map
|
125
|
+
|
126
|
+
Use `geometry` with a GeoJSON `Polygon` or `MultiPolygon`
|
127
|
+
|
128
|
+
You can specify a label, tooltip, and color for each data point
|
129
|
+
|
130
|
+
```ruby
|
131
|
+
{
|
132
|
+
geometry: {type: "Polygon", coordinates: ...},
|
133
|
+
label: "Hot Chicken Takeover",
|
134
|
+
tooltip: "5 stars",
|
135
|
+
color: "#0090ff"
|
112
136
|
}
|
113
137
|
```
|
114
138
|
|
@@ -120,16 +144,22 @@ Id, width, and height
|
|
120
144
|
<%= js_map data, id: "cities-map", width: "800px", height: "500px" %>
|
121
145
|
```
|
122
146
|
|
123
|
-
|
147
|
+
Marker color
|
124
148
|
|
125
149
|
```erb
|
126
150
|
<%= js_map data, markers: {color: "#f84d4d"} %>
|
127
151
|
```
|
128
152
|
|
129
|
-
|
153
|
+
Show tooltips on click instead of hover
|
154
|
+
|
155
|
+
```erb
|
156
|
+
<%= js_map data, tooltips: {hover: false} %>
|
157
|
+
```
|
158
|
+
|
159
|
+
Allow HTML in tooltips (must sanitize manually)
|
130
160
|
|
131
161
|
```erb
|
132
|
-
<%= js_map data, tooltips: {
|
162
|
+
<%= js_map data, tooltips: {html: true} %>
|
133
163
|
```
|
134
164
|
|
135
165
|
Map style
|
data/lib/mapkick/helper.rb
CHANGED
@@ -1,7 +1,17 @@
|
|
1
1
|
module Mapkick
|
2
2
|
module Helper
|
3
|
-
# don't break out options since need to merge with default options
|
4
3
|
def js_map(data_source, **options)
|
4
|
+
mapkick_map "Map", data_source, **options
|
5
|
+
end
|
6
|
+
|
7
|
+
def area_map(data_source, **options)
|
8
|
+
mapkick_map "AreaMap", data_source, **options
|
9
|
+
end
|
10
|
+
|
11
|
+
private
|
12
|
+
|
13
|
+
# don't break out options since need to merge with default options
|
14
|
+
def mapkick_map(type, data_source, **options)
|
5
15
|
options = Mapkick::Utils.deep_merge(Mapkick.options, options)
|
6
16
|
|
7
17
|
@mapkick_map_id ||= 0
|
@@ -67,6 +77,7 @@ module Mapkick
|
|
67
77
|
|
68
78
|
# js vars
|
69
79
|
js_vars = {
|
80
|
+
type: type,
|
70
81
|
id: element_id,
|
71
82
|
data: data_source,
|
72
83
|
options: options
|
@@ -74,7 +85,7 @@ module Mapkick
|
|
74
85
|
js_vars.each_key do |k|
|
75
86
|
js_vars[k] = Mapkick::Utils.json_escape(js_vars[k].to_json)
|
76
87
|
end
|
77
|
-
createjs = "new Mapkick
|
88
|
+
createjs = "new Mapkick[%{type}](%{id}, %{data}, %{options});" % js_vars
|
78
89
|
|
79
90
|
# don't rerun JS on preview
|
80
91
|
js = <<~JS
|
data/lib/mapkick/version.rb
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
/*
|
2
2
|
* This bundle includes:
|
3
3
|
*
|
4
|
-
* Mapkick.js v0.2.
|
4
|
+
* Mapkick.js v0.2.4
|
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
|
-
|
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);
|
@@ -304,7 +308,7 @@
|
|
304
308
|
|
305
309
|
var maps = {};
|
306
310
|
|
307
|
-
var
|
311
|
+
var BaseMap = function BaseMap(element, data, options, mapType) {
|
308
312
|
var this$1$1 = this;
|
309
313
|
|
310
314
|
if (!Mapkick.library && typeof window !== "undefined") {
|
@@ -405,24 +409,28 @@
|
|
405
409
|
element.textContent = message;
|
406
410
|
}
|
407
411
|
|
412
|
+
function errorCatcher(element, data, options, callback) {
|
413
|
+
try {
|
414
|
+
callback(element, data, options);
|
415
|
+
} catch (err) {
|
416
|
+
showError(element, err.message);
|
417
|
+
throw err
|
418
|
+
}
|
419
|
+
}
|
420
|
+
|
408
421
|
function fetchData(element, data, options, callback) {
|
409
422
|
if (typeof data === "string") {
|
410
423
|
getJSON(element, data, function (newData) {
|
411
|
-
|
424
|
+
errorCatcher(element, newData, options, callback);
|
412
425
|
});
|
413
426
|
} else if (typeof data === "function") {
|
414
|
-
|
415
|
-
|
416
|
-
|
417
|
-
|
418
|
-
|
419
|
-
});
|
420
|
-
} catch (err) {
|
421
|
-
showError(element, "Error");
|
422
|
-
throw err
|
423
|
-
}
|
427
|
+
data(function (newData) {
|
428
|
+
errorCatcher(element, newData, options, callback);
|
429
|
+
}, function (message) {
|
430
|
+
showError(element, message);
|
431
|
+
});
|
424
432
|
} else {
|
425
|
-
|
433
|
+
errorCatcher(element, data, options, callback);
|
426
434
|
}
|
427
435
|
}
|
428
436
|
|
@@ -436,6 +444,9 @@
|
|
436
444
|
});
|
437
445
|
}
|
438
446
|
|
447
|
+
// use Map instead of object for security
|
448
|
+
var markerIds = new window.Map();
|
449
|
+
|
439
450
|
function generateGeoJSON(data, options) {
|
440
451
|
var geojson = {
|
441
452
|
type: "FeatureCollection",
|
@@ -445,21 +456,60 @@
|
|
445
456
|
for (var i = 0; i < data.length; i++) {
|
446
457
|
var row = data[i];
|
447
458
|
var properties = Object.assign({}, row);
|
459
|
+
var geometry = (void 0);
|
460
|
+
|
461
|
+
if (mapType === "point") {
|
462
|
+
if (!properties.icon) {
|
463
|
+
properties.icon = options.defaultIcon || "mapkick";
|
464
|
+
}
|
465
|
+
properties.mapkickIconSize = properties.icon === "mapkick" ? 0.5 : 1;
|
466
|
+
properties.mapkickIconAnchor = properties.icon === "mapkick" ? "bottom" : "center";
|
467
|
+
properties.mapkickIconOffset = properties.icon === "mapkick" ? [0, 10] : [0, 0];
|
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
|
+
|
482
|
+
var coordinates = rowCoordinates(row);
|
483
|
+
|
484
|
+
if (!coordinates[1]) {
|
485
|
+
throw new Error(("missing latitude (index: " + i + ")"))
|
486
|
+
}
|
487
|
+
|
488
|
+
if (!coordinates[0]) {
|
489
|
+
throw new Error(("missing longitude (index: " + i + ")"))
|
490
|
+
}
|
491
|
+
|
492
|
+
geometry = {
|
493
|
+
type: "Point",
|
494
|
+
coordinates: coordinates
|
495
|
+
};
|
496
|
+
} else {
|
497
|
+
geometry = row.geometry;
|
498
|
+
|
499
|
+
if (!geometry) {
|
500
|
+
throw new Error(("missing geometry (index: " + i + ")"))
|
501
|
+
}
|
502
|
+
|
503
|
+
delete properties.geometry;
|
504
|
+
|
505
|
+
properties.mapkickColor = properties.color || markerOptions.color || "#0090ff";
|
448
506
|
|
449
|
-
if (!properties.icon) {
|
450
|
-
properties.icon = options.defaultIcon || "mapkick";
|
451
507
|
}
|
452
|
-
properties.mapkickIconSize = properties.icon === "mapkick" ? 0.5 : 1;
|
453
|
-
properties.mapkickIconAnchor = properties.icon === "mapkick" ? "bottom" : "center";
|
454
|
-
properties.mapkickIconOffset = properties.icon === "mapkick" ? [0, 10] : [0, 0];
|
455
508
|
|
456
509
|
geojson.features.push({
|
457
510
|
type: "Feature",
|
458
511
|
id: i,
|
459
|
-
geometry:
|
460
|
-
type: "Point",
|
461
|
-
coordinates: rowCoordinates(row),
|
462
|
-
},
|
512
|
+
geometry: geometry,
|
463
513
|
properties: properties
|
464
514
|
});
|
465
515
|
}
|
@@ -509,42 +559,146 @@
|
|
509
559
|
return geojson
|
510
560
|
}
|
511
561
|
|
562
|
+
function generateLabelGeoJSON(data) {
|
563
|
+
var geojson = {
|
564
|
+
type: "FeatureCollection",
|
565
|
+
features: []
|
566
|
+
};
|
567
|
+
|
568
|
+
for (var i = 0; i < data.features.length; i++) {
|
569
|
+
var feature = data.features[i];
|
570
|
+
var coordinates = (void 0);
|
571
|
+
|
572
|
+
// use center for now
|
573
|
+
var bounds = new library.LngLatBounds();
|
574
|
+
extendBounds(bounds, feature.geometry);
|
575
|
+
if (!bounds.isEmpty()) {
|
576
|
+
var center = bounds.getCenter();
|
577
|
+
coordinates = [center.lng, center.lat];
|
578
|
+
}
|
579
|
+
|
580
|
+
if (coordinates) {
|
581
|
+
geojson.features.push({
|
582
|
+
type: "Feature",
|
583
|
+
id: i,
|
584
|
+
geometry: {
|
585
|
+
type: "Point",
|
586
|
+
coordinates: coordinates
|
587
|
+
},
|
588
|
+
properties: feature.properties
|
589
|
+
});
|
590
|
+
}
|
591
|
+
}
|
592
|
+
|
593
|
+
return geojson
|
594
|
+
}
|
595
|
+
|
596
|
+
function layerBeforeFill(map) {
|
597
|
+
// place below labels
|
598
|
+
var layers = map.getStyle().layers;
|
599
|
+
var beforeId;
|
600
|
+
for (var i = layers.length - 1; i >= 0; i--) {
|
601
|
+
var layer = layers[i];
|
602
|
+
// TODO improve
|
603
|
+
if (!(layer.metadata && layer.metadata["mapbox:featureComponent"] === "place-labels")) {
|
604
|
+
break
|
605
|
+
}
|
606
|
+
beforeId = layer.id;
|
607
|
+
}
|
608
|
+
return beforeId
|
609
|
+
}
|
610
|
+
|
512
611
|
function addLayer(name, geojson) {
|
612
|
+
var centersById = {};
|
613
|
+
|
513
614
|
map.addSource(name, {
|
514
615
|
type: "geojson",
|
515
616
|
data: geojson
|
516
617
|
});
|
517
618
|
|
518
|
-
|
519
|
-
|
520
|
-
|
521
|
-
|
522
|
-
|
523
|
-
|
524
|
-
|
525
|
-
|
526
|
-
|
527
|
-
|
528
|
-
|
529
|
-
|
530
|
-
|
531
|
-
|
532
|
-
|
533
|
-
|
534
|
-
|
535
|
-
|
536
|
-
|
537
|
-
|
538
|
-
|
539
|
-
|
540
|
-
|
541
|
-
|
542
|
-
|
543
|
-
|
544
|
-
|
545
|
-
|
619
|
+
if (mapType === "point") {
|
620
|
+
// use a symbol layer for markers for performance
|
621
|
+
// https://docs.mapbox.com/help/getting-started/add-markers/#approach-1-adding-markers-inside-a-map
|
622
|
+
// use separate layers to prevent labels from overlapping markers
|
623
|
+
map.addLayer({
|
624
|
+
id: (name + "-text"),
|
625
|
+
source: name,
|
626
|
+
type: "symbol",
|
627
|
+
layout: {
|
628
|
+
"text-field": "{label}",
|
629
|
+
"text-size": 11,
|
630
|
+
"text-anchor": "top",
|
631
|
+
"text-offset": [0, 1]
|
632
|
+
},
|
633
|
+
paint: {
|
634
|
+
"text-halo-color": "rgba(255, 255, 255, 1)",
|
635
|
+
"text-halo-width": 1
|
636
|
+
}
|
637
|
+
});
|
638
|
+
map.addLayer({
|
639
|
+
id: name,
|
640
|
+
source: name,
|
641
|
+
type: "symbol",
|
642
|
+
layout: {
|
643
|
+
"icon-image": "{icon}-15",
|
644
|
+
"icon-allow-overlap": true,
|
645
|
+
"icon-size": {type: "identity", property: "mapkickIconSize"},
|
646
|
+
"icon-anchor": {type: "identity", property: "mapkickIconAnchor"},
|
647
|
+
"icon-offset": {type: "identity", property: "mapkickIconOffset"}
|
648
|
+
}
|
649
|
+
});
|
650
|
+
} else {
|
651
|
+
var beforeId = layerBeforeFill(map);
|
652
|
+
|
653
|
+
var outlineId = name + "-outline";
|
654
|
+
map.addLayer({
|
655
|
+
id: outlineId,
|
656
|
+
source: name,
|
657
|
+
type: "line",
|
658
|
+
paint: {
|
659
|
+
"line-color": {type: "identity", property: "mapkickColor"},
|
660
|
+
"line-opacity": 0.7,
|
661
|
+
"line-width": 1
|
662
|
+
}
|
663
|
+
}, beforeId);
|
664
|
+
|
665
|
+
map.addLayer({
|
666
|
+
id: name,
|
667
|
+
source: name,
|
668
|
+
type: "fill",
|
669
|
+
paint: {
|
670
|
+
"fill-color": {type: "identity", property: "mapkickColor"},
|
671
|
+
"fill-opacity": 0.3
|
672
|
+
}
|
673
|
+
}, outlineId);
|
674
|
+
|
675
|
+
var labelName = name + "-text";
|
676
|
+
var labelData = generateLabelGeoJSON(geojson);
|
677
|
+
|
678
|
+
for (var i = 0; i < labelData.features.length; i++) {
|
679
|
+
var feature = labelData.features[i];
|
680
|
+
centersById[feature.id] = feature.geometry.coordinates;
|
546
681
|
}
|
547
|
-
|
682
|
+
|
683
|
+
map.addSource(labelName, {
|
684
|
+
type: "geojson",
|
685
|
+
data: labelData
|
686
|
+
});
|
687
|
+
|
688
|
+
map.addLayer({
|
689
|
+
id: (name + "-text"),
|
690
|
+
source: labelName,
|
691
|
+
type: "symbol",
|
692
|
+
layout: {
|
693
|
+
"text-field": "{label}",
|
694
|
+
"text-size": 11
|
695
|
+
},
|
696
|
+
paint: {
|
697
|
+
"text-halo-color": "rgba(255, 255, 255, 1)",
|
698
|
+
"text-halo-width": 1
|
699
|
+
}
|
700
|
+
});
|
701
|
+
}
|
548
702
|
|
549
703
|
var hover = !("hover" in tooltipOptions) || tooltipOptions.hover;
|
550
704
|
|
@@ -582,7 +736,7 @@
|
|
582
736
|
return
|
583
737
|
}
|
584
738
|
|
585
|
-
if (feature.properties.icon
|
739
|
+
if (mapType === "point" && feature.properties.icon.startsWith("mapkick-")) {
|
586
740
|
popup.options.offset = {
|
587
741
|
"top": [0, 14],
|
588
742
|
"top-left": [0, 14],
|
@@ -597,8 +751,15 @@
|
|
597
751
|
popup.options.offset = 14;
|
598
752
|
}
|
599
753
|
|
754
|
+
var coordinates;
|
755
|
+
if (mapType === "point") {
|
756
|
+
coordinates = feature.geometry.coordinates;
|
757
|
+
} else {
|
758
|
+
coordinates = centersById[feature.id];
|
759
|
+
}
|
760
|
+
|
600
761
|
// add the tooltip
|
601
|
-
popup.setLngLat(
|
762
|
+
popup.setLngLat(coordinates);
|
602
763
|
if (tooltipOptions.html) {
|
603
764
|
popup.setHTML(tooltip);
|
604
765
|
} else {
|
@@ -612,7 +773,9 @@
|
|
612
773
|
popup._container.style.width = popup._container.offsetWidth + 1 + "px";
|
613
774
|
}
|
614
775
|
|
615
|
-
|
776
|
+
if (mapType !== "area") {
|
777
|
+
panMap(map, popup);
|
778
|
+
}
|
616
779
|
};
|
617
780
|
|
618
781
|
var getLatitude = function (feature) {
|
@@ -673,12 +836,31 @@
|
|
673
836
|
});
|
674
837
|
}
|
675
838
|
|
839
|
+
function extendBounds(bounds, geometry) {
|
840
|
+
if (geometry.type === "Point") {
|
841
|
+
bounds.extend(geometry.coordinates);
|
842
|
+
} else if (geometry.type === "Polygon") {
|
843
|
+
var coordinates = geometry.coordinates[0];
|
844
|
+
for (var j = 0; j < coordinates.length; j++) {
|
845
|
+
bounds.extend(coordinates[j]);
|
846
|
+
}
|
847
|
+
} else if (geometry.type === "MultiPolygon") {
|
848
|
+
var coordinates$1 = geometry.coordinates;
|
849
|
+
for (var j$1 = 0; j$1 < coordinates$1.length; j$1++) {
|
850
|
+
var polygon = coordinates$1[j$1][0];
|
851
|
+
for (var k = 0; k < polygon.length; k++) {
|
852
|
+
bounds.extend(polygon[k]);
|
853
|
+
}
|
854
|
+
}
|
855
|
+
}
|
856
|
+
}
|
857
|
+
|
676
858
|
var generateMap = function (element, data, options) {
|
677
859
|
var geojson = generateGeoJSON(data, options);
|
678
860
|
options = options || {};
|
679
861
|
|
680
862
|
for (var i = 0; i < geojson.features.length; i++) {
|
681
|
-
bounds
|
863
|
+
extendBounds(bounds, geojson.features[i].geometry);
|
682
864
|
}
|
683
865
|
|
684
866
|
// remove any child elements
|
@@ -748,10 +930,13 @@
|
|
748
930
|
});
|
749
931
|
}
|
750
932
|
|
751
|
-
var
|
752
|
-
|
753
|
-
|
754
|
-
|
933
|
+
var outstanding = markerIds.size;
|
934
|
+
|
935
|
+
function checkReady() {
|
936
|
+
if (outstanding !== 0) {
|
937
|
+
outstanding--;
|
938
|
+
return
|
939
|
+
}
|
755
940
|
|
756
941
|
addLayer("objects", geojson);
|
757
942
|
|
@@ -760,7 +945,18 @@
|
|
760
945
|
while ((cb = layersReadyQueue.shift())) {
|
761
946
|
cb();
|
762
947
|
}
|
948
|
+
}
|
949
|
+
|
950
|
+
// load marker images
|
951
|
+
markerIds.forEach(function (id, color) {
|
952
|
+
var image = createMarkerImage(library, color);
|
953
|
+
image.addEventListener("load", function () {
|
954
|
+
map.addImage(("mapkick-" + id + "-15"), image);
|
955
|
+
checkReady();
|
956
|
+
});
|
763
957
|
});
|
958
|
+
|
959
|
+
checkReady();
|
764
960
|
});
|
765
961
|
};
|
766
962
|
|
@@ -795,11 +991,11 @@
|
|
795
991
|
}
|
796
992
|
};
|
797
993
|
|
798
|
-
|
994
|
+
BaseMap.prototype.getMapObject = function getMapObject () {
|
799
995
|
return this.map
|
800
996
|
};
|
801
997
|
|
802
|
-
|
998
|
+
BaseMap.prototype.destroy = function destroy () {
|
803
999
|
this.stopRefresh();
|
804
1000
|
|
805
1001
|
if (this.map) {
|
@@ -808,15 +1004,40 @@
|
|
808
1004
|
}
|
809
1005
|
};
|
810
1006
|
|
811
|
-
|
1007
|
+
BaseMap.prototype.stopRefresh = function stopRefresh () {
|
812
1008
|
if (this.intervalId) {
|
813
1009
|
clearInterval(this.intervalId);
|
814
1010
|
this.intervalId = null;
|
815
1011
|
}
|
816
1012
|
};
|
817
1013
|
|
1014
|
+
var Map = /*@__PURE__*/(function (BaseMap) {
|
1015
|
+
function Map(element, data, options) {
|
1016
|
+
BaseMap.call(this, element, data, options, "point");
|
1017
|
+
}
|
1018
|
+
|
1019
|
+
if ( BaseMap ) Map.__proto__ = BaseMap;
|
1020
|
+
Map.prototype = Object.create( BaseMap && BaseMap.prototype );
|
1021
|
+
Map.prototype.constructor = Map;
|
1022
|
+
|
1023
|
+
return Map;
|
1024
|
+
}(BaseMap));
|
1025
|
+
|
1026
|
+
var AreaMap = /*@__PURE__*/(function (BaseMap) {
|
1027
|
+
function AreaMap(element, data, options) {
|
1028
|
+
BaseMap.call(this, element, data, options, "area");
|
1029
|
+
}
|
1030
|
+
|
1031
|
+
if ( BaseMap ) AreaMap.__proto__ = BaseMap;
|
1032
|
+
AreaMap.prototype = Object.create( BaseMap && BaseMap.prototype );
|
1033
|
+
AreaMap.prototype.constructor = AreaMap;
|
1034
|
+
|
1035
|
+
return AreaMap;
|
1036
|
+
}(BaseMap));
|
1037
|
+
|
818
1038
|
var Mapkick = {
|
819
1039
|
Map: Map,
|
1040
|
+
AreaMap: AreaMap,
|
820
1041
|
maps: maps,
|
821
1042
|
options: {},
|
822
1043
|
library: null
|
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.
|
4
|
+
version: 0.1.3
|
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-
|
11
|
+
date: 2023-02-13 00:00:00.000000000 Z
|
12
12
|
dependencies: []
|
13
13
|
description:
|
14
14
|
email: andrew@ankane.org
|
@@ -47,7 +47,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
47
47
|
- !ruby/object:Gem::Version
|
48
48
|
version: '0'
|
49
49
|
requirements: []
|
50
|
-
rubygems_version: 3.4.
|
50
|
+
rubygems_version: 3.4.6
|
51
51
|
signing_key:
|
52
52
|
specification_version: 4
|
53
53
|
summary: Create beautiful JavaScript maps with one line of Ruby
|