IE8 issue with Leaflet and CartoDB

Question

I'm having some trouble getting this map to work in IE8. Currently tried using some of the old IE8 CSS for both but that didn't seem to work. Any ideas for this?

Here is the code for the main map:

<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
<link rel="stylesheet" href="css/style.css" />
<link href="css/leaflet-search.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v2/themes/css/cartodb.ie.css" />
<![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" /><![endif]-->
<script src="js/cartodb.js"></script>
<script src="js/leaflet-search.js"></script>
<script type="text/javascript" src="js/leaflet-hash.js"></script>
<script>
var map;

function init() {
  // initiate leaflet map
  map = new L.Map('map', { 
        zoomControl: true,
        center: [49.2500, -123.1000],
        zoom: 10,
  }) 
   L.tileLayer('https://a.tiles.mapbox.com/v3/cardinalmaps.jf059aad/{z}/{x}/{y}.png', {
    attribution: ''
  }).addTo(map);      

  var layerUrl = '';
  var sublayers = [];
  var LayerActions = {
    reset: function(){
      sublayers[0].setSQL("SELECT * FROM do_not_update_bc_shelter_data");
      return true;
    },
    yearround: function(){
      sublayers[0].setSQL("SELECT * FROM do_not_update_bc_shelter_data WHERE open_closed = 'Year-Round Shelter'");
      return true;
    },
        closed: function(){
      sublayers[0].setSQL("SELECT * FROM do_not_update_bc_shelter_data WHERE open_closed = 'EWR Shelter - Closed'");
      return true;
    },
    openshelters: function(){
    sublayers[0].setSQL("SELECT * FROM do_not_update_bc_shelter_data  WHERE open_closed = 'EWR Shelter - Open'");
      return true;
    },
  };

  cartodb.createLayer(map, layerUrl)
    .addTo(map)
    .on('done', function(layer) {
      // change the query for the first layer
      var subLayerOptions = {
        sql: "SELECT * FROM do_not_update_bc_shelter_data",
      }
      var sublayer = layer.getSubLayer(0);
      sublayer.set(subLayerOptions);
      sublayer.on('featureClick', function(e, latlng, pos, data, layer) {
        console.log(pos)
        map.panTo(latlng, {animate:true})
      });


      sublayers.push(sublayer);
    }).on('error', function() {
      //log the error
    });


  $('.button').click(function() {
    $('.button').removeClass('selected');
    $(this).addClass('selected');
    LayerActions[$(this).attr('id')]();
  });

      map.addControl( new L.Control.Search({
        url: 'http://nominatim.openstreetmap.org/search?format=json&q={s}&countrycodes=ca&state=bc&bounded=1',
        jsonpParam: 'json_callback',
        propertyName: 'display_name',
        propertyLoc: ['lat','lon'],
    zoom: 13,
      }) );  
}

And here is the map online:

http://cardinalmaps.com/files/bchousing-4/

Answer 1

IE8 can't handle trailing commas in object literals

map = new L.Map('map', { 
    zoomControl: true,
    center: [49.2500, -123.1000],
    zoom: 10, // Delete this comma
})

There are three other trailing commas, around line 57, 67, 96 in the inline script on the index page (console debug in IE will show you where)

There will probably be other issues in IE8, but try fixing those first

Answer 2

Another possible problem I see is depending on cartodb.js version you are using it only works with versions of leaflet > 0.7. In your example you are using the css for version 0.6.4