index.html 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <title>Leaflet Provider Demo</title>
  5. <meta charset="utf-8" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  8. <!-- Leaflet style. REQUIRED! -->
  9. <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />
  10. <style>
  11. html { height: 100% }
  12. body { height: 100%; margin: 0; padding: 0;}
  13. .map { height: 100% }
  14. </style>
  15. <!--Fork Me on Github ribbon, we're using the awsome version from simonwhitaker available at https://github.com/simonwhitaker/github-fork-ribbon-css -->
  16. <link rel="stylesheet" href="css/gh-fork-ribbon.css" />
  17. <!--[if IE]>
  18. <link rel="stylesheet" href="css/gh-fork-ribbon.ie.css" />
  19. <![endif]-->
  20. </head>
  21. <body>
  22. <div class="github-fork-ribbon-wrapper left">
  23. <div class="github-fork-ribbon">
  24. <a href="https://github.com/leaflet-extras/leaflet-providers">Fork me on GitHub</a>
  25. </div>
  26. </div>
  27. <div id="map" class="map"></div>
  28. <script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet-src.js"></script>
  29. <script src="leaflet-providers.js"></script>
  30. <script>
  31. var map = L.map('map', {
  32. center: [48, -3],
  33. zoom: 5,
  34. zoomControl: false
  35. });
  36. var defaultLayer = L.tileLayer.provider('OpenStreetMap.Mapnik').addTo(map);
  37. var baseLayers = {
  38. 'OpenStreetMap Default': defaultLayer,
  39. 'OpenStreetMap German Style': L.tileLayer.provider('OpenStreetMap.DE'),
  40. 'OpenStreetMap Black and White': L.tileLayer.provider('OpenStreetMap.BlackAndWhite'),
  41. 'OpenStreetMap H.O.T.': L.tileLayer.provider('OpenStreetMap.HOT'),
  42. 'Thunderforest OpenCycleMap': L.tileLayer.provider('Thunderforest.OpenCycleMap'),
  43. 'Thunderforest Transport': L.tileLayer.provider('Thunderforest.Transport'),
  44. 'Thunderforest Landscape': L.tileLayer.provider('Thunderforest.Landscape'),
  45. 'MapQuest OSM': L.tileLayer.provider('MapQuestOpen.OSM'),
  46. 'MapQuest Aerial': L.tileLayer.provider('MapQuestOpen.Aerial'),
  47. 'MapBox Example': L.tileLayer.provider('MapBox.examples.map-zr0njcqy'),
  48. 'Stamen Toner': L.tileLayer.provider('Stamen.Toner'),
  49. 'Stamen Terrain': L.tileLayer.provider('Stamen.Terrain'),
  50. 'Stamen Watercolor': L.tileLayer.provider('Stamen.Watercolor'),
  51. 'Esri WorldStreetMap': L.tileLayer.provider('Esri.WorldStreetMap'),
  52. 'Esri DeLorme': L.tileLayer.provider('Esri.DeLorme'),
  53. 'Esri WorldTopoMap': L.tileLayer.provider('Esri.WorldTopoMap'),
  54. 'Esri WorldImagery': L.tileLayer.provider('Esri.WorldImagery'),
  55. 'Esri WorldTerrain': L.tileLayer.provider('Esri.WorldTerrain'),
  56. 'Esri WorldShadedRelief': L.tileLayer.provider('Esri.WorldShadedRelief'),
  57. 'Esri WorldPhysical': L.tileLayer.provider('Esri.WorldPhysical'),
  58. 'Esri OceanBasemap': L.tileLayer.provider('Esri.OceanBasemap'),
  59. 'Esri NatGeoWorldMap': L.tileLayer.provider('Esri.NatGeoWorldMap'),
  60. 'Esri WorldGrayCanvas': L.tileLayer.provider('Esri.WorldGrayCanvas'),
  61. 'Nokia Normal Day': L.tileLayer.provider('Nokia.normalDay'),
  62. 'Nokia Normal Day Grey': L.tileLayer.provider('Nokia.normalGreyDay'),
  63. 'Nokia Satellite': L.tileLayer.provider('Nokia.satelliteNoLabelsDay'),
  64. 'Nokia Satellite (Labeled)': L.tileLayer.provider('Nokia.satelliteYesLabelsDay'),
  65. 'Nokia Terrain': L.tileLayer.provider('Nokia.terrainDay'),
  66. 'Acetate': L.tileLayer.provider('Acetate')
  67. };
  68. var overlayLayers = {
  69. 'OpenSeaMap': L.tileLayer.provider('OpenSeaMap'),
  70. 'OpenWeatherMap Clouds': L.tileLayer.provider('OpenWeatherMap.Clouds'),
  71. 'OpenWeatherMap CloudsClassic': L.tileLayer.provider('OpenWeatherMap.CloudsClassic'),
  72. 'OpenWeatherMap Precipitation': L.tileLayer.provider('OpenWeatherMap.Precipitation'),
  73. 'OpenWeatherMap PrecipitationClassic': L.tileLayer.provider('OpenWeatherMap.PrecipitationClassic'),
  74. 'OpenWeatherMap Rain': L.tileLayer.provider('OpenWeatherMap.Rain'),
  75. 'OpenWeatherMap RainClassic': L.tileLayer.provider('OpenWeatherMap.RainClassic'),
  76. 'OpenWeatherMap Pressure': L.tileLayer.provider('OpenWeatherMap.Pressure'),
  77. 'OpenWeatherMap PressureContour': L.tileLayer.provider('OpenWeatherMap.PressureContour'),
  78. 'OpenWeatherMap Wind': L.tileLayer.provider('OpenWeatherMap.Wind'),
  79. 'OpenWeatherMap Temperature': L.tileLayer.provider('OpenWeatherMap.Temperature'),
  80. 'OpenWeatherMap Snow': L.tileLayer.provider('OpenWeatherMap.Snow')
  81. };
  82. var layerControl = L.control.layers(baseLayers, overlayLayers, {collapsed: false}).addTo(map);
  83. /* you could also use the following code instead
  84. var map = new L.Map('map').setView([48, -3],5);
  85. var defaultLayer = L.tileLayer.provider('OpenStreetMap.Mapnik').addTo(map);
  86. var baseLayers = [
  87. 'OpenStreetMap.Mapnik',
  88. 'OpenStreetMap.DE',
  89. 'OpenStreetMap.BlackAndWhite',
  90. 'Thunderforest.OpenCycleMap',
  91. 'Thunderforest.Transport',
  92. 'Thunderforest.Landscape',
  93. 'MapQuestOpen.OSM',
  94. 'MapQuestOpen.Aerial',
  95. 'MapBox.examples.map-zr0njcqy',
  96. 'Stamen.Toner',
  97. 'Stamen.Terrain',
  98. 'Stamen.Watercolor',
  99. 'Esri.WorldStreetMap',
  100. 'Esri.DeLorme',
  101. 'Esri.WorldTopoMap',
  102. 'Esri.WorldImagery',
  103. 'Esri.WorldTerrain',
  104. 'Esri.WorldShadedRelief',
  105. 'Esri.WorldPhysical',
  106. 'Esri.OceanBasemap',
  107. 'Esri.NatGeoWorldMap',
  108. 'Esri.WorldGrayCanvas',
  109. 'Nokia.normalDay',
  110. 'Nokia.normalGreyDay',
  111. 'Nokia.satelliteNoLabelsDay',
  112. 'Nokia.satelliteYesLabelsDay,
  113. 'Nokia.terrainDay'
  114. ];
  115. var overlayLayers = [
  116. 'OpenWeatherMap.Clouds',
  117. 'OpenWeatherMap.CloudsClassic',
  118. 'OpenWeatherMap.Precipitation',
  119. 'OpenWeatherMap.PrecipitationClassic',
  120. 'OpenWeatherMap.Rain',
  121. 'OpenWeatherMap.RainClassic',
  122. 'OpenWeatherMap.Pressure',
  123. 'OpenWeatherMap.PressureContour',
  124. 'OpenWeatherMap.Wind',
  125. 'OpenWeatherMap.Temperature',
  126. 'OpenWeatherMap.Snow'
  127. ];
  128. L.control.layers.provided(baseLayers, overlayLayers, {collapsed: false}).addTo(map);
  129. */
  130. // resize layers control to fit into view.
  131. function resizeLayerControl() {
  132. var layerControlHeight = document.body.clientHeight - (10 + 50);
  133. var layerControl = document.getElementsByClassName('leaflet-control-layers-expanded')[0];
  134. layerControl.style.overflowY = 'auto';
  135. layerControl.style.maxHeight = layerControlHeight + 'px';
  136. }
  137. map.on('resize', resizeLayerControl);
  138. resizeLayerControl();
  139. </script>
  140. </body>
  141. </html>