Skip to content

NOtherDev/leaflet-overview

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

L.Control.Overview

Provides an overview map that inherits the layers from the main map.

Fork of areichman/leaflet-overview that adds additional onAfterInitLayout hook that enables responding to overview map events etc. and removes the necessity to define layers for overview map separately - this fork inherits the layers of the main map automatically.

Setup

First, define two base layers and initialize the main map with the default base layer:

var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  name: 'osm',
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
});
          
var mqo = L.tileLayer('http://otile{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png', {
  name: 'mapquest',
  attribution: 'Tiles courtesy of <a href="http://www.mapquest.com/">MapQuest</a>',
  subdomains: '1234'
});
          
var map = L.map('map', {
  layers: osm,
  center: [43.12, -77.67],
  zoom:   10
});

Next, add the layer switcher control to the map:

L.control.layers({
  'OpenStreetMap': osm, 
  'MapQuest Open': mqo
}).addTo(map);

Last, define overview control - it will inherit the layers from the main map:

L.control.overview({
  position: 'bottomleft',
  onAfterInitLayout: function (overview) {
    console.log(overview);
  }
}).addTo(map);

You can see the above code in action in the example.

License

L.Control.Overview is free software, and may be redistributed under the MIT-LICENSE.

About

Overview control for Leaflet

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 50.7%
  • HTML 39.5%
  • CSS 9.8%