Leaflet control with order functionality
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
config
dist
examples
src
test
.gitignore
.project
.travis.yml
CHANGELOG.md
Gruntfile.js
LICENSE
README.md
bower.json
package.json

README.md

Build Status

Leaflet Control Orderlayers

This plugin for leaflet provide support for order overlay layers in leaflet maps, for clone this code:

$ git clone https://github.com/elesdoar/leaflet-control-orderlayers.git

Quick Use

Add javascript files:

  <script src="[path to js]/leaflet-src.js"></script>
  <script src="[path to js]/leaflet.control.orderlayers.min.js"></script>

Add css files:

  <link rel="stylesheet" href="[path to css]/leaflet.control.orderlayers.css" />

Add control:

jQuery(function() {
  var map = L.map('map').setView([4.598056, -74.075833], 13);

  var b1 = L.tileLayer('http://a.tiles.mapbox.com/v3/[map-key]/{z}/{x}/{y}.png', {
      attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
      maxZoom: 20
  }).addTo(map);

  var b2 = L.tileLayer('http://a.tiles.mapbox.com/v3/[map-key]/{z}/{x}/{y}.png', {
      attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
      maxZoom: 20
  });

  var baseLayers = {
    'Streets': b1,
    'Night': b2,
  };

  var bogota =  L.tileLayer.wms("http://mapas.catastrobogota.gov.co/arcgiswsh/Mapa_Referencia/Mapa_referencia/MapServer/WMSServer", {
      layers: '8,7,6,5,4,2',
      format: 'image/png',
      opacity: 0.45,
      transparent: true,
      attribution: 'Catastro Bogotá http://catastrobogota.gov.co',
      crs: L.CRS.EPSG4326,
      version: '1.3.0'
  }).addTo(map);

  var fire = L.tileLayer('http://openfiremap.org/hytiles/{z}/{x}/{y}.png', {
      attribution: '© OpenFireMap contributors - © OpenStreetMap contributors',
    continuousWorld: true
  }).addTo(map);

  var overlayLayers = {
    'Bogotá': bogota,
    'OpenFireMap': fire
  };

  var controls = L.control.orderlayers(baseLayers, overlayLayers, {collapsed: false});
      controls.addTo(map);

  map.setView([4.649, -74.086], 11);
});

Options

  • title: Control title
  • order: Order for layers, 'normal': ascending z-index order, 'qgis': descending z-index order, it's like Qgis or ArcMap.

Licence

MIT Licence