how to zoom area within 15km radius from the marker

Question

i'm facing a problem with the leaflet map . they are

1. i'm unable to zoom 15km radius (from marker) while moving marker

2. i'm unable to draw a line while moving (not a priority one)

here i what i have tried

Please refer jsfiddle as snippet is not working

jsfiddle: http://jsfiddle.net/eabangalore/x4gokvoa/8/

// Create the map
var map = L.map('map').setView([-31.4, -64.183], 12);

// Set up the OSM layer
L.tileLayer(
    'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18
}).addTo(map);

// add a marker in the given location
var lat = -31.4;
var lng = -64.183;
var marker = L.marker([lat, lng]).addTo(map);

// add a layer and add points
var myLayer = L.geoJson().addTo(map);

// geojsonFeature
var geojsonFeature = {
    "type": "Feature",
        "properties": {
        "name": "Coors Field",
            "amenity": "Baseball Stadium",
            "popupContent": "This is where the Rockies play!"
    },
        "geometry": {
        "type": "Point",
            "coordinates": [-104.99404, 39.75621]
    }
};

// put the marker
setTimeout(function () {
    myLayer.addData(geojsonFeature);
}, 1000);

// update the marker
setTimeout(function () {
    // clear layer
    myLayer.clearLayers(); // inherited from LayerGroup
    //myLayer.addData(geojsonFeature);
}, 3000);

// put the marker
setTimeout(function () {
    myLayer.addData(geojsonFeature);
}, 5000);

// just fooling around
setInterval(function () {
    lat = lat + ((Math.random() * 1) - 0.25) * 0.001;
    lng = lng + ((Math.random() * 1) - 0.5) * 0.001;
    marker.setLatLng([lat, lng]).update();
}, 200);

<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<link href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" rel="stylesheet"/>
<div id="map"></div>

please help me thanks in advance!!!!!

Answer 1

If you want to have the map to "zoom" (actually to fitBounds) to your Marker position and show a 15 km radius area around it, you could simply use a variation of this answer:

leaflet square given centre and square width

In short: build a "dummy" Circle centered on your Marker and with a 15,000 meters radius, retrieve its bounds using its getBounds method and feed it to the map's fitBounds method:

var marker = L.marker(myLatLng).addTo(map);
var radius = 15000; // in meters.
var circle = L.circle(myLatLng, radius).addTo(map);

map.fitBounds(circle.getBounds());

Note: you do not have to add the Circle to the map, it works even when not shown.

Now if you want this to happen whenever you change the position of your Marker, then simply repeat the process at each move. Like you re-use your Marker, you can also re-use the dummy Circle, since it has the same setLatLng method:

setInterval(function() {
  lat = lat + ((Math.random() * 1) - 0.25) * 0.001;
  lng = lng + ((Math.random() * 1) - 0.5) * 0.001;
  var newLatLng = [lat, lng];
  marker.setLatLng(newLatLng).update();
  circle.setLatLng(newLatLng);
  map.fitBounds(circle.getBounds());
}, 200);

Updated JSFiddle: https://jsfiddle.net/x4gokvoa/9/

Note: updated your JSFiddle to Leaflet version 0.7.7. You should try updating to version 1+. Current version is 1.3.1