Merge pull request #9 from jseppi/mapbox-api-v4

Use Mapbox API v4
jseppi · Apr 30, 2016 · 36fdc43 · 36fdc43
2 parents 88542d0 + 980f2dc
commit 36fdc43
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 11 deletions.
diff --git 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 = "<YOUR_ACCESS_TOKEN>";
  *   var icon = L.MakiMarkers.icon({icon: "rocket", color: "#b0b", size: "m"});
  *
  * License:
@@ -32,10 +33,11 @@
       "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",
-    apiUrl: "https://api.tiles.mapbox.com/v3/marker/",
+    apiUrl: "https://api.mapbox.com/v4/marker/",
     smallOptions: {
       iconSize: [20, 50],
       popupAnchor: [0,-20]
@@ -52,6 +54,9 @@
 
   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 from https://www.mapbox.com/maki/ (ref: L.MakiMarkers.icons)
       icon: L.MakiMarkers.defaultIcon,
       //Marker color: short or long form hex color code
@@ -66,7 +71,14 @@
 
     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) {
@@ -82,7 +94,6 @@
           break;
       }
 
-
       pin = "pin-" + options.size;
 
       if (options.icon !== null) {
@@ -97,8 +108,8 @@
         pin += "+" + options.color;
       }
 
-      options.iconUrl = "" + L.MakiMarkers.apiUrl + pin +  ".png";
-      options.iconRetinaUrl = L.MakiMarkers.apiUrl + pin + "@2x.png";
+      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
@@ -1,14 +1,19 @@
 # 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`: `<script src="Leaflet.MakiMarkers.js"></script>`
+Include `Leaflet.MakiMarkers.js` in your page after you include `Leaflet.js`: `<script src="Leaflet.MakiMarkers.js"></script>`
+
+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 your Mapbox API access token
+L.MakiMarkers.accessToken = "<YOUR_ACCESS_TOKEN>";
+
 // Specify a Maki icon name, hex color, and size (s, m, or l).
 // An array of icon names can be found in L.MakiMarkers.icons or at https://www.mapbox.com/maki/
 // Lowercase letters a-z and digits 0-9 can also be used. A value of null will result in no icon.
@@ -17,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+

diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "Leaflet.MakiMarkers",
   "main": "Leaflet.MakiMarkers.js",
-  "version": "1.0.1",
+  "version": "2.0.0",
   "homepage": "https://github.com/jseppi/Leaflet.MakiMarkers",
   "authors": [
     "James Seppi <james.seppi@gmail.com>"

diff --git a/index.html b/index.html
@@ -15,6 +15,13 @@
     <div id="map" style="width: 600px; height: 400px"></div>
 
     <script>
+        //Request access token (see https://www.mapbox.com/api-documentation/?language=CLI#access-tokens)
+        var accessToken = prompt("Please enter your Mapbox API access token");
+        if (!accessToken) {
+            alert("Valid Mapbox API access token is required");
+        }
+        L.MakiMarkers.accessToken = accessToken;
+
         var map = L.map('map').setView([30.289, -97.74], 12);
 
         L.tileLayer('http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {