GeoJSON at URL just stopped rendering markers

Question

My web application creates a geojson file on the server dynamically and then renders it on a map. It was working yesterday but is not today.

I have read through the MapBox API and troubleshooting pages. And searched the StackOverflow archives. I initially suspected it may have been the result of a MapBox version upgrade, but I think I am up-to-date now, and the geojson data is still not rendering. I have debugged the application to ensure that the geojson file is being included. Here is the link to a page that has minimal (6) markers in its corresponding geojson file (http://webapps.fhsu.edu/ksHerp/account.aspx?o=33&t=101)... some pages have more than 3,000. All of the code can be viewed from the source, it is also posted below.

heading

    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.1/mapbox-gl.css' rel='stylesheet' />

map call syntax in page

                        <script>
mapboxgl.accessToken = 'pk.eyJ1IjoidHRhZ2dhcnQiLCJhIjoiY2lwZmp0emR2MDA1YnRhbmQ2aW8xdm9wZCJ9.XMq3bMhOjRit7wR3q7oIgQ';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/ttaggart/cj3ohbccw00192rlrtj18zdmv', //stylesheet location
center: [-98.328809, 38.5], // starting position
zoom: 5 // starting zoom
});
var url = 'http://webapps.fhsu.edu/ksHerp/geojson/101.geojson';
map.on('load', function () {
 window.setInterval(function () {
 map.getSource('markers').setData(url);
}, 2000);
 map.addSource('markers', { type: 'geojson', data: url });
map.addLayer({
"id": "markers",
"type": "symbol",
"source": "markers",
"layout": {
"icon-image": "{marker-symbol}-11",
"icon-allow-overlap": true,
"text-field": "{title}",
"text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
"text-offset": [0, 0.6],
"text-anchor": "top"
}
});
});
// When a click event occurs near a marker icon, open a popup at the location of
// the feature, with description HTML from its properties.
map.on('click', function (e) {
var features = map.queryRenderedFeatures(e.point, { layers: ['markers'] });
if (!features.length) {
return;
}
var feature = features[0];
// Populate the popup and set its coordinates
// based on the feature found.
var popup = new mapboxgl.Popup()
    .setLngLat(feature.geometry.coordinates)
    .setHTML(feature.properties.description)
    .addTo(map);
});
// Use the same approach as above to indicate that the symbols are clickable
// by changing the cursor style to 'pointer'.
map.on('mousemove', function (e) {
    var features = map.queryRenderedFeatures(e.point, { layers: ['markers'] });
    map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';
});
map.addControl(new mapboxgl.NavigationControl());
map.addControl(nav, 'top-right');
 </script>

Geojson file created and linked above

{"type": "FeatureCollection","features": [
{"type": "Feature","geometry": {"type": "Point","coordinates": [-95.657787, 37.203811]},"properties": {"description": "<strong>Per. Obs</strong><p>Montgomery Co., Kansas: 37.203811, -95.657787: na: 6 Sep 2010 : James Erdmann: <br />From a message passed on to me by James Erdmann, of his sister being envenomated by a Cottonmouth at a family quarry SE of Independence. James, his brother, and I conducted a search on 10 June 2017 w/o success. James is a herpetologist, receiving his Masters at Southeastern Louisiana University in 2017. - Travis W. Taggart.</p>","marker-size": "small", "marker-color": "#ff0000", "marker-symbol": "triangle-stroked"}},
{"type": "Feature","geometry": {"type": "Point","coordinates": [-95.078393, 37.034605]},"properties": {"description": "<strong>KU 23284</strong><p>Labette Co., Kansas: 37.034605, -95.078393: Neosho River E of Chetopa: : No date: ?: <br />In need of corroboration. -Travis W. Taggart, 6 June 2006.</p>","marker-size": "small", "marker-color": "#0000ff", "marker-symbol": "circle-stroked"}},
{"type": "Feature","geometry": {"type": "Point","coordinates": [-94.677, 37.1632]},"properties": {"description": "<strong>KU 218780</strong><p>Cherokee Co., Kansas: 37.1632, -94.677: 1 mi S, 1.5 mi E jct US Rt 69, KS Rt 96; Sec 16 & 21,T33S,R25E: 29 Aug 1991 : K. Outt: <br />run over by vehicle near Shawnee Creek bridge; presumed dead, but envenomated collector when picked up.</p>","marker-size": "small", "marker-color": "#0000ff", "marker-symbol": "circle"}},
{"type": "Feature","geometry": {"type": "Point","coordinates": [-94.642994, 37.178178]},"properties": {"description": "<strong>KU 218677</strong><p>Cherokee Co., Kansas: 37.178178, -94.642994: ca 1mi W Missouri border on Ks Rt 96 at Spring River,Sec 14,T33S,R25E: 14 Sep 1991 : Shane Eckhardt: <br />shot at base of tree near bridge over Spring River east of Crestline.</p>","marker-size": "small", "marker-color": "#0000ff", "marker-symbol": "circle"}},
{"type": "Feature","geometry": {"type": "Point","coordinates": [-95.634436, 37.05989]},"properties": {"description": "<strong>KU 174719</strong><p>Montgomery Co., Kansas: 37.05989, -95.634436: W bank Verdigris River at Big Hill, N of Coffeyville: 23 Jun 1977 : ?: <br />data suspect; most certainly one of a number of specimens deliberately released in the Verdigris River between Independence and Coffeyville in the mid to late 1970s. Travis W. Taggart - 8/4/2012.</p>","marker-size": "small", "marker-color": "#0000ff", "marker-symbol": "circle-stroked"}},
{"type": "Feature","geometry": {"type": "Point","coordinates": [-95.696097, 37.2252]},"properties": {"description": "<strong>KU 170521</strong><p>Montgomery Co., Kansas: 37.2252, -95.696097: Verdigris River, E of Independence, ca 366 m downstream: 26 Jul 1976 : ?: <br />data suspect; most certainly one of a number of specimens deliberately released in the Verdigris River between Independence and Coffeyville in the mid to late 1970s. Travis W. Taggart - 8/4/2012.</p>","marker-size": "small", "marker-color": "#0000ff", "marker-symbol": "circle-stroked"}}
]}

