Skip to content

Instantly share code, notes, and snippets.

@prushforth

prushforth/index.html

Created December 17, 2018 14:50
Show Gist options
  • Save prushforth/c78b89d7a1697f7d97fb4e505b3c739b to your computer and use it in GitHub Desktop.
Save prushforth/c78b89d7a1697f7d97fb4e505b3c739b to your computer and use it in GitHub Desktop.
Download ZIP
leaflet 1.3.4, proj4leaflet 1.0.2 and epsg:3978 use with CBMT tile cache
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="leaflet/leaflet.css" />
</head>
<body>
<div id="map"></div>
<script src="leaflet/leaflet.js"></script>
<script src="proj4leaflet/lib/proj4-compressed.js"></script>
<script src="proj4leaflet/proj4leaflet.js"></script>
<script src="script.js"></script>
</body>
</html>
Raw
script.js
var crs = new L.Proj.CRS('EPSG:3978',
'+proj=lcc +lat_1=49 +lat_2=77 +lat_0=49 +lon_0=-95 +x_0=0 +y_0=0 +ellps=GRS80 +datum=NAD83 +units=m +no_defs',
{
resolutions: [
38364.660062653464,
22489.62831258996,
13229.193125052918,
7937.5158750317505,
4630.2175937685215,
2645.8386250105837,
1587.5031750063501,
926.0435187537042,
529.1677250021168,
317.50063500127004,
185.20870375074085,
111.12522225044451,
66.1459656252646,
38.36466006265346,
22.48962831258996,
13.229193125052918,
7.9375158750317505,
4.6302175937685215,
2.6458386250105836,
1.5875031750063502,
0.92604351875370428,
0.52916772500211673,
0.31750063500127002,
0.18520870375074083,
0.11112522225044451,
0.066145965625264591
],
origin: [-34655800, 39310000]
}),
map = new L.Map('map', {
crs: crs,
});
L.tileLayer.wms('https://geoappext.nrcan.gc.ca/arcgis/rest/services/BaseMaps/CBMT3978/MapServer/tile/{z}/{y}/{x}', {
format: 'image/png',
maxZoom: 17,
minZoom: 0,
attribution: '<a href="https://www.nrcan.gc.ca/earth-sciences/geography/topographic-information/free-data-geogratis/licence/17285">Canada Base Map &copy; Natural Resources Canada</a>'
}).addTo(map);
map.setView([50, -90], 3);
@prushforth
Copy link
Author

Let me know if this helps. I know you are using vue.js and that may be something I can't help with, but hopefully this will show you how Leaflet can work with tile caches in EPSG:3978 at least.

@kngai
Copy link

kngai commented Dec 17, 2018 •
edited
Loading

That worked!

I was missing the origin property and some resolutions in the CRS, as well as needing to adjust my map's maxBounds; I initially had L.latLngBounds(L.latLng(22, -170), L.latLng(90, -16)) which only works well on EPSG:3857, but restricted what I initiall saw on my Leaflet map.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment