0

I have been tasked with finishing off an abandoned project in an area I have no expertise in.

I need to add a series of GeoJSON files to a map, and when the symbol is clicked, show a pop-up that displays a title, location and image, all of which are fields in the attribute table.

Initially I just tried calculating a new field in the attribute table, with concatenated attributes formatted in html, and then using this field to label with in my pop-up.

concat('<h3>', "pop-up title", '</h3><table>', '<tr><td>Attribute1_label: <b> ',
"attribute1", '</b></td></tr><tr><td>Attribute2_label: <b> ', "attribute2",
'</b></td></tr></table>')

That worked in QGIS, but when I attempted to use this field to label with on my Mapbox map, the popup content showed up empty. Is that because it is a GeoJSON file?

I gave up on that method, and tried a different approach. This is my most recent attempt:

var strawberries = L.mapbox.featureLayer()

strawberries.loadURL('strawberries2.geojson');
strawberries.on('ready', function(layer){
    this.eachLayer(function(marker) {
      marker.setIcon(L.mapbox.marker.icon({
          'marker-color': '#4e779a',
          'marker-size': 'small',
          'marker-symbol':'building'
      }));
      marker.bindPopup('<strong>' + marker.feature.properties.Stand_name + '</strong>', '<italic>' + marker.feature.properties.Address + '</italic>', { closeButton: true });
    });
  });
strawberries.addTo(map);

It 3/4 works. I click the symbol, and get a popup that has a bold title of the farm name, but no address information. How can I concatenate more fields?

2
  • This is Mapbox.js library, not Leaflet.
    – TomazicM
    Aug 21, 2019 at 15:54
  • @TomazicM: Thanks. That might also explain why I wasn't finding helpful results on Google. I'm a data person, not a web programmer.
    – Ruby2382
    Aug 21, 2019 at 18:43

1 Answer 1

0

I can answer my own question!

 marker.bindPopup('<h6>' + marker.feature.properties.Stand_name + '</h6>'  +  '<p>' + marker.feature.properties.Address + '</p>', { closeButton: true });

Thanks @TomazicM for putting me on the right path.

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.