An example that shows an ESRI's satellite layer with Leaflet.js. A lot of different tile services are compatible with Leaflet: click here for a list with live previews.
forked from nitaku's block: Leaflet with ESRI satellite tiles
license: mit |
An example that shows an ESRI's satellite layer with Leaflet.js. A lot of different tile services are compatible with Leaflet: click here for a list with live previews.
forked from nitaku's block: Leaflet with ESRI satellite tiles
body = d3.select 'body' | |
width = body.node().getBoundingClientRect().width | |
height = body.node().getBoundingClientRect().height | |
d3.select('#map') | |
.style | |
width: width | |
height: height | |
mbAttr = 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community' | |
mbUrl = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}' | |
base_layer = L.tileLayer(mbUrl, {id: 'mapbox.streets', attribution: mbAttr}) | |
map = L.map 'map', | |
center: [30, 0], | |
zoom: 2, | |
layers: [base_layer] |
html, body { | |
margin: 0; | |
padding: 0; | |
width: 100%; | |
height: 100%; | |
} | |
body { | |
display: flex; | |
} | |
#map { | |
flex-grow: 1; | |
} |
<!doctype html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>Leaflet with ESRI satellite tiles</title> | |
<script src="https://d3js.org/d3.v3.min.js"></script> | |
<script src="https://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script> | |
<link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" /> | |
<link rel="stylesheet" href="index.css"> | |
</head> | |
<body> | |
<div id="map"></div> | |
<script src="index.js"></script> | |
</body> | |
</html> |
// Generated by CoffeeScript 1.10.0 | |
(function() { | |
var base_layer, body, height, map, mbAttr, mbUrl, width; | |
body = d3.select('body'); | |
width = body.node().getBoundingClientRect().width; | |
height = body.node().getBoundingClientRect().height; | |
d3.select('#map').style({ | |
width: width, | |
height: height | |
}); | |
mbAttr = 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'; | |
mbUrl = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'; | |
base_layer = L.tileLayer(mbUrl, { | |
id: 'mapbox.streets', | |
attribution: mbAttr | |
}); | |
map = L.map('map', { | |
center: [30, 0], | |
zoom: 2, | |
layers: [base_layer] | |
}); | |
}).call(this); |