show the circle around the marker - Javascript Leaflet

Javascript examples for Leaflet:Marker

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

Description

show the circle around the marker

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </head> 
   <body>   
      <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css" > 
      <style type="text/css">

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


      </style> 
      <script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js" ></script>   
      <div id="map"></div> 
      <script>
    var userLocation = new L.LatLng(42.35, -71.08);
    var map = L.map('map').setView(userLocation, 13);
    L.tileLayer('http://tiles.mapc.org/basemap/{z}/{x}/{y}.png',
    {
        attribution: 'Tiles by <a href="http://mapc.org">MAPC</a>, Data by <a href="http://mass.gov/mgis">MassGIS</a>',
        maxZoom: 17,
        minZoom: 9
    }).addTo(map);
    var marker = L.marker(userLocation).addTo(map);
    var circle = L.circle(userLocation, {
        color: 'red',
        fillColor: '#f03',
        fillOpacity: 0.5,
        radius: 500
    }).addTo(map);
        
      </script>    
   </body>
</html>

Related Tutorials