Leaflet WMS layer custom projection on fly

For most of the WMS mapping applications the Google Web Mercator (GWM) projection is sufficient. The GWM is default standard for web mapping and widley accepted by Bing, Google, OSM, OpenLayers(default), and Leaflets(default). However some mapping application required custom projection other than Google Mercator projection to display data. Then, how to project/re-project the data other than wms's default projection, GWM.

The following snippet shows the WMS layer custom projection in LEAFLET for Albers equal area and UTM zone 13.

Step 1.

First of all include -
leaflet.js
proj4.js
proj4leaflet.js in following order.

     <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />  
     <script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet-src.js"></script>  
     <script src="//cdnjs.cloudflare.com/ajax/libs/proj4js/2.0.0/proj4.js"></script>  
     <script src="http://mapserv.utah.gov/cdn/examples/proj4leaflet.js"></script>

Step 2: Create new Proj4Leaflet CRS

Find your desired custom projection type in http://spatialreference.org/ and punch the the projection variable in the following code snippet.

     /** Albers equal area projection in leaflet **/        
     var crs = new L.Proj.CRS('EPSG:3085', '+proj=aea +lat_1=27.5 +lat_2=35 +lat_0=18 +lon_0=-100 +x_0=1500000 +y_0=6000000 +ellps=GRS80 +units=m +no_defs', {  
       origin: [416729.617118, 412156.942963],    
       bounds: [  
         [-2410329.835748, 13545805.10653],  
         [-10850237.174162, 3977377.378424]      
       ],    
       resolutions: [  
         4891.96999883583 * 8,  
         4891.96999883583 * 4,  
         4891.96999883583 * 2,  
         4891.96999883583,  
         2445.98499994708,  
         1222.99250010583,  
         611.496250052917,  
         305.748124894166,  
         152.8740625,  
         76.4370312632292,  
         38.2185156316146,  
         19.1092578131615,  
         9.55462890525781,  
         4.77731445262891,  
         2.38865722657904,  
         1.19432861315723,  
         0.597164306578613,  
         0.298582153289307,  
         0.298582153289307 / 2,  
         0.298582153289307 / 4,  
         0.298582153289307 / 8,  
         0.298582153289307 / 16  
       ]  
     });

Hope your CRS is ready to roll.

Step 3: Add CRS into map constructor

     // pass crs into map constructor  
     var map = window.map = new L.Map('map', {  
       crs: crs  
     }).setView([39.84, -98.58], 1);

Step 4: Add WMS Layer

     var wms = window.wms = new L.TileLayer.WMS('http://sampleserver1.arcgisonline.com/ArcGIS/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/WMSServer', {  
       transparent: true,  
       format: 'image/png',  
       layers: '0',  
       tiles: true,    
       continuousWorld: true  
     }).addTo(map)

Results:

Similar code snipped for UTM Zone 13 projection.

 ** UTM Zone 13 projection in leaflet **/  
     // create new Proj4Leaflet CRS  
     var crs = new L.Proj.CRS('EPSG:26913', '+proj=utm +zone=13 +ellps=GRS80 +datum=NAD83 +units=m +no_defs', {  
       origin: [656736.237411, 3423829.249531],  
       bounds: [  
         [500000, 9997964.94294],  
         [500000, -9997964.94294]  
       ],  
       resolutions: [  
       4891.96999883583 * 8,  
       4891.96999883583 * 4,  
       4891.96999883583 * 2,  
       4891.96999883583,  
       2445.98499994708,  
       1222.99250010583,  
       611.496250052917,  
       305.748124894166,  
       152.8740625,  
       76.4370312632292,  
       38.2185156316146,  
       19.1092578131615,  
       9.55462890525781,  
       4.77731445262891,  
       2.38865722657904,  
       1.19432861315723,  
       0.597164306578613,  
       0.298582153289307,  
       0.298582153289307 / 2,  
       0.298582153289307 / 4,  
       0.298582153289307 / 8,  
       0.298582153289307 / 16]  
     });  
     // pass crs into map constructor  
     var map2 = window.map = new L.Map('map2', {  
       crs: crs  
     }).setView([39.84, -98.58], 1);  
     var wms = window.wms = new L.TileLayer.WMS('http://sampleserver1.arcgisonline.com/ArcGIS/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/WMSServer', {  
       transparent: true,  
       format: 'image/png',  
       layers: '0',  
       tiles: true,    
       continuousWorld: true  
     }).addTo(map2)

