GIS Stack Exchange 200809

by Alex Azuero

HTML

<link rel="stylesheet" href="https://cdn.rawgit.com/Leaflet/Leaflet/v0.7.7/dist/leaflet.css">
<script src="https://cdn.rawgit.com/Leaflet/Leaflet/v0.7.7/dist/leaflet.js"></script>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<div id="mapId"></div>

CSS

#mapId {
  height: 300px;
}
.leaflet-popup-content {
  overflow:auto;
}

JavaScript

function neighborhood_popup(feature, layer, map, geojson) {
	console.log('neighborhood_popup', feature, layer, geojson);
  var latlng = [feature.geometry.coordinates[0][0][1],feature.geometry.coordinates[0][0][0]];
  console.log('ll', latlng);
	var popup = L.popup()
    .setLatLng(latlng)
    .setContent('<p>Hello world!<br />This is a nice popup.</p><pre>' + JSON.stringify(geojson) + '</pre>')
    .openOn(map);
}



var map = L.map('mapId').setView([51.505, -0.09], 11);
var layergroup = L.layerGroup([]).addTo(map);

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


function neighborhood_lookup(latlng) {
  /* do an ajax request to get geojson data */
  var neighborhood_url = "https://mockbin.org/bin/302e469f-5b57-45a4-acc1-46f31cc350be?lat=" + latlng.lat + "&long=" + latlng.lng;
  var jqxhr = $.get(neighborhood_url, function(res) {
    var geojson = JSON.parse(res);

    var neighborhood_layer = L.geoJson(geojson.neighborhood, {
      onEachFeature: function(feature, layer) {
      	neighborhood_popup(feature, layer, map, geojson);
      }.bind(this)
    });

    layergroup.clearLayers();
    layergroup.addLayer(neighborhood_layer);
  })
}

/* when a polygon an the map is clicked,
   we call the neighborhood_lookup function */
map.on('click', function(e) {
  neighborhood_lookup(e.latlng);
});