diff --git a/Leaflet.MakiMarkers.js b/Leaflet.MakiMarkers.js index 25f53ab..cef438d 100644 --- a/Leaflet.MakiMarkers.js +++ b/Leaflet.MakiMarkers.js @@ -3,9 +3,10 @@ * * References: * Maki Icons: https://www.mapbox.com/maki/ - * MapBox Marker API: https://www.mapbox.com/developers/api/static/#markers + * Mapbox Marker API: https://www.mapbox.com/api-documentation/#retrieve-a-standalone-marker * * Usage: + * L.MakiMarkers.accessToken = ""; * var icon = L.MakiMarkers.icon({icon: "rocket", color: "#b0b", size: "m"}); * * License: @@ -32,6 +33,7 @@ "swimming","telephone","tennis","theatre","toilets","town-hall","town","triangle-stroked", "triangle","village","warehouse","waste-basket","water","wetland","zoo" ], + accessToken: null, defaultColor: "#0a0", defaultIcon: "circle-stroked", defaultSize: "m", @@ -50,8 +52,6 @@ } }; - L.MakiMarkers.accessToken = null; - L.MakiMarkers.Icon = L.Icon.extend({ options: { //Mapbox API access token, see https://www.mapbox.com/api-documentation/?language=CLI#access-tokens @@ -94,7 +94,6 @@ break; } - pin = "pin-" + options.size; if (options.icon !== null) { @@ -109,8 +108,6 @@ pin += "+" + options.color; } - - options.iconUrl = "" + L.MakiMarkers.apiUrl + pin + ".png" + tokenQuery; options.iconRetinaUrl = L.MakiMarkers.apiUrl + pin + "@2x.png" + tokenQuery; } diff --git a/README.md b/README.md index 047f5ef..e0b766c 100644 --- a/README.md +++ b/README.md @@ -1,15 +1,17 @@ # Leaflet.MakiMarkers -[Leaflet](http://www.leafletjs.com) plugin to create map icons using [Maki Icons](https://www.mapbox.com/maki/) from Mapbox. Markers are retrieved from Mapbox's [Static Marker API](https://www.mapbox.com/developers/api/static/#markers). +[Leaflet](http://www.leafletjs.com) plugin to create map icons using [Maki Icons](https://www.mapbox.com/maki/) from Mapbox. Markers are retrieved from Mapbox's [Static Marker API](https://www.mapbox.com/api-documentation/#retrieve-a-standalone-marker). -[![Screenshot](https://raw.github.com/jseppi/Leaflet.MakiMarkers/master/images/screenshot.png "Screenshot of MakiMarkers")](http://jsfiddle.net/Zhzvp/) +[![Screenshot](https://raw.github.com/jseppi/Leaflet.MakiMarkers/master/images/screenshot.png "Screenshot of MakiMarkers")] ## Usage -Simply include `Leaflet.MakiMarkers.js` in your page after you include `Leaflet.js`: `` +Include `Leaflet.MakiMarkers.js` in your page after you include `Leaflet.js`: `` + +The most recent version of Mapbox's static API (v4) requires that a valid access token be specified with every request. Please see https://www.mapbox.com/api-documentation/?language=CLI#access-tokens for more information. ```js -//First, specify a valid Mapbox API access token (see https://www.mapbox.com/api-documentation/?language=CLI#access-tokens) +//First, specify your Mapbox API access token L.MakiMarkers.accessToken = ""; // Specify a Maki icon name, hex color, and size (s, m, or l). @@ -20,8 +22,6 @@ var icon = L.MakiMarkers.icon({icon: "rocket", color: "#b0b", size: "m"}); L.marker([30.287, -97.72], {icon: icon}).addTo(map); ``` -[JSFiddle Demo](http://jsfiddle.net/Zhzvp/26/) - ## Requirements [Leaflet](http://www.leafletjs.com) 0.5+