Skip to content

Instantly share code, notes, and snippets.

@mepa1363

mepa1363/maps-api-example.html

Last active September 19, 2022 04:33
Show Gist options
  • Save mepa1363/f37442303d83bc906f63ae2ef5b8e35f to your computer and use it in GitHub Desktop.
Save mepa1363/f37442303d83bc906f63ae2ef5b8e35f to your computer and use it in GitHub Desktop.
Download ZIP
Township Canada Maps API (Mapbox GL JS)
Raw
maps-api-example.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Township Canada Maps API</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-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 townshipCanadaApiKey = "YOUR_TOWNSHIP_CANADA_API_KEY";
const mapboxAccessToken = "YOUR_MAPBOX_ACCESS_KEY";
mapboxgl.accessToken = mapboxAccessToken;
const map = new mapboxgl.Map({
container: "map",
style: "mapbox://styles/mapbox/light-v10",
zoom: 5,
center: [-114, 51],
hash: true
});
const addGridLayer = data => {
const grid = `${data.province}_${data.grid}`;
// Add the vector tile source
map.addSource(grid, {
type: "vector",
tiles: [
`https://a.maps.townshipcanada.com/${data.province}/${data.grid}/{z}/{x}/{y}.pbf?api_key=${townshipCanadaApiKey}`,
`https://b.maps.townshipcanada.com/${data.province}/${data.grid}/{z}/{x}/{y}.pbf?api_key=${townshipCanadaApiKey}`
],
minzoom: data.source.minZoom,
maxzoom: data.source.maxZoom
});
// Add the map layer
map.addLayer({
id: grid,
type: "line",
source: grid,
"source-layer": grid,
minzoom: data.layer.minZoom,
maxzoom: data.layer.maxZoom,
layout: {
"line-join": "miter",
"line-cap": "square"
},
paint: {
"line-color": "#333",
"line-width": 1
}
});
};
const addLabelLayer = data => {
const label = `${data.province}_${data.grid}_label`;
// Add the vector tile source
map.addSource(label, {
type: "vector",
tiles: [
`https://a.maps.townshipcanada.com/${data.province}/${data.grid}-label/{z}/{x}/{y}.pbf?api_key=${townshipCanadaApiKey}`,
`https://b.maps.townshipcanada.com/${data.province}/${data.grid}-label/{z}/{x}/{y}.pbf?api_key=${townshipCanadaApiKey}`
],
minzoom: data.source.minZoom,
maxzoom: data.source.maxZoom
});
// Add the map layer
map.addLayer({
id: label,
type: "symbol",
source: label,
"source-layer": label,
minzoom: data.layer.minZoom,
maxzoom: data.layer.maxZoom,
layout: {
"symbol-placement": "point",
"text-anchor": "center",
"text-field": "{descriptor}",
"text-justify": "center",
"text-keep-upright": true,
"text-size": 14
},
paint: {
"text-color": "#333",
"text-halo-color": "#dedede",
"text-halo-width": 2,
"text-halo-blur": 2
}
});
};
map.on("load", function () {
// Add BC DLS grids
addGridLayer({
province: "bc",
grid: "twp",
source: { minZoom: 0, maxZoom: 14 },
layer: { minZoom: 4, maxZoom: 12 }
});
addGridLayer({
province: "bc",
grid: "sec",
source: { minZoom: 9, maxZoom: 14 },
layer: { minZoom: 12, maxZoom: 14 }
});
addGridLayer({
province: "bc",
grid: "qtr",
source: { minZoom: 9, maxZoom: 14 },
layer: { minZoom: 14, maxZoom: 15 }
});
// Add BC DLS labels
addLabelLayer({
province: "bc",
grid: "twp",
source: { minZoom: 0, maxZoom: 14 },
layer: { minZoom: 8.5, maxZoom: 12 }
});
addLabelLayer({
province: "bc",
grid: "sec",
source: { minZoom: 9, maxZoom: 14 },
layer: { minZoom: 12, maxZoom: 14 }
});
addLabelLayer({
province: "bc",
grid: "qtr",
source: { minZoom: 9, maxZoom: 14 },
layer: { minZoom: 14, maxZoom: 20 }
});
// Add BC NTS grids
addGridLayer({
province: "bc",
grid: "series",
source: { minZoom: 0, maxZoom: 14 },
layer: { minZoom: 4, maxZoom: 10 }
});
addGridLayer({
province: "bc",
grid: "block",
source: { minZoom: 9, maxZoom: 14 },
layer: { minZoom: 10, maxZoom: 13 }
});
addGridLayer({
province: "bc",
grid: "unit",
source: { minZoom: 9, maxZoom: 14 },
layer: { minZoom: 13, maxZoom: 20 }
});
// Add BC NTS labels
addLabelLayer({
province: "bc",
grid: "series",
source: { minZoom: 0, maxZoom: 14 },
layer: { minZoom: 7, maxZoom: 10 }
});
addLabelLayer({
province: "bc",
grid: "block",
source: { minZoom: 9, maxZoom: 14 },
layer: { minZoom: 10, maxZoom: 13 }
});
addLabelLayer({
province: "bc",
grid: "unit",
source: { minZoom: 9, maxZoom: 14 },
layer: { minZoom: 13, maxZoom: 20 }
});
// Add AB DLS grids
addGridLayer({
province: "ab",
grid: "twp",
source: { minZoom: 0, maxZoom: 14 },
layer: { minZoom: 4, maxZoom: 12 }
});
addGridLayer({
province: "ab",
grid: "sec",
source: { minZoom: 9, maxZoom: 14 },
layer: { minZoom: 12, maxZoom: 14 }
});
addGridLayer({
province: "ab",
grid: "qtr",
source: { minZoom: 9, maxZoom: 14 },
layer: { minZoom: 14, maxZoom: 15 }
});
addGridLayer({
province: "ab",
grid: "lsd",
source: { minZoom: 9, maxZoom: 14 },
layer: { minZoom: 15, maxZoom: 20 }
});
// Add AB DLS labels
addLabelLayer({
province: "ab",
grid: "twp",
source: { minZoom: 0, maxZoom: 14 },
layer: { minZoom: 8.5, maxZoom: 12 }
});
addLabelLayer({
province: "ab",
grid: "sec",
source: { minZoom: 9, maxZoom: 14 },
layer: { minZoom: 12, maxZoom: 14 }
});
addLabelLayer({
province: "ab",
grid: "qtr",
source: { minZoom: 9, maxZoom: 14 },
layer: { minZoom: 14, maxZoom: 15 }
});
addLabelLayer({
province: "ab",
grid: "lsd",
source: { minZoom: 9, maxZoom: 14 },
layer: { minZoom: 15, maxZoom: 20 }
});
// Add SK DLS grids
addGridLayer({
province: "sk",
grid: "twp",
source: { minZoom: 0, maxZoom: 14 },
layer: { minZoom: 4, maxZoom: 12 }
});
addGridLayer({
province: "sk",
grid: "sec",
source: { minZoom: 9, maxZoom: 14 },
layer: { minZoom: 12, maxZoom: 14 }
});
addGridLayer({
province: "sk",
grid: "qtr",
source: { minZoom: 9, maxZoom: 14 },
layer: { minZoom: 14, maxZoom: 15 }
});
addGridLayer({
province: "sk",
grid: "lsd",
source: { minZoom: 9, maxZoom: 14 },
layer: { minZoom: 15, maxZoom: 20 }
});
// Add SK DLS labels
addLabelLayer({
province: "sk",
grid: "twp",
source: { minZoom: 0, maxZoom: 14 },
layer: { minZoom: 8.5, maxZoom: 12 }
});
addLabelLayer({
province: "sk",
grid: "sec",
source: { minZoom: 9, maxZoom: 14 },
layer: { minZoom: 12, maxZoom: 14 }
});
addLabelLayer({
province: "sk",
grid: "qtr",
source: { minZoom: 9, maxZoom: 14 },
layer: { minZoom: 14, maxZoom: 15 }
});
addLabelLayer({
province: "sk",
grid: "lsd",
source: { minZoom: 9, maxZoom: 14 },
layer: { minZoom: 15, maxZoom: 20 }
});
// Add MB DLS grids
addGridLayer({
province: "mb",
grid: "twp",
source: { minZoom: 0, maxZoom: 14 },
layer: { minZoom: 4, maxZoom: 12 }
});
addGridLayer({
province: "mb",
grid: "sec",
source: { minZoom: 9, maxZoom: 14 },
layer: { minZoom: 12, maxZoom: 14 }
});
addGridLayer({
province: "mb",
grid: "qtr",
source: { minZoom: 9, maxZoom: 14 },
layer: { minZoom: 14, maxZoom: 20 }
});
// Add MB DLS labels
addLabelLayer({
province: "mb",
grid: "twp",
source: { minZoom: 0, maxZoom: 14 },
layer: { minZoom: 8.5, maxZoom: 12 }
});
addLabelLayer({
province: "mb",
grid: "sec",
source: { minZoom: 9, maxZoom: 14 },
layer: { minZoom: 12, maxZoom: 14 }
});
addLabelLayer({
province: "mb",
grid: "qtr",
source: { minZoom: 9, maxZoom: 14 },
layer: { minZoom: 14, maxZoom: 20 }
});
// Add ON grids
addGridLayer({
province: "on",
grid: "twp",
source: { minZoom: 0, maxZoom: 14 },
layer: { minZoom: 4, maxZoom: 12 }
});
addGridLayer({
province: "on",
grid: "con",
source: { minZoom: 9, maxZoom: 14 },
layer: { minZoom: 12, maxZoom: 14 }
});
addGridLayer({
province: "on",
grid: "lot",
source: { minZoom: 9, maxZoom: 14 },
layer: { minZoom: 14, maxZoom: 20 }
});
// Add ON labels
addLabelLayer({
province: "on",
grid: "twp",
source: { minZoom: 0, maxZoom: 14 },
layer: { minZoom: 9, maxZoom: 12 }
});
addLabelLayer({
province: "on",
grid: "con",
source: { minZoom: 9, maxZoom: 14 },
layer: { minZoom: 12, maxZoom: 14 }
});
addLabelLayer({
province: "on",
grid: "lot",
source: { minZoom: 9, maxZoom: 14 },
layer: { minZoom: 14, maxZoom: 20 }
});
map.addControl(new mapboxgl.NavigationControl());
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment