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
              ]...
  • 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 Aug 7 '17 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 Aug 7 '17 at 15:16
  • Look at the onEachFeature() function here – Barbarossa Aug 7 '17 at 15:18
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); 
});
  • 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 Aug 7 '17 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 Aug 7 '17 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 Aug 7 '17 at 16:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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