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