update to use mapbox v4 api

jseppi · Apr 30, 2016 · cca7546 · cca7546
1 parent 88542d0
commit cca7546
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 4 deletions.
diff --git a/Leaflet.MakiMarkers.js b/Leaflet.MakiMarkers.js
@@ -35,7 +35,7 @@
     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]
@@ -50,8 +50,13 @@
     }
   };
 
+  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
+      //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) {
@@ -97,8 +109,10 @@
         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
@@ -9,6 +9,9 @@
 Simply include `Leaflet.MakiMarkers.js` in your page after you include `Leaflet.js`: `<script src="Leaflet.MakiMarkers.js"></script>`
 
 ```js
+//First, specify a valid Mapbox API access token (see https://www.mapbox.com/api-documentation/?language=CLI#access-tokens)
+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.

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 <[email protected]>"

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', {