title: Leaftlet.JS/CartoDB.JS API Map not working on IE or Firefox
body: <p>I have a map that was built using Leaflet.JS and CartoDB.JS API. The map works beautifully on Google Chrome and Safari, but the pins do not show up on IE, and on FireFox, the pins show up but you can't click them.</p>
  
  <p>Here is the URL: <a href="http://booktravelbound.net/experienceamerica/" rel="nofollow noreferrer">http://booktravelbound.net/experienceamerica/</a> </p>
  
  <p>I am not an expert developer and I had this job done by a contractor. Would someone be able to help? First time on Stack Overflow, so please forgive me! </p>
  
  <p>Here is the javascript code:</p>
  
  <pre><code>var InteractiveMap = L.Class.extend({
  
  options: {
      'redIcon' : L.icon({
          iconUrl: 'img/leaflet-color-markers/marker-icon-red.png',
          iconRetinaUrl: 'img/leaflet-color-markers/marker-2x-red.png',
          iconSize: [25, 41],
          iconAnchor: [12, 41],
          popupAnchor: [1, -34],
          shadowSize: [41, 41]
          //shadowUrl: 'my-icon-shadow.png',
         //shadowRetinaUrl: 'my-icon-shadow@2x.png',           
          //shadowAnchor: [22, 94]
      }),
      'greyIcon' : L.icon({
          iconUrl: 'img/leaflet-color-markers/marker-icon-grey.png',
          iconRetinaUrl: 'img/leaflet-color-markers/marker-icon-2x-grey.png',
          iconSize: [25, 41],
          iconAnchor: [12, 41],
          popupAnchor: [1, -34],
          shadowSize: [41, 41]
          //shadowUrl: 'my-icon-shadow.png',
          //shadowRetinaUrl: 'my-icon-shadow@2x.png',           
          //shadowAnchor: [22, 94]
      })
  },
  
  initialize: function(options) {       
      L.setOptions(this, options);
      if (null != this.options.cartoDbOptions) {
          this.initMapAsCartoDbViz();
      } else {
          this.initMapInUsualWay();
      }
  },
  
  initMapInUsualWay: function() {
      this._map = L.map(this.options.mapDivId, this.options.mapOptions);
  
      this.initBaseMapLayers();
  
      L.control.scale( { position : 'bottomright' } ).addTo(this._map);
      this.completeInit();
  },
  
  initMapAsCartoDbViz: function() {
      var _interactiveMap = this;
      cartodb.createVis(this.options.mapDivId, this.options.cartoDbOptions.vizURL,
          L.extend({
              center_lat: this.options.mapOptions.center.lat,
              center_lon: this.options.mapOptions.center.lng,
              zoom: this.options.mapOptions.zoom
          }, this.options.cartoDbOptions.vizOptions)
      )
      .done(function (vis, layers) {
          // layer 0 is the base layer, layer 1 is cartodb layer
          // setInteraction is disabled by default
          _interactiveMap._map = vis.getNativeMap();
          _interactiveMap.completeInit();
      })
      .error(function (err) {
          console.log(err);
          _interactiveMap.initMapInUsualWay();
      });
  },
  
  initBaseMapLayers: function() {
      var baseMapLayerDescription = [
          { 'id' :"Carto", 'name' : 'Carto', 'default' : 'true',
                  init : function() {
                      var layer = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', {
                          maxZoom: 18, attribution: '&amp;copy; &lt;a href="http://www.openstreetmap.org/copyright"&gt;OpenStreetMap&lt;/a&gt;, &amp;copy;&lt;a href="https://carto.com/attribution"&gt;CARTO&lt;/a&gt;'
                      });
                      return layer;
                  }
          }
      ];
      this._baseMaps = {};       
      for (i=0, arrLen = baseMapLayerDescription.length; i &lt; arrLen; i++) {    
          var tileLayer = baseMapLayerDescription[i].init();           
          this._baseMaps[baseMapLayerDescription[i].name] = tileLayer;
          if (baseMapLayerDescription[i].default) {
              tileLayer.addTo(this._map);
          }
      }
  },
  
  completeInit: function() {
      this.initCustomControlsOnMap();
      this._getJSON(this.options.dataUrl, this.addJsonToMap, this);
      this.initSideBar();
  },
  
  initCustomControlsOnMap: function() {
      //controlLayers = L.control.layers(this._baseMaps, this._overlayLayers);
      //controlLayers.addTo(this._map);
  },
  
  initSideBar: function() {
      this._sideMenuTemplate = document.getElementById('sideMenuTemplate').innerText;
      Mustache.parse(this._sideMenuTemplate);
  
      this._sidebar = L.control.sidebar('sidebar', {
          closeButton: true,
          position: 'right'
      });
      this._map.addControl(this._sidebar);
  },
  
  addJsonToMap: function(data) {
      var lineLatLngs = [];
      for (var i = 0, arrLenght = data.length; i &lt; arrLenght; i++) {
          var city = data[i],
              location = city.location.split(','),
              marker;
          if (city.active) {
              marker = L.marker(location, { icon : this.options.redIcon });
              lineLatLngs.push(marker.getLatLng());
              marker.cityDetails = city;
              marker.cityDetails.showHotels = !(null == city.hotels);
              marker.cityDetails.showTours = !(null == city.tours);
              marker.on('click', function () {
                  //interactiveMap._sidebar.setContent('');
                  interactiveMap._sidebar.getContainer().scrollTop = 0;
                  var sideMenuContext = Mustache.render(interactiveMap._sideMenuTemplate, this.cityDetails);
                  interactiveMap._sidebar.setContent(sideMenuContext);
                  interactiveMap._sidebar.show();
              });
          } else {
              if ('0' === L.version.substr(0, 1)) { // v.0.7.x doesn't implemented marker.bindTooltip
                  marker = L.marker(location, {
                      icon : this.options.greyIcon,
                      title : 'We haven\'t visited this city yet! Check back next week for new cities.'
                  });
              } else {
                  marker = L.marker(location, { icon : this.options.greyIcon });
                  marker.bindTooltip('We haven\'t visited this city yet!&lt;br/&gt;Check back next week for new cities.');
              }
              marker.on('click', function () {
                  interactiveMap._sidebar.hide();
              });
          }
          marker.addTo(this._map);
      }
      L.polyline(lineLatLngs, {dashArray: "5, 5"}).addTo(this._map);
  },
  
  _getJSON: function(url, callback, callbackContext) {
      var xhr = new XMLHttpRequest();
      xhr.open('GET', url, true);
      //xhr.responseType = 'json';
      //xhr.setRequestHeader('Accept', 'application/json');
      xhr.onload = function () {
          if (xhr.readyState === 4 &amp;&amp; xhr.status &gt;= 200 &amp;&amp; xhr.status &lt;= 304 &amp;&amp; xhr.response) {
              //callback.call(callbackContext, xhr.response);
              callback.call(callbackContext, JSON.parse(xhr.response));
          } else {
              console.log('getJSON error', xhr);
          }
      };
      xhr.send();
  }
  });
  
  
  var interactiveMap = new InteractiveMap( {
      mapDivId : 'map',
      mapOptions : {
          center: L.latLng(37.19533058280065, -98.87695312500001),
          zoom: 4,
          zoomControl : false,
          dragging : false,
          doubleClickZoom : false,
          scrollWheelZoom : false
      },
  
      cartoDbOptions : {
          vizURL : 'http://telegul.carto.com/api/v2/viz/b167e126-38e5-11e7-ba84-0e3ebc282e83/viz.json', // &lt;-- INSERT {YOUR vizjson_url}
          vizOptions : {
              shareable: false,
              title: false,
              description: false,
              search: false,
              zoomControl: false,
              cartodb_logo : false,
              tiles_loader: true,
              infowindow: false,
              layer_selector: false,           
              scrollwheel: false,
              layer_selector: false,
              legends: false
          }
      },
      dataUrl : 'data/ExperienceDomesticMap.json'
  } );
  </code></pre>
  
  <p>Thank you!</p>