Mapbox markers from geoJSON not appearing in IE9

Question

I have a map that is loading markers from a local geoJSON file. This works fine in all browsers I have tested (FF, Chrome, Safari, Opera, IE10, IE11) but not in IE9.

I added a marker to the map without geoJSON (the yellow bus marker) which does show up fine in IE9.

Here is the relevant code:

    // set up mapbox
    var map = new L.mapbox.map('map', '########', {
        tileLayer: {
            detectRetina: true,
            minZoom: 2
        },
        zoomControl: false
    });

    // marker without geoJSON
    L.marker([-37.9, -77], {
        icon: L.mapbox.marker.icon({
            'marker-size': 'large',
            'marker-symbol': 'bus',
            'marker-color': '#fa0'
        })
    }).addTo(map);

    // markers with geoJSON
    var geoJsonData = L.mapbox.featureLayer().loadURL('http://nomacorc.cuberishosting.com/wp-content/themes/nomacorc/map-lib/sellers-locations.php').addTo(map);

You can see a working example at: http://nomacorc.cuberishosting.com/purchase-test/.

Here is a link to the geoJSON file: http://nomacorc.cuberishosting.com/wp-content/themes/nomacorc/map-lib/sellers-locations.php

The geoJSON itself appeared to validate for me at http://geojsonlint.com/

Answer 1

Looks like it was something with the way the JSON was being called in the loadURL function. I pulled the JSON with AJAX to fix it like so:

    // url to file with geojson data
    var url = 'http://nomacorc.cuberishosting.com/wp-content/themes/nomacorc/map-lib/sellers-locations.php';

    // load geojson file
    $.getJSON(url, function(data) {

        var featureMarkers = L.mapbox.featureLayer(data, {sanitizer: function(string) {return string;}});

        // The rest of my code here...
    });