Image with EPSG:27770
Display an image with a custom defined projection (e.g., EPSG:27770).
html
<!doctype html>
<html lang="en">
<head>
<title>Image with EPSG:27770</title>
<meta property="og:description" content="Display an image with a custom defined projection (e.g., EPSG:27770)." />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" />
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
<script src="https://unpkg.com/proj4"></script>
<script src="https://unpkg.com/@naivemap/maplibre-gl-image-layer"></script>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div id="map"></div>
<script>
proj4.defs(
'EPSG:27700',
'+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 ' +
'+x_0=400000 +y_0=-100000 +ellps=airy ' +
'+towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 ' +
'+units=m +no_defs'
)
const map = new maplibregl.Map({
container: 'map',
style: 'https://www.naivemap.com/demotiles/style.json',
center: [-5.24, 56.4],
zoom: 3.2,
hash: true
})
map.on('load', () => {
const layer = new ImageLayer('image-layer', {
url: './images/2000px-British_National_Grid.png',
projection: 'EPSG:27700',
coordinates: [
[0, 1300000], // top-left
[700000, 1300000], // top-right
[700000, 0], // bottom-right
[0, 0] // bottom-left
]
})
map.addLayer(layer)
})
</script>
</body>
</html>