1

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>
<html>
<head>
<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>

<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>

<div id='map'></div>
<script>
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
    }));


//L.esri.featureLayer('http://geoportal1.stadt-koeln.de/ArcGIS/rest/services/Stadtplanthemen/MapServer/9').addTo(map);

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) {
        map.fitBounds(data.lbounds);
    } else if (data.latlng) {
        map.setView([data.latlng[0], data.latlng[1]], 13);
    }
}

L.control.layers({
    '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)

}).addTo(map);

</script>

</body>
</html>

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

Is that true?

3

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.