12345678910111213141516171819202122232425262728293031323334353637 |
- <!DOCTYPE html>
- <html>
- <head>
- <title>MiniMap Demo</title>
- <meta charset="utf-8" />
- <link rel="stylesheet" href="./fullscreen.css" />
- <!-- Leaflet -->
- <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css" />
- <!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.ie.css" /><![endif]-->
- <script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet-src.js" type="text/javascript"></script>
- <!-- Leaflet Plugins -->
- <link rel="stylesheet" href="../src/Control.MiniMap.css" />
- <script src="../src/Control.MiniMap.js" type="text/javascript"></script>
- </head>
- <body>
- <div id="map" ></div>
- <script type="text/javascript">
-
- var map = new L.Map('map');
- var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
- var osmAttrib='Map data © OpenStreetMap contributors';
- var osm = new L.TileLayer(osmUrl, {minZoom: 5, maxZoom: 18, attribution: osmAttrib});
- map.addLayer(osm);
- map.setView(new L.LatLng(59.92448055859924, 10.758276373601069),10);
-
- //Plugin magic goes here! Note that you cannot use the same layer object again, as that will confuse the two map controls
- var osm2 = new L.TileLayer(osmUrl, {minZoom: 0, maxZoom: 13, attribution: osmAttrib });
- var miniMap = new L.Control.MiniMap(osm2, { toggleDisplay: true }).addTo(map);
- </script>
- </body>
- </html>
|