Merge pull request #43 from codeofsumit/develop

Set Icons via CSS

Author: codeofsumit

README.md

@@ -9,6 +9,9 @@ As we are always using the latest leaflet version in a big production app, I wil
 
 ### Getting Started
 
+#### Install via npm
+`npm install leaflet.pm --save`
+
 #### Install via Bower
 `bower install leaflet.pm --save`
 

src/css/controls.css

@@ -18,6 +18,10 @@
     width: 100%;
 }
 
+.leaflet-buttons-control-button img.icon-polygon {
+  content: url('assets/icons/polygon.png');
+}
+
 .leaflet-buttons-control-button:hover {
     cursor: pointer;
     background-color: #f4f4f4;

src/js/L.Controls.js

@@ -23,6 +23,7 @@ L.Control.PMButton = L.Control.extend({
 
     setButton: function (options) {
         var button = {
+            'className': options.className,
             'iconUrl': options.iconUrl,
             'onClick': options.onClick,
             'afterClick': options.afterClick,
@@ -67,7 +68,12 @@ L.Control.PMButton = L.Control.extend({
             L.DomUtil.addClass(newButton,'active');
 
         var image = L.DomUtil.create('img', 'control-icon', newButton);
-        image.setAttribute('src', button.iconUrl);
+        if (button.iconUrl) {
+            image.setAttribute('src', button.iconUrl);
+        }
+        if (button.className) {
+            L.DomUtil.addClass(image, button.className);
+        }
 
         L.DomEvent
             .addListener(newButton, 'click', button.onClick, this)

src/js/L.PM.Draw.Poly.js

@@ -79,7 +79,7 @@ L.PM.Draw.Poly = L.PM.Draw.extend({
         var self = this;
 
         var drawPolyButton = {
-              'iconUrl': 'assets/icons/polygon.png',
+              'className': 'icon-polygon',
               'onClick': function() {
 
               },