CODEWITHSUNDEEP
javascriptleaflet
user1687891
user1687891

Reputation: 864

How can I show the circle around the marker?

I am trying to show a circle around the marker which will tell user the range of that marker. I have tried so far following code. I am not being able to show the circle. I want something like this. enter image description here

var map = L.map('map').setView([42.35, -71.08], 13);
var userLocation = new L.LatLng(42.237, -71.96);
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);
.container {
  width: 800px;
  margin: 20px auto;
}

#map {
  width: 800px;
  height: 450px;
  border: 1px solid #AAA;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/leaflet.markercluster.js'></script>

<div class="container">
  <h1>Maps:</h1>
  <div id="map"></div>
</div>

Upvotes: 1

Views: 425

Answers (1)

collapsar
collapsar

Reputation: 17238

The circle is drawn but the coordinates at which you place it are way beyond the viewport.

Zoom out 3 steps and see it located between Spencer and Leicester (follow the I-90 from Boston in SW direction).

Set the user location first in your code and use it for viewport definition, marker and circle placement.

var userLocation = new L.LatLng(42.35, -71.08);
var map = L.map('map').setView(userLocation, 13);
//...
var marker = L.marker(userLocation).addTo(map);
//...
var circle = L.circle(userLocation, {
//...

Standalone code:

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);

Demo

See this JSFiddle

Update

The Q references an outdated leaflet version and CDNs that seem to have some problems with the current release.

With the following resource urls, everything works fine:

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.3.0/MarkerCluster.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q==" crossorigin=""></script>   
<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.3.0/leaflet.markercluster.js'></script>

Upvotes: 2

Related Questions