CODEWITHSUNDEEP
javascriptleaflet
geogrow
geogrow

Reputation: 505

zoom to clicked feature

I am trying to learn the leaflet library and try to zoom to a clicked feature. Might be a simple issue but I am quite new with js and leaflet. I have seen examples of how to do this like this post here How to zoom on marker click event in Mapbox Leaflet? But I dont think that example is getting the data from a ajax call and thus does not work here? 

    function callback (response)    {
        quake = L.geoJson(response,
        {
            onEachFeature: function (feature, layer) 
            {
            layer.bindPopup( "Mag: " + String(feature.properties.mag));
            }
        }).addTo(map);
    map.fitBounds(quake.getBounds());
};


quake.on('click', function(e) {
    map.setView([e.latlng], 12)
});

I have tried this too, but it trow an error that marker is not defined. But if I understand it correctly L.geoJson will create marker by default and save them to "quake" as my example above that currently does not work. 

marker.on('click', function(e) {
    map.setView([e.latlng], 12)
});

Here is a complete link to my codepen codepen example

I hope someone can point me in the right direction

Upvotes: 1

Views: 2509

Answers (1)

RedCrusador
RedCrusador

Reputation: 705

Very close. You just need to add the click handler to the onEachFeature function.

I have created a working snippet below...

var map = L.map('map').setView([36.235412, -95.800781], 2);

var earthquake = document.querySelector(".earth");
earthquake.addEventListener("click", getQuake);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	maxZoom: 19,
	attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);

// Create an empty geoJSON layer to be filled later by button click
var quake = L.geoJSON().addTo(map);

function getQuake (){
  $.ajax( 
	{
	url:"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_day.geojson",
	dataType : 'json',
	jsonCallback : 'getJson',
	success : callback
	}
		)
};

function callback (response)	{
		quake = L.geoJson(response,
		{
			onEachFeature: function (feature, layer) 
			{
        	layer.bindPopup( "Mag: " + String(feature.properties.mag));
        
            layer.on('click', function (e) {
               map.setView(e.latlng, 12)
            });
  			}
		}).addTo(map);
  	map.fitBounds(quake.getBounds());
};
#map {
  height: 350px;
  width: 650px;
  margin:auto;
}

#earthquake{
  margin-left: 420px;
  margin-bottom: 10px;
}

#about {
  text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.css" rel="stylesheet"/>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Leaflet Demo</title>

</head>
<body>

<div id="about">
  <h1>Leaflet Map Demo Template</h1>
  <p>Data from dayly M2.5+ Earthquakes <em><strong>https://earthquake.usgs.gov</em></strong></p>
</div>

<div id="earthquake">
  <button class="earth">Add Earthquake data</button></id>
</div>

<div id="map"></div>

</body>
</html>

Upvotes: 2

Related Questions