Image with EPSG:3857
Display an image with a custom projection (e.g., EPSG:3857).
html
<!doctype html>
<html lang="en">
<head>
<title>Image with EPSG:3857</title>
<meta property="og:description" content="Display an image with a custom projection (e.g., EPSG:3857)." />
<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>
const map = new maplibregl.Map({
container: 'map',
style: 'https://www.naivemap.com/demotiles/style.json',
bounds: [
[105.29197, 32.20291],
[110.19401, 28.16587]
],
fitBoundsOptions: {
padding: { top: 10, bottom: 10, left: 10, right: 10 }
}
})
map.on('load', () => {
map.addSource('chongqing', {
type: 'geojson',
data: './data/chongqing.geojson'
})
const layer = new ImageLayer('image-layer', {
url: './images/Terrain_CQ_3857.jpeg',
projection: 'EPSG:4326', // Use EPSG:4326 for coordinates
coordinates: [
[105.29197, 32.20291],
[110.19401, 32.20291],
[110.19401, 28.16587],
[105.29197, 28.16587]
],
arrugatorStep: 0, // Set to 0 to disable arrugator
})
map.addLayer(layer)
map.addLayer({
id: 'chongqing',
type: 'line',
source: 'chongqing'
})
})
</script>
</body>
</html>