I am completely new to these libraries.

Until now, everything shows up very fine. I got my mapbox as a basemap and added some point data provided by an ArcGIS Server. To get the AGS data onto the map I had to use the ESRI Leaflet API.

My first question is:

1.) How can I change the symbol to a different point marker?

and for later:

2.) How could I add some more fancy pointer style (like an CartoCSS)?

There are some examples on the ESRI site but I don't get everything.

Here's the code:

    <!DOCTYPE html>
<meta charset=utf-8 />
<title>A simple map</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' />

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

  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }

<div id='map'></div>
L.mapbox.accessToken = 'pk.eyJ1IjoiaG9nZTZiMDEiLCJhIjoiU2FXX0xJMCJ9.WfLHHkqFGqlFgiOkmxgRDA';
var geocoder = L.mapbox.geocoder('mapbox.places-v1'),
    map = L.mapbox.map('map', 'hoge6b01.kb0pcgai')
        .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) {
    } else if (data.latlng) {
        map.setView([data.latlng[0], data.latlng[1]], 13);

    'Red Map': L.mapbox.tileLayer('hoge6b01.kb0pcgai'),
    'Pencil Map': L.mapbox.tileLayer('examples.a4c252ab').addTo(map)
}, {
//    'Bike Stations': L.mapbox.tileLayer('examples.bike-locations'),
//    'Bike Lanes': L.mapbox.tileLayer('examples.bike-lanes'),
    'Kita': L.esri.featureLayer('http://geoportal1.stadt-koeln.de/ArcGIS/rest/services/Stadtplanthemen/MapServer/9').addTo(map)




It also seems like the script is loading the "red map" also in the background even though "pencil map" is activated.

Is that true?


in order to style the markers that L.esri.featureLayer helps you add to the map, you can use L.icon.

see this leaflet tutorial and this example for more info.

| improve this answer | |

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