2015-01-10 13:11:12 +01:00
<!doctype html>
< html lang = "en" >
< head >
< title > Leaflet Provider Demo< / title >
< meta charset = "utf-8" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" / >
<!-- Leaflet style. REQUIRED! -->
2015-10-30 23:40:15 +01:00
< link rel = "stylesheet" href = "//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" / >
2015-01-10 13:11:12 +01:00
< style >
html { height : 100 % }
body { height : 100 % ; margin : 0 ; padding : 0 ; }
. map { height : 100 % }
< / style >
<!-- Fork Me on Github ribbon, we're using the awsome version from simonwhitaker available at https://github.com/simonwhitaker/github - fork - ribbon - css -->
< link rel = "stylesheet" href = "css/gh-fork-ribbon.css" / >
<!-- [if IE]>
<link rel="stylesheet" href="css/gh - fork - ribbon.ie.css" />
<![endif] -->
< / head >
< body >
< div class = "github-fork-ribbon-wrapper left" >
< div class = "github-fork-ribbon" >
< a href = "https://github.com/leaflet-extras/leaflet-providers" > Fork me on GitHub< / a >
< / div >
< / div >
< div id = "map" class = "map" > < / div >
2015-10-30 23:40:15 +01:00
< script src = "//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js" > < / script >
2015-01-10 13:11:12 +01:00
< script src = "leaflet-providers.js" > < / script >
< script >
var map = L . map ( 'map' , {
center : [ 48 , - 3 ] ,
zoom : 5 ,
zoomControl : false
} ) ;
var defaultLayer = L . tileLayer . provider ( 'OpenStreetMap.Mapnik' ) . addTo ( map ) ;
var baseLayers = {
'OpenStreetMap Default' : defaultLayer ,
'OpenStreetMap German Style' : L . tileLayer . provider ( 'OpenStreetMap.DE' ) ,
'OpenStreetMap Black and White' : L . tileLayer . provider ( 'OpenStreetMap.BlackAndWhite' ) ,
'OpenStreetMap H.O.T.' : L . tileLayer . provider ( 'OpenStreetMap.HOT' ) ,
'Thunderforest OpenCycleMap' : L . tileLayer . provider ( 'Thunderforest.OpenCycleMap' ) ,
'Thunderforest Transport' : L . tileLayer . provider ( 'Thunderforest.Transport' ) ,
'Thunderforest Landscape' : L . tileLayer . provider ( 'Thunderforest.Landscape' ) ,
'Hydda Full' : L . tileLayer . provider ( 'Hydda.Full' ) ,
'MapQuest OSM' : L . tileLayer . provider ( 'MapQuestOpen.OSM' ) ,
'MapQuest Aerial' : L . tileLayer . provider ( 'MapQuestOpen.Aerial' ) ,
2015-10-30 23:40:15 +01:00
'MapBox Example' : L . tileLayer . provider ( 'MapBox' , { id : 'mapbox.streets' , accessToken : 'pk.eyJ1IjoiZ3V0ZW55ZSIsImEiOiJmNjJlMDNmYTUyMzNjMzQxZmY4Mzc1ZmFiYmExNjMxOSJ9.xgl1PBwQV9CtwW-usedrcQ' } ) ,
2015-01-10 13:11:12 +01:00
'Stamen Toner' : L . tileLayer . provider ( 'Stamen.Toner' ) ,
'Stamen Terrain' : L . tileLayer . provider ( 'Stamen.Terrain' ) ,
'Stamen Watercolor' : L . tileLayer . provider ( 'Stamen.Watercolor' ) ,
'Esri WorldStreetMap' : L . tileLayer . provider ( 'Esri.WorldStreetMap' ) ,
'Esri DeLorme' : L . tileLayer . provider ( 'Esri.DeLorme' ) ,
'Esri WorldTopoMap' : L . tileLayer . provider ( 'Esri.WorldTopoMap' ) ,
'Esri WorldImagery' : L . tileLayer . provider ( 'Esri.WorldImagery' ) ,
'Esri WorldTerrain' : L . tileLayer . provider ( 'Esri.WorldTerrain' ) ,
'Esri WorldShadedRelief' : L . tileLayer . provider ( 'Esri.WorldShadedRelief' ) ,
'Esri WorldPhysical' : L . tileLayer . provider ( 'Esri.WorldPhysical' ) ,
'Esri OceanBasemap' : L . tileLayer . provider ( 'Esri.OceanBasemap' ) ,
'Esri NatGeoWorldMap' : L . tileLayer . provider ( 'Esri.NatGeoWorldMap' ) ,
'Esri WorldGrayCanvas' : L . tileLayer . provider ( 'Esri.WorldGrayCanvas' ) ,
'Acetate' : L . tileLayer . provider ( 'Acetate' )
} ;
var overlayLayers = {
'OpenSeaMap' : L . tileLayer . provider ( 'OpenSeaMap' ) ,
'OpenWeatherMap Clouds' : L . tileLayer . provider ( 'OpenWeatherMap.Clouds' ) ,
'OpenWeatherMap CloudsClassic' : L . tileLayer . provider ( 'OpenWeatherMap.CloudsClassic' ) ,
'OpenWeatherMap Precipitation' : L . tileLayer . provider ( 'OpenWeatherMap.Precipitation' ) ,
'OpenWeatherMap PrecipitationClassic' : L . tileLayer . provider ( 'OpenWeatherMap.PrecipitationClassic' ) ,
'OpenWeatherMap Rain' : L . tileLayer . provider ( 'OpenWeatherMap.Rain' ) ,
'OpenWeatherMap RainClassic' : L . tileLayer . provider ( 'OpenWeatherMap.RainClassic' ) ,
'OpenWeatherMap Pressure' : L . tileLayer . provider ( 'OpenWeatherMap.Pressure' ) ,
'OpenWeatherMap PressureContour' : L . tileLayer . provider ( 'OpenWeatherMap.PressureContour' ) ,
'OpenWeatherMap Wind' : L . tileLayer . provider ( 'OpenWeatherMap.Wind' ) ,
'OpenWeatherMap Temperature' : L . tileLayer . provider ( 'OpenWeatherMap.Temperature' ) ,
'OpenWeatherMap Snow' : L . tileLayer . provider ( 'OpenWeatherMap.Snow' )
} ;
var layerControl = L . control . layers ( baseLayers , overlayLayers , { collapsed : false } ) . addTo ( map ) ;
// resize layers control to fit into view.
function resizeLayerControl ( ) {
var layerControlHeight = document . body . clientHeight - ( 10 + 50 ) ;
var layerControl = document . getElementsByClassName ( 'leaflet-control-layers-expanded' ) [ 0 ] ;
layerControl . style . overflowY = 'auto' ;
layerControl . style . maxHeight = layerControlHeight + 'px' ;
}
map . on ( 'resize' , resizeLayerControl ) ;
resizeLayerControl ( ) ;
< / script >
< / body >
< / html >
