|
Can BaseMaps served via ADS be displayed on a Leaflet Map?
Astun provide both OS Premium Colour and Greyscale BaseMaps as a Web Mercator XYZ tile service as part of Astun Data Services. These layers use the same tiling scheme as OSM and Google maps and are therefore compatible with Leaflet without having to specify a custom projection.
The URL templates are as follows replacing your-account-name with your Astun Data Services account name.
The following code demonstrates adding the OS Premium BaseMap to a Leaflet map you will just need to decide which of the above URL templates you wish to use and update accordingly.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Leaflet Map - ADS OS Premium</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css"
/>
<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"
></script>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
}
#map {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
// Create a new tile layer configured to request tiles from
// Astun Data Services.
// Replace "ospremiumwebmerc" with "ospremiumbwwebmerc" for a
// greyscale version of the base map
var ospremium = L.tileLayer(
"https://t0.ads.astuntechnology.com/your-account-name/ospremium/tiles/ospremiumwebmerc_EPSG3857/{z}/{x}/{y}.png",
{
maxZoom: 21,
attribution: "© Ordnance Survey Licence 100023458",
}
);
const map = L.map(document.getElementById('map'), {
center: L.latLng(51.612388, -3.407319),
zoom: 17,
layers: [ospremium],
});
// Or add the layer after the map has been created with
// map.addLayer(ospremium);
</script>
</body>
</html> |