1

I am a complete nooby to the above libraries.

Till 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 as a nooby I don't get everythin. Someone's got an idea? Thanks

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>

@edit: also seems like the script is loading the "red map" also in the background even though "pencil map" is activated. Is that true?

2

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.

  • I'll try that later. And do you know why the markers only show up in IE while not with Firefox or Chromium? – hoge6b01 Nov 27 '14 at 19:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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