Search our website

From the blog

Using Base Maps with Non-standard Coordinate Systems in LeafletJS

Author · Scott Davis
Published · Nov 26, 2013
Last modified · May 1, 2024
Category · Developer
Read time · 2 min

Since LeafletJS seems to be what all of the cool kids are using these days and it shows no signs of slowing down, I thought that it would be fun to figure out how to use Leaflet to view UGRC's awesome base map services. This presented a unique challenge since they are not in a projection that is supported out-of-the-box by Leaflet (UTM Zone 12 NAD83). However, I found that it is possible with the help of a few additional JavaScript libraries. So, here's the solution:

See the Pen Esri Leaflet (OLD) by Scott Davis (@stdavis) on CodePen.

You'll notice that I've loaded these libraries in addition to the latest version of Leaflet:

The implementation was not that complex once I got all of the numbers right. First I create a new Proj4Leaflet coordinate reference system which I pass into the map constructor. Then I use the Esri-Leaflet Plugin to set up a new TiledMapLayer and add it to the map.

Now you can be one of the cool kids too!