leaflet wms layer code example

Example: wms layer example leaflet

<!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>

Tags:

Javascript Example

Recent Posts