Skip to content

Instantly share code, notes, and snippets.

@arashmad
Created August 25, 2020 17:05
Show Gist options
  • Save arashmad/7e873ed20e77a983754213eb4768f96b to your computer and use it in GitHub Desktop.
Save arashmad/7e873ed20e77a983754213eb4768f96b to your computer and use it in GitHub Desktop.
This is an example of how you can get a tile image link by click on Leaflet Tile Layer map
/*
In this example I showed that users can click on map and
get link of image tile and containt location of clicked position.
I used Leaflet.js library and a ArcGIS tile service to prove my work.
You can easily change "samplePosition" and "initialZoom" to move to
your favourite location and zoom.
Just open browser console log and click on the link that is appread
after clicking on map.
*/
// Constants
var singleTileLink = ''
var esriEndpoint = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/'
var samplePosition = {lat: 47.59, long:2.38}
var initialZoom = 14
// Layer and Map
var mainMap = L.map('map').setView([samplePosition.lat, samplePosition.long], initialZoom);
var esriLayer = L.tileLayer(`${esriEndpoint}{z}/{y}/{x}`);
mainMap.on('click', function (e) {
singleTileSpecification = getTileURL(e.latlng.lat, e.latlng.lng, this.getZoom());
singleTileLink = `${esriEndpoint}${singleTileSpecification}`
console.log(singleTileLink)
});
esriLayer.addTo(mainMap);
// Function
function getTileURL(lat, lon, zoom) {
var pi = Math.PI;
var xtile = parseInt(Math.floor((lon + 180) / 360 * (1 << zoom)));
var ytile = parseInt(Math.floor((1 - Math.log(Math.tan(lat * pi / 180) + 1 / Math.cos(lat * pi / 180)) / Math.PI) / 2 * (1 << zoom)));
var tileSpecification = `${zoom}/${ytile}/${xtile}`;
return `${esriEndpoint}${tileSpecification}`;
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment