Allow null icon and color; add iconRetinaUrl

jseppi · Mar 5, 2014 · c275548 · c275548
1 parent ff79075
commit c275548
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 33 deletions.
diff --git a/Leaflet.MakiMarkers.js b/Leaflet.MakiMarkers.js
@@ -1,4 +1,3 @@
-
 /*
  * Leaflet plugin to create map icons using Maki Icons from MapBox.
  *
@@ -12,29 +11,27 @@
  * License:
  *   MIT: http://jseppi.mit-license.org/
  */
+ /*global L:false */
 (function () {
   "use strict";
   L.MakiMarkers = {
     // Available Maki Icons
-    icons: ["circle-stroked", "circle", "square-stroked", "square",
-      "triangle-stroked", "triangle", "star-stroked", "star", "cross",
-      "marker-stroked", "marker", "religious-jewish", "religious-christian",
-      "religious-muslim", "cemetery", "rocket", "airport", "heliport", "rail",
-      "rail-metro", "rail-light", "bus", "fuel", "parking", "parking-garage",
-      "airfield", "roadblock", "ferry", "harbor", "bicycle", "park", "park2",
-      "museum", "lodging", "monument", "zoo", "garden", "campsite", "theatre",
-      "art-gallery", "pitch", "soccer", "america-football", "tennis", "basketball",
-      "baseball", "golf", "swimming", "cricket", "skiing", "school", "college",
-      "library", "post", "fire-station", "town-hall", "police", "prison",
-      "embassy", "beer", "restaurant", "cafe", "shop", "fast-food", "bar", "bank",
-      "grocery", "cinema", "pharmacy", "hospital", "danger", "industrial",
-      "warehouse", "commercial", "building", "place-of-worship", "alcohol-shop",
-      "logging", "oil-well", "slaughterhouse", "dam", "water", "wetland",
-      "disability", "telephone", "emergency-telephone", "toilets", "waste-basket",
-      "music", "land-use", "city", "town", "village", "farm", "bakery", "dog-park",
-      "lighthouse", "clothing-store", "polling-place", "playground", "entrance",
-      "heart", "london-underground", "minefield", "rail-underground", "rail-above",
-      "camera", "laundry", "car", "suitcase", "hairdresser", "chemist"],
+    icons: ["airfield","airport","alcohol-shop","america-football","art-gallery","bakery","bank","bar",
+      "baseball","basketball","beer","bicycle","building","bus","cafe","camera","campsite","car",
+      "cemetery","chemist","cinema","circle-stroked","circle","city","clothing-store","college",
+      "commercial","cricket","cross","dam","danger","disability","dog-park","embassy",
+      "emergency-telephone","entrance","farm","fast-food","ferry","fire-station","fuel","garden",
+      "golf","grocery","hairdresser","harbor","heart","heliport","hospital","industrial",
+      "land-use","laundry","library","lighthouse","lodging","logging","london-underground",
+      "marker-stroked","marker","minefield","mobilephone","monument","museum","music","oil-well",
+      "park2","park","parking-garage","parking","pharmacy","pitch","place-of-worship",
+      "playground","police","polling-place","post","prison","rail-above","rail-light",
+      "rail-metro","rail-underground","rail","religious-christian","religious-jewish",
+      "religious-muslim","restaurant","roadblock","rocket","school","scooter","shop","skiing",
+      "slaughterhouse","soccer","square-stroked","square","star-stroked","star","suitcase",
+      "swimming","telephone","tennis","theatre","toilets","town-hall","town","triangle-stroked",
+      "triangle","village","warehouse","waste-basket","water","wetland","zoo"
+    ],
     defaultColor: "#0a0",
     defaultIcon: "circle-stroked",
     defaultSize: "m",
@@ -64,7 +61,7 @@
       shadowAnchor: null,
       shadowSize: null,
       shadowUrl: null,
-      className: 'maki-marker'
+      className: "maki-marker"
     },
 
     initialize: function(options) {
@@ -85,14 +82,23 @@
           break;
       }
 
-      if (options.color.charAt(0) === '#') {
-        options.color = options.color.substr(1);
+
+      pin = "pin-" + options.size;
+
+      if (options.icon !== null) {
+        pin += "-" + options.icon;
       }
 
-      pin = "pin-" + options.size + "-" + options.icon + "+" +
-        options.color + ".png";
+      if (options.color !== null) {
+        if (options.color.charAt(0) === "#") {
+          options.color = options.color.substr(1);
+        }
+
+        pin += "+" + options.color;
+      }
 
-      options.iconUrl = "" + L.MakiMarkers.apiUrl + pin;
+      options.iconUrl = "" + L.MakiMarkers.apiUrl + pin +  ".png";
+      options.iconRetinaUrl = L.MakiMarkers.apiUrl + pin + "@2x.png";
     }
   });
 

diff --git a/README.md b/README.md
@@ -7,9 +7,9 @@
 ## Usage
 
 Simply include `Leaflet.MakiMarkers.js` in your page after you include `Leaflet.js`: `<script src="Leaflet.MakiMarkers.js"></script>`
-  
+
 ```js
-// Specify a Maki icon name, hex color, and size (s, m, or l)
+// Specify a Maki icon name, hex color, and size (s, m, or l), or null for no icon
 // 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.
 var icon = L.MakiMarkers.icon({icon: "rocket", color: "#b0b", size: "m"});

diff --git a/index.html b/index.html
@@ -30,7 +30,7 @@
         });
 
         L.marker([30.287, -97.72], {icon: rocketIcon}).addTo(map)
-            .bindPopup("<b>Medium Rocket!</b>");
+            .bindPopup("<strong>Medium Rocket!</strong>");
 
         var beerIcon = L.MakiMarkers.icon({
             icon: "beer",
@@ -39,17 +39,37 @@
         });
 
         L.marker([30.31096, -97.74277], {icon: beerIcon}).addTo(map)
-            .bindPopup("<b>Large Beer!</b>");
+            .bindPopup("<strong>Large Beer!</strong>");
 
         var warehouseIcon = L.MakiMarkers.icon({
             icon: "warehouse",
             color: "#0a0",
-            size: "s",
-            iconSize: [20, 50]
+            size: "s"
         });
 
         L.marker([30.26672, -97.74541], {icon: warehouseIcon}).addTo(map)
-            .bindPopup("<b>Small Warehouse!</b>");
+            .bindPopup("<strong>Small Warehouse!</strong>");
+
+        var noIconMarker = L.MakiMarkers.icon({
+            icon: null,
+            color: "#b00"
+        });
+
+        L.marker([30.308064585977814, -97.79387256712653], {
+            icon: noIconMarker})
+                .addTo(map)
+                .bindPopup("<strong>No Icon!</strong>");
+
+
+        var noColorMarker = L.MakiMarkers.icon({
+            icon: null,
+            color: null
+        });
+
+        L.marker([30.25173261265964, -97.69636890501715], {
+            icon: noColorMarker})
+                .addTo(map)
+                .bindPopup("<strong>No Color!</strong>");
 
     </script>
 </body>