Leaflet – Adding Simple Image Layers to MapBox/Leaflet

layersleafletmapbox

Is there an easy way to add simple image layers (with no, or very limited, GIS data) to Mapbox and/or Leaflet?

Google maps seems to have the ability to add custom layers, simply by attaching the SW and NE corners to points on the image to points on the map

I thought that MapBox or Leaflet would have similar functionality, but I'm struggling so far.

I (presumptuously?) assumed that TileMill might allow me to import a non-GIS labelled image and drag and drop it to the correct position – much as you might align two Photoshop layers. However, I seem to only be able to import GIS datasourced layers, the closest of which to my needs seems to be GeoTIFF.

Best Answer

Use an imageOverlay layer. You only need to specify the bounding box of the image. Check the example of the API documentation:

var imageUrl = 'http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
    imageBounds = [[40.712216, -74.22655], [40.773941, -74.12544]];

L.imageOverlay(imageUrl, imageBounds).addTo(map);

Related Solutions

Leaflet – Understanding Layer Ordering with CartoDB Layers

neither createLayer or createVis return a leaflet layer, the right way would be

 var map = new L.map('map', {
    center : [42.339926, -83.04137],
    zoom : 13

 });

// add here your mapbox layer

createLayer(map,vizjson_url).addTo(map).done(function(layer) {
  layer.setZIndex(1);
})
createLayer(map,vizjson_url2).addTo(map).done(function(layer) {
  layer.setZIndex(2);
})

[GIS] Adding multiple layers with timed delay in Mapbox/Leaflet

Welp, figured out my answer after posting this, naturally. The code below is much different but works like a charm.

// define map
var map = L.map('map').setView([57.8915,86.8359], 3);

// define addLayer function
function addLayer(layer, name, zIndex) {
    layer
        .setZIndex(zIndex)
        .addTo(map);
}

// add basemap only
addLayer(L.mapbox.tileLayer('mymapboxaccount.7xu07ldi'), 'Base Map', -1);

// here are the new layers we're going to add
var layers =  [L.mapbox.tileLayer('mymapboxaccount.wv29be29'),
      L.mapbox.tileLayer('mymapboxaccount.d08p8pvi'),
      L.mapbox.tileLayer('mymapboxaccount.0tivygb9'),
      L.mapbox.tileLayer('mymapboxaccount.lv8l4n29'),
      L.mapbox.tileLayer('mymapboxaccount.mlr9hpvi')
      ];

// and the length of said array so that the timer will stop
var arrayLength = layers.length;

// set the counter for the timer
var i = 0;                     

// set the timer delay function to add layers to map, calling function name in HTML button
function gogogo () {           
   setTimeout(function () {    
      addLayer(layers[i], i); // adding one layer at a time from the array
      i++;                     
      if (i < arrayLength) {            
         gogogo();             
      }                        
   }, 2000); // delay between layer adds in milliseconds
}

Best Answer

Related Solutions

Leaflet – Understanding Layer Ordering with CartoDB Layers

[GIS] Adding multiple layers with timed delay in Mapbox/Leaflet

Related Question