TransWikia.com

Displaying concatenated attributes in a pop-up in a Mapbox map

Geographic Information Systems Asked by Ruby2382 on June 30, 2021

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?

One Answer

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.

Answered by Ruby2382 on June 30, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP