CODEWITHSUNDEEP
javascriptleafletgeojson
Keith D Kaiser
Keith D Kaiser

Reputation: 1036

Add concentric circles to a map at specific distances around a marker using Leaflet and GeoJSON

This question (leaflet concentric circles (angular 2)) is similar, but since its not quite the same and no-one has answered it I thought I would start over.

My Leaflet map is populated by markers created in PHP from a MySql database. Here is a link if you want to see it; https://net-control.us/map1Test.php.

I would like to be able to right click on any given marker and have a series of concentric circles drawn around that marker at various distances in miles (example: 2, 5, 10, 15).

I think I need to do this with GeoJSON but any method that does what I need is OK with me. I just have not figured out how to first of all draw the circles at the distances I need and secondly how to allow a marker to be right clicked to display them.

I can't find any examples, and the only similar question has not been answered. Can someone show me how to do this? I use OSM maps.

The code (PHP) to make each marker looks like this;

$markers .= " var $callsign = new L.Marker(new L.LatLng($row[koords]),{ icon: new L.{$row[iconColor]}({number: '$rowno' }), title: \"marker_$rowno\"}).addTo(fg).bindPopup(\"$rowno<br>$row[mrkrfill]\").openPopup(); $($callsign._icon).addClass(\"$row[classColor]\"); markers.push($callsign); \n";

Upvotes: 1

Views: 1179

Answers (2)

Keith D Kaiser
Keith D Kaiser

Reputation: 1036

var i;
   var r = 1609.34;  // in meters = 1 mile, 4,828.03 meters in 3 miles

   var circleOptions = {
       color: 'blue',
       fillColor: '#69e',
       fillOpacity: 0
   }

   for (i=0 ; i < 3; i++ ) {
       r = (r * i) + r;
       alert(lat+", "+lng);
       var circle = L.circle([lat, lng], r, circleOptions);
            circle.addTo(map); 
            r = 1609.34;  // reset r so r calculation above works for each 1 mile step 
    }

Upvotes: 0

peeebeee
peeebeee

Reputation: 2618

You don't share the code which creates the markers, so this is necessarily theoretical...

When creating the marker, add a contextmenu hook, which calls a function that uses L.circle to add circles to the map.

EDIT: So I peeked at the source of your site, your Javascript snippet for each marker should end up like this:

var WA0TJT = new L.Marker(new L.LatLng(39.202911,-94.602887),{
                icon: new L.NumberedDivIcon({number: '1' }),
                title:
                "marker_1"}).addTo(fg).bindPopup("1<br><b>#0013</b><br>WA0TJT<br>Keith Kaiser<br>Platte  Co., MO Dist: A<br>39.202911, -94.602887<br>EM29QE").openPopup().on("contextmenu", drawCircles);
                $(WA0TJT._icon).addClass("bluemrkr");
                markers.push(WA0TJT);

with a new function like this

function drawCircles(event e) {
  L.circle(e.target.getLatLng(),  {radius: <radius in metres>}).addTo(map);
  // ... any more circles you need ...
  }

Upvotes: 2

Related Questions