example.html 1.3 KB

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