Skip to content

Instantly share code, notes, and snippets.

@nitaku

nitaku/README.md

Last active April 23, 2024 09:25
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nitaku/047a77e256de17f25e72 to your computer and use it in GitHub Desktop.
Save nitaku/047a77e256de17f25e72 to your computer and use it in GitHub Desktop.
Download ZIP
Leaflet with ESRI satellite tiles
Raw
README.md

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.

Raw
index.coffee
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]
Raw
index.css
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
display: flex;
}
#map {
flex-grow: 1;
}
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Leaflet with ESRI satellite tiles</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<link rel="stylesheet" href="http://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>
Raw
index.js
// 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 &copy; Esri &mdash; 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);
@justineflexilabs
Copy link

Hi, I am using ESRI for satellite images. I would like to ask if this is free to use?

@jfoclpf
Copy link

jfoclpf commented Apr 23, 2024

do you know the license for displaying those maps hosted at arcgisonline.com ?

@nitaku
Copy link
Author

nitaku commented Apr 23, 2024 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment