Giter Club home page Giter Club logo

leaflet-control-orderlayers's Introduction

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.