0

I have a geoJSON file of all the counties in Michigan. I have embedded this file in a Leaflet map.

enter image description here

I want each of these county polygons to display the name of the county in a pop-up when clicked on. This is basically a duplicate of Different popup for every polygon (leaflet), except that my map has 83 polygons, and I want to find a way to do this without calling L.bindPopup() 83 times in a row.

Should I be looking into some kind of javascript function or for loop?

I am not very familiar with javascript at all.

My javascript code thus far:

var mymap = L.map('mapid').setView([43.293218, -84.607686], 7);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: ' OpenStreetMap' }).addTo(mymap);

function addDataToMap(data, map) {
    var dataLayer = L.geoJson(data);
    dataLayer.addTo(map);
}   

$.getJSON("county_coords.geojson", function(data) 
    { 
        addDataToMap(data, mymap); 
    });

Here is a sample of my geoJSON file (county_coords.geojson). Maybe there is a way I can call the "LABEL" property in the geoJSON file to display the county name in a popup?

{
  "type": "FeatureCollection",
  "crs": {
    "type": "name",
    "properties": {
      "name": "urn:ogc:def:crs:OGC:1.3:CRS84"
    }
  },
  "features": [
    {
      "type": "Feature",
      "properties": {
        "FIPSCODE": "001",
        "FIPSNUM": 1,
        "NAME": "Alcona",
        "LABEL": "Alcona County",
        "TYPE": "County",
        "CNTY_CODE": "001",
        "SQKM": 1798.557217,
        "SQMILES": 694.423636,
        "ACRES": 444428.3814,
        "VER": "13a",
        "LAYOUT": "landscape",
        "PENINSULA": "lower",
        "URL": "http://per510a.mtri.org:8090/download/attachments/327710/NC_001_Alcona_2005.zip?version=2&modificationDate=1182876202960&api=v2"
      },
      "geometry": {
        "type": "MultiPolygon",
        "coordinates": [
          [
            [
              [
                -83.886988854009,
                44.540800273944
              ]...
Improve this question
3
  • Why do you not want to use L.BindPopup()? You can include it in your function, and only have it in your code once.
    – Barbarossa
    Commented Aug 7, 2017 at 14:44
  • I thought I would have to call it separately for each polygon. L.polygon(coordinatesForPolygon1).bindPopup('first county name'); L.polygon(coordinatesForPolygon1).bindPopup('second county name'); etc. for each of the 83 county polygons. How would it work to only have it in my code once?
    – ale19
    Commented Aug 7, 2017 at 15:16
  • Look at the onEachFeature() function here
    – Barbarossa
    Commented Aug 7, 2017 at 15:18

1 Answer 1

Reset to default
3

You can use the .bindPopup() method to bind a desired attribute to the popup, with the use of an .onEachFeature() function. See below. Examples can be found here.

function onEachFeature(feature, layer) {
    if (feature.properties && feature.properties.NAME) {
        layer.bindPopup(feature.properties.NAME);
    }
}

function addDataToMap(data, map) {
    L.geoJson(data, {
        onEachFeature: onEachFeature
    }).addTo(map);   
}

$.getJSON("county_coords.geojson", function(data) { 
    addDataToMap(data, mymap); 
});
Improve this answer
3
  • Thanks for the help! The onEachFeature() function seems promising, but when I try this code, my console says "Error: Invalid GeoJSON Object" and even though the polygons load, nothing happens when I click on them.
    – ale19
    Commented Aug 7, 2017 at 16:07
  • @ale19 Please see my edits. I simply meant you need to get a reference to your json file first. There are numerous ways to skin that cat. I've modified the answer to be more specific for your needs. Let me know if it works.
    – Barbarossa
    Commented Aug 7, 2017 at 16:27
  • Wonderful, thanks! I figured there were multiple ways to do it, but I couldn't seem to get the commands/syntax in the right order because I'm unfamiliar with javascript. Appreciate it!
    – ale19
    Commented Aug 7, 2017 at 16:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.