Entire project code:

 <!DOCTYPE html>  
 <html>  
   <head>  
     <title>Leaflet custom projection example</title>  
     <meta charset="utf-8" />  
     <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />  
     <script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet-src.js"></script>  
     <script src="//cdnjs.cloudflare.com/ajax/libs/proj4js/2.0.0/proj4.js"></script>  
     <script src="http://mapserv.utah.gov/cdn/examples/proj4leaflet.js"></script>  
   </head>  
   <body>  
     <div id="map" style="width: 600px; height: 400px"></div>  
     <br/>  
     <div id="map2" style="width: 600px; height: 400px"></div>   
   <script>  
     /** UTM Albers equal area projection in leaflet **/  
     // create new Proj4Leaflet CRS  
     var crs = new L.Proj.CRS('EPSG:3085', '+proj=aea +lat_1=27.5 +lat_2=35 +lat_0=18 +lon_0=-100 +x_0=1500000 +y_0=6000000 +ellps=GRS80 +units=m +no_defs', {  
       origin: [416729.617118, 412156.942963],    
       bounds: [  
         [-2410329.835748, 13545805.10653],  
         [-10850237.174162, 3977377.378424]      
       ],    
       resolutions: [  
         4891.96999883583 * 8,  
         4891.96999883583 * 4,  
         4891.96999883583 * 2,  
         4891.96999883583,  
         2445.98499994708,  
         1222.99250010583,  
         611.496250052917,  
         305.748124894166,  
         152.8740625,  
         76.4370312632292,  
         38.2185156316146,  
         19.1092578131615,  
         9.55462890525781,  
         4.77731445262891,  
         2.38865722657904,  
         1.19432861315723,  
         0.597164306578613,  
         0.298582153289307,  
         0.298582153289307 / 2,  
         0.298582153289307 / 4,  
         0.298582153289307 / 8,  
         0.298582153289307 / 16  
       ]  
     });  
     // pass crs into map constructor  
     var map = window.map = new L.Map('map', {  
       crs: crs  
     }).setView([39.84, -98.58], 1);  
     var wms = window.wms = new L.TileLayer.WMS('http://sampleserver1.arcgisonline.com/ArcGIS/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/WMSServer', {  
       transparent: true,  
       format: 'image/png',  
       layers: '0',  
       tiles: true,    
       continuousWorld: true  
     }).addTo(map)  
     /** UTM Zone 13 projection in leaflet **/  
     // create new Proj4Leaflet CRS  
     var crs = new L.Proj.CRS('EPSG:26913', '+proj=utm +zone=13 +ellps=GRS80 +datum=NAD83 +units=m +no_defs', {  
       origin: [656736.237411, 3423829.249531],  
       bounds: [  
         [500000, 9997964.94294],  
         [500000, -9997964.94294]  
       ],  
       resolutions: [  
       4891.96999883583 * 8,  
       4891.96999883583 * 4,  
       4891.96999883583 * 2,  
       4891.96999883583,  
       2445.98499994708,  
       1222.99250010583,  
       611.496250052917,  
       305.748124894166,  
       152.8740625,  
       76.4370312632292,  
       38.2185156316146,  
       19.1092578131615,  
       9.55462890525781,  
       4.77731445262891,  
       2.38865722657904,  
       1.19432861315723,  
       0.597164306578613,  
       0.298582153289307,  
       0.298582153289307 / 2,  
       0.298582153289307 / 4,  
       0.298582153289307 / 8,  
       0.298582153289307 / 16]  
     });  
     // pass crs into map constructor  
     var map2 = window.map = new L.Map('map2', {  
       crs: crs  
     }).setView([39.84, -98.58], 1);  
     var wms = window.wms = new L.TileLayer.WMS('http://sampleserver1.arcgisonline.com/ArcGIS/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/WMSServer', {  
       transparent: true,  
       format: 'image/png',  
       layers: '0',  
       tiles: true,    
       continuousWorld: true  
     }).addTo(map2)  
   </script>  
   </body>  
 </html>