0

I am new to writing leaflet/Mapbox code.

I have a map with the following code. Works like charm in FF but cannot see anything in IE. Maybe it is just a comma error like here?

Can someone take a look and point out what the error is?

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>
      Leaflet OSM
    </title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.js'>
    </script>
    <link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.css' rel='stylesheet' />
    <style>
      body {
        margin:0;
        padding:0;
      }
      #map {
        position:absolute;
        top:0;
        bottom:0;
        width:100%;
      }
    </style>
  </head>
  <body>

    <!-- Load Esri Leaflet from CDN -->
    <script src="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet/1.0.0-rc.4/esri-leaflet.js">
    </script>

    <script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.24.0/L.Control.Locate.js'>
    </script>
    <link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.24.0/L.Control.Locate.css' rel='stylesheet' />

    <!-- jQuery is required for this example. -->
    <script src='https://code.jquery.com/jquery-1.11.0.min.js'>
    </script>
    <script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-osm/v0.1.0/leaflet-osm.js'>
    </script>

    <!-- 
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-minimap/v1.0.0/Control.MiniMap.js'>
</script>
<link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-minimap/v1.0.0/Control.MiniMap.css' rel='stylesheet' />
-->

  <style>
    .leaflet-control-locate {
      border:1px solid rgba(0,0,0,0.4);
    }
    ;
    .leaflet-control-locate a {
      background-color:#fff;
      background-position:-3px, -2px;
    }
    ;
    .leaflet-control-locate.active a {
      background-position:-33px -2px;
    }
    ;
  </style>

  <!-- Include Leaflet.markercluster via rawgit.com, do not use in production -->
  <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/Leaflet/Leaflet.markercluster/v0.4.0/dist/MarkerCluster.Default.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/Leaflet/Leaflet.markercluster/v0.4.0/dist/MarkerCluster.css">
  <script src="https://cdn.rawgit.com/Leaflet/Leaflet.markercluster/v0.4.0/dist/leaflet.markercluster.js">
  </script>

  <!-- Load Clustered Feature Layer from CDN -->
  <script src="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet-clustered-feature-layer/1.0.0-rc.1/esri-leaflet-clustered-feature-layer.js">
  </script>

  <div id='map'>
  </div>
  <script>
    L.mapbox.accessToken = 'pk.eyJ1IjoiaG9nZTZiMDEiLCJhIjoiU2FXX0xJMCJ9.WfLHHkqFGqlFgiOkmxgRDA';
    var map = L.mapbox.map('map')

        var geocoder = L.mapbox.geocoderControl('mapbox.places-v1', {
          autocomplete: true
        }
                                               );

  var iplocate = L.control.locate();

  var baseLayers = {
    Streets: L.mapbox.tileLayer('examples.map-i87786ca'),
    Outdoors: L.mapbox.tileLayer('examples.ik7djhcc'),
    Satellite: L.mapbox.tileLayer('examples.map-igb471ik')
  }
    ;

  var overLayer = {
    Kita: L.esri.clusteredFeatureLayer('http://geoportal1.stadt-koeln.de/ArcGIS/rest/services/Stadtplanthemen/MapServer/9' , {
      useCors:false
    }
                                      )}
      ;

  geocoder.addTo(map);
  iplocate.addTo(map);
  baseLayers.Streets.addTo(map);
  overLayer.Kita.addTo(map);
  L.control.layers(baseLayers, overLayer).addTo(map);

  $.ajax({
    url: "https://www.openstreetmap.org/api/0.6/way/315192257/full",
  dataType: "xml",
  success: function (xml) {
    var layer = new L.OSM.DataLayer(xml).addTo(map);
    map.fitBounds(layer.getBounds());
  }
}
      );
  </script>


  </body>
</html>
Improve this question

1 Answer 1

Reset to default
2

I presume, you are running this code directly from your computer, not from web server. In other words, URL in browser's address bar starts with file:/// not with http://

There's cross-domain ajax call in your code:

$.ajax({
  url: "https://www.openstreetmap.org/api/0.6/way/315192257/full",
  dataType: "xml",
  success: function (xml) {
    var layer = new L.OSM.DataLayer(xml).addTo(map);
    map.fitBounds(layer.getBounds());
  }
});

When this call succeeds, new layer (with blue building outline) is created AND map is zoomed to correct location.

When call fails, nothing special happens. There's no Javascript error. Map is, in fact, working correctly. There's no fitBounds done for map - therefore map displays just white area. You could add

error: function() {
  map.fitWorld();
}

to your ajax call, so it will behave more reasonably.

Now, back to your problem. That AJAX call is cross-domain, done with help of CORS header. It seems, some browsers, like IE, doesn't support CORS headers, when page is executed from local computer (resulting Access-Control-Allow-Origin: null response header). You should upload your page to webserver and run it from there.

(Or you could look, maybe openstreetmap API supports JSONP calls - not sure about this.)

Improve this answer
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.