Skip to content

Instantly share code, notes, and snippets.

@n-a-t-e

n-a-t-e/chs_charts_maplibre.html

Last active March 15, 2023 22:04
Show Gist options
  • Save n-a-t-e/b9d6cde6230e235a4e3d52e2e0b157b5 to your computer and use it in GitHub Desktop.
Save n-a-t-e/b9d6cde6230e235a4e3d52e2e0b157b5 to your computer and use it in GitHub Desktop.
Download ZIP
CHS Charts in Maplibre
Raw
chs_charts_maplibre.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CHS Charts via WMS in Mapbox</title>
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<script src="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js"></script>
<link
href="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css"
rel="stylesheet"
/>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
const layers = "2,3,4,5,6,7";
const map = new maplibregl.Map({
container: "map",
style: {
version: 8,
sources: {
"osm-tiles": {
type: "raster",
tiles: [`https://tile.openstreetmap.org/{z}/{x}/{y}.png `],
tileSize: 256,
},
"chs-tiles": {
type: "raster",
tiles: [
`https://gisp.dfo-mpo.gc.ca/arcgis/rest/services/CHS/ENC_MaritimeChartService/MapServer/exts/MaritimeChartService/WMSServer?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&BBOX={bbox-epsg-3857}&CRS=EPSG:3857&WIDTH=256&HEIGHT=256&LAYERS=${layers}&STYLES=&FORMAT=image/png&DPI=72&MAP_RESOLUTION=72&FORMAT_OPTIONS=dpi:72&TRANSPARENT=TRUE`,
],
tileSize: 256,
},
},
layers: [
{
id: "a",
type: "raster",
source: "osm-tiles",
},
{
id: "b",
type: "raster",
source: "chs-tiles",
},
],
},
zoom: 8,
center: [-123, 48],
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment