CODEWITHSUNDEEP
javascriptcssgeojsonmapbox
Sonny
Sonny

Reputation: 2133

Mapbox GeoJSON loaded via local URL: icons not showing popup properties

In my web site, I am using a Mapbox map to load icons from a URL procured like so:

/* myMapbox.js */
map = L.mapbox.map("map", "somemap.hhlj93e3").setView([47.60,-122.33], 13);
...
.someAjaxCall{

   allMyIcons = L.mapbox.featureLayer ().loadURL ("/updatedIcons");
   allMyIcons.addTo (map);
}

The icons loaded via /updatedIcons do show up, but they were not clickable. I solved the clickability problem using this SO post. However, the properties for each feature (icon) retrieved via the /updatedIcons call still do not show up as a popup when I click the icons (nothing happens when I click the icons). Note that the icons created at the Mapbox site for somemap user do show up on the map, and they are clickable, and a popup happily shows up for them on the same map.

Here's a sample of my GeoJSON loaded via /updatedIcons:

[{
"type": "Feature",
"geometry": { "type": "Point", "coordinates": [-77.03, 38.90]},
"properties": {
    "image":   "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Cherry_Blossoms_and_Washington_Monument.jpg/320px-Cherry_Blossoms_and_Washington_Monument.jpg",
    "url": "https://en.wikipedia.org/wiki/Washington,_D.C.",
    "marker-symbol": "star",
    "city": "Washington, D.C."
}
}, {
"type": "Feature",
"geometry": { "type": "Point", "coordinates": [-87.63, 41.88]},
"properties": {
    "image": "https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Chicago_sunrise_1.jpg/640px-Chicago_sunrise_1.jpg",
    "url": "https://en.wikipedia.org/wiki/Chicago",
    "city": "Chicago"
}
}, {
"type": "Feature",
"geometry": { "type": "Point", "coordinates": [-74.00, 40.71]},
"properties": {
    "image": "https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/NYC_Top_of_the_Rock_Pano.jpg/640px-NYC_Top_of_the_Rock_Pano.jpg",
    "url": "https://en.wikipedia.org/wiki/New_York_City",
    "city": "New York City"
}
}]

What am I missing here? Just to be clear, the icons appear, but they weren't clickable until I added the CSS improvements mentioned in the linked SO post, and now, I can click the icons, but nothing happens (the properties don't show up in a popup). I understand the GeoJSON example above is a FeatureCollection, and I included the above in a 

{ "type": "FeatureCollection",
  "features": <content from above GeoJSON here>
}

but that hasn't changed the behavior. Is this a layering issue? If so, how to merge all the layers in my map? I will have the base map loaded from Mapbox, a marker created by user which I want to render using 

       marker = L.marker ([lat, lng],
              {
                  icon: L.divIcon ({
                  iconSize: [10, 10]
                  })
              });

and the icons loaded from /updatedIcons above, all of which I want to be clickable.

Any help is appreciated. Thanks!

Upvotes: 1

Views: 1545

Answers (2)

Sonny
Sonny

Reputation: 2133

Here is the response from Mapbox support:

The popups you see on maps are formatted based on specific properties - by default, these properties are 'title' and 'description'. Features without these default properties don't automatically get default popups, because the code wouldn't know what means what - whether something should be shown as a title or a description, or an image is unclear. Since your data doesn't contain the default properties, you'll have to specify how tooltips are formatted, like so, with bindPopup: https://www.mapbox.com/mapbox.js/example/v1.0.0/omnivore-kml-tooltip/ http://leafletjs.com/reference.html#marker-bindpopup

Upvotes: 0

sfletche
sfletche

Reputation: 49744

L.mapbox.featureLayer inherits from L.mapbox.featureGroup.

And to add (or bind) a popup to a featureGroup you'll want something like this

allMyIcons = L.mapbox.featureLayer().loadURL("/updatedIcons");
allMyIcons.bindPopup("Howdy!");
allMyIcons.addTo(map);

If you would rather each marker/icon to have its own unique popup, you can loop through them like this, adding the unique popup as you iterate

allMyIcons.eachLayer(function (layer) {
layer.bindPopup('Howdy: ' + count);
    count += 1;
});

Upvotes: 1

Related Questions