Friday, 4 March 2016

Dynamically create leaflet popup via JavaScript Object


I want to dynamically populate a marker popup via a JavaScript object.


I have a JavaScript object like so:


{address: "92101 S Martin Ave.", address2: "", agent_name: "mr smith", 
animal: "sheep", car: "honda", city: "Chicago", county: "Cook County", ID: "1",
latitude: "41.718986", longitude: "-87.550646", postalcode: "60617",
stateProvince: "IL", status: "GS"}

I want to be able to loop thru all of properties within the object and display those within the popup.


I have tried the below:



for (var j = 0; j < Object.keys(data).length; j++) {
var marker = L.marker([data[j].latitude, data[j].longitude]).addTo(markers);
marker.bindPopup(data[j]);

This does not work.



Answer



var yourData = getInfoFrom(yourObject).join(" 
");

L.marker([63.43, 10.395]).addTo(map)
.bindPopup(yourData)

.openPopup();

function getInfoFrom(object) {
var popupFood = [];
for (var key in object) {
if (object.hasOwnProperty(key)) {
var stringLine = "The " + key + " is " + object[key];
popupFood.push(stringLine);
}
}

return popupFood;
}

Example popup with info from object properties


var yourObject = {
address: "92101 S Martin Ave.",
address2: "",
agent_name: "mr smith",
animal: "sheep",
car: "honda",

city: "Chicago",
county: "Cook County",
ID: "1",
latitude: "41.718986",
longitude: "-87.550646",
postalcode: "60617",
stateProvince: "IL",
status: "GS"
};

No comments:

Post a Comment

arcpy - Changing output name when exporting data driven pages to JPG?

Is there a way to save the output JPG, changing the output file name to the page name, instead of page number? I mean changing the script fo...