NBNMapOverlayExamples/leaflet3.html at master · DuncanRowland/NBNMapOverlayExamples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html>
   <head>
      <title>Red fox | WMS 27700 Example | NBN Atlas</title>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="https://unpkg.com/leaflet@0.7.7/dist/leaflet.css" />
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
      <script src="https://unpkg.com/leaflet@0.7.7/dist/leaflet.js"></script>
      <script src="https://s3.eu-west-2.amazonaws.com/nbnatlas-dev/proj4-compressed.js"></script>
      <script src="https://s3.eu-west-2.amazonaws.com/nbnatlas-dev/proj4leaflet.js"></script>
   </head>
   <body>
      <div id="map" style="height: 800px"></div>
      <script>
         // Define a Proj4Leaflet crs instance configured for British National Grid
         // (EPSG:27700) and the resolutions of our base map
         var crs = new L.Proj.CRS(
             'EPSG:27700',
             '+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +datum=OSGB36 +units=m +no_defs',
             {
                 resolutions: [1600,800,400,200,100,50,25,10,5,2.5,1,0.5,0.25,0.125,0.0625]
             }
         );

         var map = new L.Map('map', {
             crs: crs,
             continuousWorld: true,
             worldCopyJump: false,
             layers: [
                 L.tileLayer.wms('https://layers.nbnatlas.org/geoserver/ALA/wms', {
                     layers: 'ALA:county_coastal_terrestrial_region',//'ALA:world',
                     styles: 'ALA:borders_only',
                     format: 'image/png',
                     maxZoom: 14,
                     minZoom: 0,
                     continuousWorld: true,
                     attribution: 'NBN Atlas'
                 })
             ]
         });

         //Variable grid - will display the data at different resolutions
         var variableGrid = L.tileLayer.wms(
            "https://records-ws.nbnatlas.org/mapping/wms/reflect", {
              q : "lsid:NHMSYS0000080188",
              layers: 'ALA:occurrences',
              format: 'image/png',
              transparent: true,
              attribution: "NBN Atlas",
              maxZoom: 14,
              minZoom: 0,
              opacity:0.7,
              continuousWorld: true,
              ENV: "colourmode:osgrid;gridlabels:true;gridres:variablegrid"
         });

         //10km grid - will only display 10km grids
         var tenkGrid = L.tileLayer.wms(
            "https://records-ws.nbnatlas.org/mapping/wms/reflect", {
              q : "lsid:NHMSYS0000080188",
              layers: 'ALA:occurrences',
              format: 'image/png',
              transparent: true,
              attribution: "NBN Atlas",
              maxZoom: 14,
              minZoom: 0,
              opacity:0.7,
              continuousWorld: true,
              ENV: "colourmode:osgrid;gridlabels:true;gridres:10kgrid;opacity:1;color:df4a21;"
         });

         //single grid - will only display a grid size suitable for the current viewport
         var singleGrid = L.tileLayer.wms(
            "https://records-ws.nbnatlas.org/mapping/wms/reflect", {
              q : "lsid:NHMSYS0000080188",
              layers: 'ALA:occurrences',
              format: 'image/png',
              transparent: true,
              attribution: "NBN Atlas",
              maxZoom: 14,
              minZoom: 0,
              opacity:0.7,
              continuousWorld: true,
              ENV: "colourmode:osgrid;gridlabels:true;gridres:singlegrid;opacity:1;color:df4a21;"
         });

         variableGrid.addTo(map);

         var overlayMaps = { "Variable grids" : variableGrid, "Single grid display" : singleGrid, "10km grids only" : tenkGrid }
         L.control.layers(overlayMaps, null, {collapsed:false}).addTo(map);
         map.setView([53.5, -1.8], 0);

      </script>
   </body>
</html>