CODEWITHSUNDEEP
javascriptjqueryleafletmapbox
Xeverus
Xeverus

Reputation: 125

Mapbox - bindPopup, load content in a div

How do I build a link that can run a function when it is built in a variable? I'm trying to populate some geoJSON data in another div under my map when I click on a layer as well as load the popup. So far I can get the popup to work fine but how do you build the onclick event to load the full description in another div below the map?

"headline": "Flash Flood Warning issued July 28 at 7:10PM MST expiring July 28 at 10:00PM MST by NWS Flagstaff AZ",
"description": "The National Weather Service in Flagstaff has issued a\n\n* Flash Flood Warning for...\nYavapai County in west central Arizona...\n\n* Until 1000 PM MST\n\n* At 704 PM MST, Doppler radar indicated thunderstorms producing\nheavy rain across the warned area. Portions of the warned area\nhave received one to two inches of rain in a 30 minute period. The\nheaviest rain has been just north of Crown King, along Turkey\nCreek west of Cordes, and the area just northeast of Black Canyon\nCity.\n\nFlash flooding is expected to begin shortly.\n\n* Some locations that will experience flooding include...\nCordes Junction, Bumble Bee, Cordes Lakes, Crown King, Black Canyon\nCity, Rock Springs, Castle Hot Springs, Wagoner, Cordes, Turney\nGulch Group Campground and Hazlett Hollow Campground.\n\nThis includes the following streams and drainages...Poland Creek...\nSycamore Creek...Bitter Creek...Castle Creek...Squaw Creek...Turkey\nCreek...Tuscumbia Creek...Black Canyon Creek...Big Bug\nCreek...Blind Indian Creek...Agua Fria River...Wolf Creek.\n\nThis includes the following highways...\nState Route 69 between mile markers 263 and 264.",

jQuery.ajax({
    type: "GET",
    dataType: "json",
    url: "https://api.weather.gov/alerts?active=1&event=Flood%20Warning,Flash%20Flood%20Warning,Flood%20Watch,Flash%20Flood%20Watch",
    error: function (err) { console.log(err)},
    success: function (data, status, xhr) {
        jQuery(data.features).each(function(index, i) {
            console.log(i.properties.headline);
        });
        console.log(data.features.length);
        L.geoJson(data, {
            onEachFeature: function (feature, layer) {
                layer.bindPopup(feature.properties.event+"<br>"+feature.properties.headline+"<br>");
            }
        }).addTo(map);
    }
})

I don't know how to get it to populate the headline and description in a div that exists below the map. Does l.GeoJson not have a click event? I tried creating a variable with onclick='function('"+myFunction+"')' but something is off with the '" and it keeps breaking. Any ideas?

Upvotes: 0

Views: 158

Answers (1)

Baptiste
Baptiste

Reputation: 1785

If I correctly understand your problem here is a simple way to do that. Bind a click event on your layer like this:

L.geoJson(data, {
    onEachFeature: function (feature, layer) {
        layer.bindPopup(feature.properties.event+"<br>"+feature.properties.headline+"<br>");
        layer.on({
            click: function (e) {
                //Do what you need in your div
                // You have full access to your feature properties
            }
        });
    }
}).addTo(map);

When you will click on any of these features you will fire that event.

Upvotes: 1

Related Questions