Add circle marker to leaflet - Javascript Leaflet

Javascript examples for Leaflet:Marker

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

Description

Add circle marker to leaflet

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://unpkg.com/leaflet@1.0.1/dist/leaflet-src.js"></script> 
      <link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet@0.7.7/dist/leaflet.css"> 
      <script type="text/javascript" src="https://unpkg.com/leaflet@0.7.7/dist/leaflet-src.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/*from ww  w. j  ava2s . c  o m*/
var map = L.map("map").setView([48.86, 2.34], 12);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
   maxZoom: 19,
   attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
var loc = L.circle([48.86, 2.34], 500).addTo(map);
var loc2 = L.circleMarker([48.86, 2.34], {
   radius: 50,
  color: "red"
}).addTo(map);
var user = L.latLng([48.861, 2.34]);
L.marker(user).addTo(map);
console.log(loc.getBounds());
console.log("loc contains user: " + loc.getBounds().contains(user));
console.log(loc2.getBounds());
console.log("loc2 contains user: " + loc2.getBounds().contains(user));
    }

      </script> 
   </head> 
   <body> 
      <div id="map" style="height: 400px;"></div>  
   </body>
</html>

Related Tutorials