wms layer example leaflet

Solutions on MaxInterview for wms layer example leaflet by the best coders in the world

showing results for - "wms layer example leaflet"
27 Jul 2017
1 <!DOCTYPE html>  
2 <html>  
3   <head>  
4     <title>Leaflet custom projection example</title>  
5     <meta charset="utf-8" />  
6     <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />  
7     <script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet-src.js"></script>  
8     <script src="//cdnjs.cloudflare.com/ajax/libs/proj4js/2.0.0/proj4.js"></script>  
9     <script src="http://mapserv.utah.gov/cdn/examples/proj4leaflet.js"></script>  
10   </head>  
11   <body>  
12     <div id="map" style="width: 600px; height: 400px"></div>  
13     <br/>  
14     <div id="map2" style="width: 600px; height: 400px"></div>   
15   <script>  
16     /** UTM Albers equal area projection in leaflet **/  
17     // create new Proj4Leaflet CRS  
18     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', {  
19       origin: [416729.617118, 412156.942963],    
20       bounds: [  
21         [-2410329.835748, 13545805.10653],  
22         [-10850237.174162, 3977377.378424]      
23       ],    
24       resolutions: [  
25         4891.96999883583 * 8,  
26         4891.96999883583 * 4,  
27         4891.96999883583 * 2,  
28         4891.96999883583,  
29         2445.98499994708,  
30         1222.99250010583,  
31         611.496250052917,  
32         305.748124894166,  
33         152.8740625,  
34         76.4370312632292,  
35         38.2185156316146,  
36         19.1092578131615,  
37         9.55462890525781,  
38         4.77731445262891,  
39         2.38865722657904,  
40         1.19432861315723,  
41         0.597164306578613,  
42         0.298582153289307,  
43         0.298582153289307 / 2,  
44         0.298582153289307 / 4,  
45         0.298582153289307 / 8,  
46         0.298582153289307 / 16  
47       ]  
48     });  
49     // pass crs into map constructor  
50     var map = window.map = new L.Map('map', {  
51       crs: crs  
52     }).setView([39.84, -98.58], 1);  
53     var wms = window.wms = new L.TileLayer.WMS('http://sampleserver1.arcgisonline.com/ArcGIS/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/WMSServer', {  
54       transparent: true,  
55       format: 'image/png',  
56       layers: '0',  
57       tiles: true,    
58       continuousWorld: true  
59     }).addTo(map)  
60     /** UTM Zone 13 projection in leaflet **/  
61     // create new Proj4Leaflet CRS  
62     var crs = new L.Proj.CRS('EPSG:26913', '+proj=utm +zone=13 +ellps=GRS80 +datum=NAD83 +units=m +no_defs', {  
63       origin: [656736.237411, 3423829.249531],  
64       bounds: [  
65         [500000, 9997964.94294],  
66         [500000, -9997964.94294]  
67       ],  
68       resolutions: [  
69       4891.96999883583 * 8,  
70       4891.96999883583 * 4,  
71       4891.96999883583 * 2,  
72       4891.96999883583,  
73       2445.98499994708,  
74       1222.99250010583,  
75       611.496250052917,  
76       305.748124894166,  
77       152.8740625,  
78       76.4370312632292,  
79       38.2185156316146,  
80       19.1092578131615,  
81       9.55462890525781,  
82       4.77731445262891,  
83       2.38865722657904,  
84       1.19432861315723,  
85       0.597164306578613,  
86       0.298582153289307,  
87       0.298582153289307 / 2,  
88       0.298582153289307 / 4,  
89       0.298582153289307 / 8,  
90       0.298582153289307 / 16]  
91     });  
92     // pass crs into map constructor  
93     var map2 = window.map = new L.Map('map2', {  
94       crs: crs  
95     }).setView([39.84, -98.58], 1);  
96     var wms = window.wms = new L.TileLayer.WMS('http://sampleserver1.arcgisonline.com/ArcGIS/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/WMSServer', {  
97       transparent: true,  
98       format: 'image/png',  
99       layers: '0',  
100       tiles: true,    
101       continuousWorld: true  
102     }).addTo(map2)  
103   </script>  
104   </body>  
105 </html>  
106
source