-
Notifications
You must be signed in to change notification settings - Fork 0
/
Leaflet.MakiMarkers.js
103 lines (92 loc) · 2.96 KB
/
Leaflet.MakiMarkers.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
/*
* Leaflet plugin to create map icons using Maki Icons from MapBox.
*
* References:
* Maki Icons: https://www.mapbox.com/maki/
* Mapbox Marker API: https://www.mapbox.com/api-documentation/#retrieve-a-standalone-marker
* Possible icon names: https://raw.githubusercontent.com/mapbox/maki/master/layouts/all.json
*
* Usage:
* L.MakiMarkers.accessToken = "<YOUR_ACCESS_TOKEN>";
* var icon = L.MakiMarkers.icon({icon: "rocket", color: "#b0b", size: "m"});
*
* License:
* MIT: http://jseppi.mit-license.org/
*/
/*global L:false */
(function () {
"use strict";
L.MakiMarkers = {
accessToken: null,
defaultColor: "#0a0",
defaultIcon: "circle-stroked",
defaultSize: "m",
apiUrl: "https://api.mapbox.com/v4/marker/",
smallOptions: {
iconSize: [20, 50],
popupAnchor: [0,-20]
},
mediumOptions: {
iconSize: [30,70],
popupAnchor: [0,-30]
},
largeOptions: {
iconSize: [36,90],
popupAnchor: [0,-40]
}
};
L.MakiMarkers.Icon = L.Icon.extend({
options: {
//Mapbox API access token, see https://www.mapbox.com/api-documentation/?language=CLI#access-tokens
//Instead of setting with each icon, you can set globally as L.MakiMarkers.accessToken
accessToken: null,
//Maki icon: any valid name, see https://raw.githubusercontent.com/mapbox/maki/master/layouts/all.json
icon: L.MakiMarkers.defaultIcon,
//Marker color: short or long form hex color code
color: L.MakiMarkers.defaultColor,
//Marker size: "s" (small), "m" (medium), or "l" (large)
size: L.MakiMarkers.defaultSize,
shadowAnchor: null,
shadowSize: null,
shadowUrl: null,
className: "maki-marker"
},
initialize: function(options) {
var pin;
var tokenQuery;
var accessToken = options.accessToken || L.MakiMarkers.accessToken;
if (!accessToken) {
throw new Error("Access to the Mapbox API requires a valid access token.");
}
tokenQuery = "?access_token=" + accessToken;
options = L.setOptions(this, options);
switch (options.size) {
case "s":
L.extend(options, L.MakiMarkers.smallOptions);
break;
case "l":
L.extend(options, L.MakiMarkers.largeOptions);
break;
default:
options.size = "m";
L.extend(options, L.MakiMarkers.mediumOptions);
break;
}
pin = "pin-" + options.size;
if (options.icon !== null) {
pin += "-" + options.icon;
}
if (options.color !== null) {
if (options.color.charAt(0) === "#") {
options.color = options.color.substr(1);
}
pin += "+" + options.color;
}
options.iconUrl = "" + L.MakiMarkers.apiUrl + pin + ".png" + tokenQuery;
options.iconRetinaUrl = L.MakiMarkers.apiUrl + pin + "@2x.png" + tokenQuery;
}
});
L.MakiMarkers.icon = function(options) {
return new L.MakiMarkers.Icon(options);
};
})();