Add custom icons to Leaflet Draw toolbar - Javascript Leaflet

Javascript examples for Leaflet:Configuration

  1. HOME
  2. Javascript
  3. Leaflet
  4. Configuration

Description

Add custom icons to Leaflet Draw toolbar

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Draw on map with Leaflet.js and leaflet.draw</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.js"></script> 
      <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.css"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/leaflet.draw.js"></script> 
      <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/leaflet.draw.css"> 
      <style id="compiled-css" type="text/css">

#map {//from  ww w.  j a v  a 2  s . c  o  m
   height: 400px;
}


      </style> 
      <script type="text/javascript">
    window.onload=function(){
var center = [-33.8650, 151.2094];
var map = L.map('map').setView(center, 6);
L.tileLayer(
  'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18
  }).addTo(map);
L.marker(center).addTo(map);
var editableLayers = new L.FeatureGroup();
map.addLayer(editableLayers);
var MyCustomMarker = L.Icon.extend({
  options: {
    shadowUrl: null,
    iconAnchor: new L.Point(12, 12),
    iconSize: new L.Point(24, 24),
    iconUrl: 'http://www.pdclipart.org/albums/Buildings/igloo.png'
  }
});
var drawPluginOptions = {
  position: 'topright',
  draw: {
    polyline: {
      shapeOptions: {
        color: '#f357a1',
        weight: 10
      }
    },
    polygon: {
      allowIntersection: false, 
      drawError: {
        color: '#e1e100', 
        message: '<strong>Oh snap!<strong> you can\'t draw that!' 
      },
      shapeOptions: {
        color: '#bada55'
      }
    },
    circle: false, 
    rectangle: {
      shapeOptions: {
        clickable: false
      }
    },
    marker: {
      icon: new MyCustomMarker()
    }
  },
  edit: {
    featureGroup: editableLayers, //REQUIRED!!
    remove: false
  }
};

var drawControl = new L.Control.Draw(drawPluginOptions);
map.addControl(drawControl);
var editableLayers = new L.FeatureGroup();
map.addLayer(editableLayers);
map.on('draw:created', function(e) {
  var type = e.layerType,
    layer = e.layer;
  if (type === 'marker') {
    layer.bindPopup('A popup!');
  }
  editableLayers.addLayer(layer);
});
    }

      </script> 
   </head> 
   <body> 
      <div id="map"></div>  
   </body>
</html>

Related Tutorials