在地图之前加载标记

Question

I'm trying to reproduce Foursquare's web user interface.
What I noticed is that on the tip map, the markers are load way before the map was loaded.
is this possible with leaflet ? With this piece of code, I don't think it's possible

L.marker([lat, lng], {icon: iconMarker}).addTo(map);

How are they doing it?

Answer 1

I think I know how: They're loading the Tiles after positioning the markers, something like :

 markers = L.marker([lat, lng], {icon: iconMarker}).addTo(map);
L.tileLayer('https://{s}.tiles.mapbox.com/v4/MapID/{z}/{x}/{y}.png?access_token=Token').addTo(map);

Answer 2

Ofcourse, just as long as the Leaflet library is loaded, you can create markers, layers, polygons, whatever. There doesn't have to be an instance of L.Map to do this.

// Define marker first
var marker = L.marker([0,0]);

// Define map later   
var map = L.map('map', {
  'center': [0, 0],
  'zoom': 1,
  'layers': [
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      'attribution': 'Map data © OpenStreetMap contributors'
    })
  ]
});

// Add afterwards
marker.addTo(map);

Working example on Plunker: http://plnkr.co/edit/0zaogf?p=preview

Or include the marker when defining the map:

// Define marker first
var marker = L.marker([0,0]);

// Define map later include marker
var map = L.map('map', {
  'center': [0, 0],
  'zoom': 1,
  'layers': [
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      'attribution': 'Map data © OpenStreetMap contributors'
    }),
    marker
  ]
});