Skip to content

Instantly share code, notes, and snippets.

@nitaku

nitaku/README.md

Last active April 23, 2024 09:25
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save nitaku/047a77e256de17f25e72 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
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);
@jfoclpf

jfoclpf commented Apr 23, 2024

Copy link
Copy Markdown

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

@nitaku

nitaku commented Apr 23, 2024 via email

Copy link
Copy Markdown
Author

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