CODEWITHSUNDEEP
javascripthtmlcssleafletweb-deployment
Azrael
Azrael

Reputation: 11

Display information from a GeoJson in a popup (LEAFLET)

I am writing a program for my Company that owns Trails. The program displays a webmap with a long trail (connecting all the trails) as it should. I also have markers displayed on each trailhead by reading coordinates from a GeoJson Array. I want to bind a popup to each marker that ATLEAST displays the name of each trailhead in the popups. I have tried lots of things but nothing is working. I will link my current HTML file and the GeoJson file now.

GeoJson TrailHeaders File

Index.Html

Upvotes: 0

Views: 1251

Answers (1)

Camilo
Camilo

Reputation: 169

You need to modify the GeoJSON() function options:

var trailheadsLayer = L.geoJson(trailheads, {
    onEachFeature: function(feature, layer){
        console.log(feature.properties);
        content = "Name: " + feature.properties.name + "<br>Abbreviation: " + feature.properties.abbreviati; 
        layer.bindPopup(content);
    }
}).addTo(map);

The content string can be modified with the json properties you need. Be careful and format the string as an HTML element.

You can see here a live version of your map.

PS. Hope it's not too late for the answer.

Upvotes: 1

Related Questions