[GIS] L.esri.featureLayer shows up and sometimes not

arcgis-serveresri-leafletleafletmapbox

I'm new to the leaflet/esri subject so please forgive me if it's just a simple question.

I wrote my first webmap-app. It uses different sources. The main aim is to show two basemaps hosted by MapBox with an AGS layer coming from a different source.

Mapbox does not make any trouble. The problem is the AGS layer.
Its address is:

http://geoportal1.stadt-koeln.de/ArcGIS/rest/services/Stadtplanthemen/MapServer/9

My script shows four different behaviours. I tested it with two different AG Servers:

  1. Test with http://geoportal1.stadt-koeln.de/ArcGIS/rest/services/Stadtplanthemen/MapServer/9
    a: It shows up in IE10 correctly
    b: Not showing up in FF 33

  2. Test with the same script but a different AGS http://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Heritage_Trees_Portland/FeatureServer/0
    a: Shows up in IE 10
    b: Shows up in FF 33

Well, what is the error in this script? The geoportal1's AGS seems to work properly. FF understands the script. But what's not working? If I use L.esri.dynamicMapLayer instead of L.esri.featureLayer the layer shows up. But for further uses I need the L.esri.featureLayer.

I also published it here:

https://github.com/Esri/esri-leaflet/issues/412

Hopefully someone can help!

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>A simple map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>

<div id='map'></div>

<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' />

  <!-- 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>

L.mapbox.accessToken = 'pk.eyJ1IjoiaG9nZTZiMDEiLCJhIjoiU2FXX0xJMCJ9.WfLHHkqFGqlFgiOkmxgRDA';

var geocoder = L.mapbox.geocoder('mapbox.places-v1');

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

    geocoder.query('Cologne', showMap);

function showMap(err, data) {
    // The geocoder can return an area, like a city, or a
    // point, like an address. Here we handle both cases,
    // by fitting the map bounds to an area or zooming to a point.
    if (data.lbounds) {
        redmap.fitBounds(data.lbounds);
    } else if (data.latlng) {
        redmap.setView([data.latlng[0], data.latlng[1]], 13);
    }
}

var RedLayer = L.mapbox.tileLayer('hoge6b01.kb0pcgai'),
    PencilMap = L.mapbox.tileLayer('examples.a4c252ab').addTo(redmap);

var baseMaps = {
    "Red": RedLayer,
    "Pencil": PencilMap
    };

var greenIcon = L.icon({
    iconUrl: 'http://leafletjs.com/docs/images/leaf-green.png',
    shadowUrl: 'http://leafletjs.com/docs/images/leaf-shadow.png',

    iconSize:     [38, 95], // size of the icon
    shadowSize:   [50, 64], // size of the shadow
    iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
    shadowAnchor: [4, 62],  // the same for the shadow
    popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
    });


//  http://geoportal1.stadt-koeln.de/ArcGIS/rest/services/Stadtplanthemen/MapServer/9
 var kita = L.esri.featureLayer('http://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Heritage_Trees_Portland/FeatureServer/0' , {
            pointToLayer: function (geojson, latlng) {
            return L.marker(latlng, {
            icon: greenIcon
            });
            },
            }).addTo(redmap);

var overlayMaps = {
    "Kita": kita
    };

L.control.layers(baseMaps, overlayMaps).addTo(redmap);

</script>

</body>
</html>

Best Answer

I think this is an issue with CORS. The layer you are trying to use is on an older version of server (10.0x) which mean that it does not ship with support for cross origin requests (CORS) out of the box.

Esri Leaflet assumes newer versions of server (10.1x) which include support for CORS. You just need to tell Esri Leaflet not to use CORS the following sample code works. 

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

I also fixed your fiddle up a bit http://jsfiddle.net/ssokdzad/1/ so it works now.

Related Question