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


Tags: javascript,css,geojson,mapbox

Problem :

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!



Solution :

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;
});

    CSS Howto..

    How to remove a css class and add another when I get a certain mobile resolution

    How can I apply an existing CSS class style to a dynamically created div?

    Wordpress Plugin - How can I make the text responsive, OR replace it with a new div?

    CSS: how to apply margin to a container with floats?

    How can I have % of width of an img wrapped in a specific div width?

    How to Indent using HTML or CSS

    How to change this table layout to a css layout?

    How do I determine if truncation is being applied in my style through JS?

    How to only use jquery .css() on a specific media query?

    How to add background video stop button

    How to draw diagonal lines with css [duplicate]

    Using a lot of style sheets. Needing opinions on how to move forward efficiently

    Styling Tables - How to use column groups to modify TH tag located in that column

    Adding a description to a css image slideshow

    How to use CSS selectors [closed]

    How to prevent the vertical scroll of this div?

    How to override css property to default?

    a[title] not showing expected result [closed]

    How do I put my index.html in the same folder as my other .html files on github?

    How to use opacity when not use rgba color in css?

    How do I make a play button for my full page video?

    How to create a mobile navigation toggle using pure CSS?

    How can I center div in div in IE7

    How to select only the “parent” div of an image

    How get dimension of HTML shadow element via JavaScript

    how to vertically align the 2 different font sizes inside a single

    How do I get spotlight/shadow position to remain exactly same relative horizontal center position regardless of zoom?

    How to adapt height of an element to another in CSS

    In Ember how to use a view to change a css property and then view it?

    How can I center a logo and place the links left and right on the navbar using bootstrap?