Last active
October 25, 2018 06:21
-
-
Save NPashaP/1b21716c9ad8d44b2c1cc49bd2d6195b to your computer and use it in GitHub Desktop.
Leaflet - MapTiles
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: gpl-3.0 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"/> | |
| <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> | |
| <style> | |
| *{ | |
| margin:0; | |
| } | |
| #map { | |
| width: 100vw; | |
| height: 100vh; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id='map'></div> | |
| <script src="http://vizjs.org/viz.v1.3.0.min.js"></script> | |
| <script> | |
| var satellite = L.tileLayer(viz.leaflet.tiles.OpenStreetMap.satellite, { attribution: viz.leaflet.tiles.OpenStreetMap.attribution}) | |
| ,streets = L.tileLayer(viz.leaflet.tiles.OpenStreetMap.WorldStreet, { attribution: viz.leaflet.tiles.OpenStreetMap.attribution}) | |
| ,OpenTopoMap = L.tileLayer(viz.leaflet.tiles.OpenTopoMap.url, { attribution: viz.leaflet.tiles.OpenTopoMap.attribution}) | |
| ,ThunderforestCycle = L.tileLayer(viz.leaflet.tiles.Thunderforest.Cycle, { attribution: viz.leaflet.tiles.Thunderforest.attribution}) | |
| ,ThunderforestTransport = L.tileLayer(viz.leaflet.tiles.Thunderforest.Transport, { attribution: viz.leaflet.tiles.Thunderforest.attribution}) | |
| ,ThunderforestTransportDark = L.tileLayer(viz.leaflet.tiles.Thunderforest.TransportDark, { attribution: viz.leaflet.tiles.Thunderforest.attribution}) | |
| ,ThunderforestTransportLandscape = L.tileLayer(viz.leaflet.tiles.Thunderforest.TransportLandscape, { attribution: viz.leaflet.tiles.Thunderforest.attribution}) | |
| ,ThunderforestTransportOutdoors = L.tileLayer(viz.leaflet.tiles.Thunderforest.TransportOutdoors, { attribution: viz.leaflet.tiles.Thunderforest.attribution}) | |
| ,ThunderforestTransportPioneer = L.tileLayer(viz.leaflet.tiles.Thunderforest.TransportPioneer, { attribution: viz.leaflet.tiles.Thunderforest.attribution}) | |
| ,OpenMapSurferRoads = L.tileLayer(viz.leaflet.tiles.OpenMapSurfer.Roads, { attribution: viz.leaflet.tiles.OpenMapSurfer.attribution}) | |
| ,OpenMapSurferGrayscale = L.tileLayer(viz.leaflet.tiles.OpenMapSurfer.Grayscale, { attribution: viz.leaflet.tiles.OpenMapSurfer.attribution}) | |
| ,HyddaFull = L.tileLayer(viz.leaflet.tiles.Hydda.Full, { attribution: viz.leaflet.tiles.Hydda.attribution}) | |
| ,HyddaBase = L.tileLayer(viz.leaflet.tiles.Hydda.Base, { attribution: viz.leaflet.tiles.Hydda.attribution}) | |
| ,StamenToner = L.tileLayer(viz.leaflet.tiles.Stamen.Toner, { attribution: viz.leaflet.tiles.Stamen.attribution, ext: 'png'}) | |
| ,StamenTonerBackground = L.tileLayer(viz.leaflet.tiles.Stamen.TonerBackground, { attribution: viz.leaflet.tiles.Stamen.attribution, ext: 'png'}) | |
| ,StamenTonerLite = L.tileLayer(viz.leaflet.tiles.Stamen.TonerLite, { attribution: viz.leaflet.tiles.Stamen.attribution, ext: 'png'}) | |
| ,StamenWatercolor = L.tileLayer(viz.leaflet.tiles.Stamen.Watercolor, { attribution: viz.leaflet.tiles.Stamen.attribution, ext: 'png'}) | |
| ,StamenTerrain = L.tileLayer(viz.leaflet.tiles.Stamen.Terrain, { attribution: viz.leaflet.tiles.Stamen.attribution, ext: 'png'}) | |
| ,StamenTerrainBackground = L.tileLayer(viz.leaflet.tiles.Stamen.TerrainBackground, { attribution: viz.leaflet.tiles.Stamen.attribution, ext: 'png'}) | |
| ,EsriWorldStreetMap = L.tileLayer(viz.leaflet.tiles.Esri.WorldStreetMap, { attribution: viz.leaflet.tiles.Esri.attribution}) | |
| ,EsriWorldImagery = L.tileLayer(viz.leaflet.tiles.Esri.WorldImagery, { attribution: viz.leaflet.tiles.Esri.attribution}) | |
| ,EsriWorldTerrain = L.tileLayer(viz.leaflet.tiles.Esri.WorldTerrain, { attribution: viz.leaflet.tiles.Esri.attribution}) | |
| ,EsriWorldShadedRelief = L.tileLayer(viz.leaflet.tiles.Esri.WorldShadedRelief, { attribution: viz.leaflet.tiles.Esri.attribution}) | |
| ,EsriWorldPhysical = L.tileLayer(viz.leaflet.tiles.Esri.WorldPhysical, { attribution: viz.leaflet.tiles.Esri.attribution}) | |
| ,EsriOceanBasemap = L.tileLayer(viz.leaflet.tiles.Esri.OceanBasemap, { attribution: viz.leaflet.tiles.Esri.attribution}) | |
| ,EsriNatGeoWorldMap = L.tileLayer(viz.leaflet.tiles.Esri.NatGeoWorldMap, { attribution: viz.leaflet.tiles.Esri.attribution}) | |
| ,EsriWorldGrayCanvas = L.tileLayer(viz.leaflet.tiles.Esri.WorldGrayCanvas, { attribution: viz.leaflet.tiles.Esri.attribution}) | |
| ,CartoDBPositron = L.tileLayer(viz.leaflet.tiles.CartoDB.Positron, { attribution: viz.leaflet.tiles.CartoDB.attribution}) | |
| ,CartoDBPositronNoLabels = L.tileLayer(viz.leaflet.tiles.CartoDB.PositronNoLabels, { attribution: viz.leaflet.tiles.CartoDB.attribution}) | |
| ,CartoDBPositronOnlyLabels = L.tileLayer(viz.leaflet.tiles.CartoDB.PositronOnlyLabels, { attribution: viz.leaflet.tiles.CartoDB.attribution}) | |
| ,CartoDBDarkMatter = L.tileLayer(viz.leaflet.tiles.CartoDB.DarkMatter, { attribution: viz.leaflet.tiles.CartoDB.attribution}) | |
| ,CartoDBDarkMatterNoLabels = L.tileLayer(viz.leaflet.tiles.CartoDB.DarkMatterNoLabels, { attribution: viz.leaflet.tiles.CartoDB.attribution}) | |
| ,CartoDBDarkMatterOnlyLabels = L.tileLayer(viz.leaflet.tiles.CartoDB.DarkMatterOnlyLabels, { attribution: viz.leaflet.tiles.CartoDB.attribution}) | |
| , baseLayers = { | |
| "OpenStreetMap satellite": satellite | |
| ,"OpenStreetMap Streets": streets | |
| ,"OpenStreetMap Topology": OpenTopoMap | |
| ,"Thunderforest Cycle": ThunderforestCycle | |
| ,"Thunderforest Transport": ThunderforestTransport | |
| ,"Thunderforest Transport Dark": ThunderforestTransportDark | |
| ,"Thunderforest Transport Landscape": ThunderforestTransportLandscape | |
| ,"Thunderforest Transport Outdoors": ThunderforestTransportOutdoors | |
| ,"Thunderforest Transport Pioneer": ThunderforestTransportPioneer | |
| ,"OpenMapSurfer Roads": OpenMapSurferRoads | |
| ,"OpenMapSurfer Grayscale": OpenMapSurferGrayscale | |
| ,"Hydda Full": HyddaFull | |
| ,"Hydda Base": HyddaBase | |
| ,"Stamen Toner": StamenToner | |
| ,"Stamen TonerBackground": StamenTonerBackground | |
| ,"Stamen TonerLite": StamenTonerLite | |
| ,"Stamen Watercolor": StamenWatercolor | |
| ,"Stamen Terrain": StamenTerrain | |
| ,"Stamen TerrainBackground": StamenTerrainBackground | |
| ,"Esri WorldStreetMap": EsriWorldStreetMap | |
| ,"Esri WorldImagery": EsriWorldImagery | |
| ,"Esri WorldTerrain": EsriWorldTerrain | |
| ,"Esri WorldShadedRelief": EsriWorldShadedRelief | |
| ,"Esri WorldPhysical": EsriWorldPhysical | |
| ,"Esri OceanBasemap": EsriOceanBasemap | |
| ,"Esri NatGeoWorldMap": EsriNatGeoWorldMap | |
| ,"Esri WorldGrayCanvas": EsriWorldGrayCanvas | |
| ,"CartoDB Positron": CartoDBPositron | |
| ,"CartoDB PositronNoLabels": CartoDBPositronNoLabels | |
| ,"CartoDB PositronOnlyLabels": CartoDBPositronOnlyLabels | |
| ,"CartoDB DarkMatter": CartoDBDarkMatter | |
| ,"CartoDB DarkMatterNoLabels": CartoDBDarkMatterNoLabels | |
| ,"CartoDB DarkMatterOnlyLabels": CartoDBDarkMatterOnlyLabels | |
| }; | |
| var map = L.map('map',{ center: [37, -96],zoom: 5,layers: [EsriNatGeoWorldMap /*layers to show on load*/]}); | |
| L.control.layers(baseLayers).addTo(map); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment