Question

I have followed the leaflet tutorial on how to create Layer Control and the custom markers:

Markers:http://leafletjs.com/examples/custom-icons.html
Control: http://leafletjs.com/examples/layers-control.html

I am using the control code and i would like to add my custom marker to this. When applying the code it the map goes blank and breaks. Im not sure if it’s something do to with the positioning with the “add to map” and “bindpopup”. Any help would be great.

CODE:

[CLOUDMADE API KEY AND INFO HERE]

var officeIcon = L.icon({
    iconUrl: 'images/office1.png'
});

var london = L.marker([51.3512542357518,-0.461769104003906],{icon: officeIcon}).addTo(map).bindPopup('<b>Office Address</b>');


var cities = L.layerGroup([london]);

var minimal   = L.tileLayer(cloudmadeUrl, {styleId: 22677}),
midnight  = L.tileLayer(cloudmadeUrl, {styleId: 999}),
motorways = L.tileLayer(cloudmadeUrl, {styleId: 46561});

var map = L.map('map', {
center: new L.LatLng(54.980000,-1.5975022315979004),
zoom: 10,
layers: [minimal, motorways, cities]
});

var baseMaps = {
    "Minimal": minimal,
    "Night View": midnight,

};

var overlayMaps = {
    "Motorways": motorways,
    "Display Markers": cities
};

map.addControl(new MyControl());
L.control.layers(baseMaps, overlayMaps).addTo(map);

Answer 1

The problem is that you’re adding the marker to the map before you have defined the map. I would recommend using firebug for firefox or the equivalent in chrome. That way you could look at the console and you would see the error:

'Uncaught TypeError: Cannot call method 'addLayer' of undefined'
  L.Marker.L.Class.extend.addTo leaflet-src.js:2993
  addVehicleContentUI obelix.dev:1074
  (anonymous function) obelix.dev:718
  (anonymous function) obelix.dev:1292
  p.event.dispatch jquery-1.8.0.min.js:2
  g.handle.h

This pointed me to the L.Marker which made me realise that you hadn’t defined the map yet. The problem you have is that you’re adding the marker to the map as well as adding it to the group layer. Just don’t add it to the map (as per the tutorial you were following). so remove the code:

.addTo(map)

from:

var london = L.marker([51.3512542357518,-0.461769104003906],{icon: officeIcon}).addTo(map).bindPopup('<b>Office Address</b>');

The next problem is that MyControl isn’t a control, I commented out the following line:

map.addControl(new MyControl());

From your code snippet, I presume you have a key from cloudmade. If so then it should work fine. I tested it locally and everything was good.

I do highly recommend getting firebug if you’re using firefox or the equiv for chrome if you use chrome. Looking at the console will show you these problems and you can even set breakpoints and step through the javascript as it executes. An invaluable tool for javascript programming IMHO.

Cheers.