setDrawingOptions after base layer change Leaflet Draw - Javascript Leaflet

Javascript examples for Leaflet:Layer

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

Description

setDrawingOptions after base layer change Leaflet Draw

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"> 
      <script type="text/javascript" src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script> 
      <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.css"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js"></script> 
      <style id="compiled-css" type="text/css">

body {/*from w  ww . j  ava2s .c  om*/
   margin: 0;
}
#map {
   height: 100vh;
   width: 100vw;
}


      </style> 
      <script type="text/javascript">
    window.onload=function(){
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var drawnItems = new L.FeatureGroup().addTo(map);
map.drawControl = new L.Control.Draw()
map.addControl(map.drawControl);
map.on('draw:created', function(e) {
   e.layer.addTo(drawnItems);
})
map.on('zoomend', function() {
   console.log('map was dragged! polygons will now be red!');
   map.drawControl.setDrawingOptions({
    polygon: {
      shapeOptions: {
        color: 'red'
      }
    }
  });
  drawnItems.setStyle({
     color: 'red'
  })
})
    }

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

Related Tutorials