Using Base Maps with Non-standard Coordinate Systems in LeafletJS (2 min)

Since LeafletJS [https://leafletjs.com/] seems to be what all of the cool kids are using these days and it shows no signs of slowing down [https://www.mapbox.com/blog/vladimir-agafonkin-joins-mapbox/], I thought that it would be fun to figure out how to use Leaflet to view UGRC's awesome base map services [/products/sgid/base-maps/]. 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) [https://codepen.io/stdavis/pen/zLaZoJ/] by Scott Davis (@stdavis [https://codepen.io/stdavis]) on CodePen [https://codepen.io]. You'll notice that I've loaded these libraries in addition to the latest version of Leaflet: * Esri-Leaflet Plugin [https://esri.github.io/esri-leaflet/] * Proj4js [https://github.com/proj4js/proj4js] * Proj4Leaflet Plugin [https://github.com/kartena/Proj4Leaflet] 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!