When working correctly, the locality markers specified in the geojson file are rendered as brown circles, triangles, and squares. There are no errors, the markers just don't show up.

Answer 1

Indeed, it appears to be related with missing sprite images in style, in that case the following warning is getting displayed (refer to this pull request for a more details):

Image "..." could not be loaded. Please make sure you have added the image with map.addImage() or a "sprite" property in your style. You can provide missing images by listening for the "styleimagemissing" map event.

When switching, for example, to Mapbox Streets style mapbox://styles/mapbox/streets-v9 markers are getting rendered as expected

For your style mapbox://styles/ttaggart/cj3ohbccw00192rlrtj18zdmv those image icons are missing:

• circle-11
• triangle-stroked-11
• circle-stroked-11

once the missing images are loaded, for example via this technique:

 map.on("styleimagemissing", e => {
    console.log("loading missing image: " + e.id);
    if (
      e.id === "circle-11" ||
      e.id === "triangle-stroked-11" ||
      e.id == "circle-stroked-11"
    ) {
      map.loadImage(e.id + ".png", (error, image) => {
        if (error) throw error;
        if (!map.hasImage(e.id)) map.addImage(e.id, image);
        map.getSource('markers').setData(url);
      });
    }
  });

the markers will appear on map

Demo

Answer 2

Just a guess, but does the style you are using not support the marker icons being referenced? I see a number of console warnings, which suggest that the markers are being plotted on the map but the icons don't load.

Image "park-11" could not be loaded. Please make sure you have added the image with map.addImage() or a "sprite" property in your style. You can provide missing images by listening for the "styleimagemissing" map event. util.js:329:52
Image "dot-9" could not be loaded. Please make sure you have added the image with map.addImage() or a "sprite" property in your style. You can provide missing images by listening for the "styleimagemissing" map event. util.js:329:52
Image "dot-10" could not be loaded. Please make sure you have added the image with map.addImage() or a "sprite" property in your style. You can provide missing images by listening for the "styleimagemissing" map event. util.js:329:52
Image "dot-11" could not be loaded. Please make sure you have added the image with map.addImage() or a "sprite" property in your style. You can provide missing images by listening for the "styleimagemissing" map event. util.js:329:52
Image "wetland" could not be loaded. Please make sure you have added the image with map.addImage() or a "sprite" property in your style. You can provide missing images by listening for the "styleimagemissing" map event.

Can you try setting to one of the default styles?

https://docs.mapbox.com/api/maps/#styles

mapbox://styles/mapbox/streets-v11
mapbox://styles/mapbox/outdoors-v11
mapbox://styles/mapbox/light-v10
mapbox://styles/mapbox/dark-v10
mapbox://styles/mapbox/satellite-v9
mapbox://styles/mapbox/satellite-streets-v11
mapbox://styles/mapbox/navigation-preview-day-v4
mapbox://styles/mapbox/navigation-preview-night-v4
mapbox://styles/mapbox/navigation-guidance-day-v4
mapbox://styles/mapbox/navigation-guidance-night-v4