I'm new to javascript and even newer to Leaflet (version 0.7.7), so I'm having difficulty determining how to ask this question.
With leaflet, when I click on a polygon, an ajax request is made, it is converted to geojson, and a popup appears on the map with some of the returned data. On the leaflet website, the example to do such a thing involves using the onEachFeature event of the geoJson method.
However, when I'm inside of the function called by onEachFeature, I can't access any variables outside of that function. In the example below, in the neighborhood_popup, I'd like to be able to access the data in the ajax response.
How can I access data outside of this onEachFeature function? See comments in the example below.
var map = L.map('map').setView([y, x], 11);
// add some other map features here.
var _neighborhood_lookup;
function neighborhood_lookup(latlng) {
/* do an ajax request to get geojson data */
var neighborhood_url="/path/to/api/url?lat=" + latlng.lat + "&long=" + latlng.lng;
var jqxhr = $.get(neighborhood_url, function(res) {
_neighborhood_lookup = res
var popup = L.popup({maxWidth:400});
var style = {}
function neighborhood_popup(feature, layer) {
popup.setLatLng(latlng);
var place = feature.properties;
/* THIS IS THE PROBLEM I'M HAVING
I'm trying to get more information out of
_neighborhood_lookup at this location, which
is an ajax response. However, the _neighborhood_lookup
is undefined at this point. How do I access variables
outside of this function scope?
*/
/* this part doesn't really matter for this question,
but it's gathering variables and rendering them
in a handlebars template */
var context = {
name: place.name,
long_name: place.long_name,
};
var html = popup_template(context);
// sets popup content
popup.setContent(html);
}
// I think this determines what leaflet feature was clicked
var neighborhood_layer = L.geoJson(_neighborhood_lookup.neighborhood, {
style: style,
onEachFeature: neighborhood_popup
});
layergroup.clearLayers();
layergroup.addLayer(neighborhood_layer);
map.openPopup(popup);
})
}
/* when a polygon an the map is clicked,
we call the neighborhood_lookup function */
map.on('click', function(e) {
neighborhood_lookup(e.latlng);
});
Update: Here is the json that comes in via the ajax request.
{"neighborhood": {"id":"108","type":"Feature","geometry": {"type":"Polygon","coordinates": [[[-87.684152,41.971901],[-87.684148,41.971794], [-87.684146,41.971748],[-87.684143,41.971665], ... [-87.684159,41.972107],[-87.684156,41.972037],
[-87.684154,41.971967],[-87.684152,41.971901]]] }, "properties": {"created":"2016-06-19T21:50:35.060937Z", "modified":"2016-0619T21:50:35.060967Z", "active":true, "name":"108", "uuid":"1d6162af-2202-40a4-8f1a-697e266a07b9",
"long_name":"Lincoln Square","stats": {} } } }
No comments:
Post a Comment