Skip to content

Instantly share code, notes, and snippets.

@NPashaP

NPashaP/.block

Last active October 25, 2018 06:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save NPashaP/1b21716c9ad8d44b2c1cc49bd2d6195b to your computer and use it in GitHub Desktop.
Save NPashaP/1b21716c9ad8d44b2c1cc49bd2d6195b to your computer and use it in GitHub Desktop.
Download ZIP
Leaflet - MapTiles
Raw
.block
license: gpl-3.0
Raw
index.html
<!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/leaflet@1.0.3/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.0.3/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