Add new layer national park, attributions and layer extent to the Tiled WMS with custom projection example

examples/wms-custom-proj.html

@@ -33,10 +33,10 @@
     <div id="map">
       <div id="text">
         <h1 id="title">Tiled WMS with custom projection example</h1>
-        <div id="shortdesc">Example of a tiled WMS layer using the projection EPSG:21781.</div>
+        <div id="shortdesc">Example of two tiled WMS layers (Pixelmap 1:1'000'000 and national parks) using the projection EPSG:21781.</div>
         <div id="docs">
           <p>See the
-          <a href="wms.js" target="_blank">wms-custom-proj.js source</a>
+          <a href="wms-custom-proj.js" target="_blank">wms-custom-proj.js source</a>
           to see how this is done.</p>
         </div>
       </div>

examples/wms-custom-proj.js

@@ -24,16 +24,29 @@ var layers = new ol.Collection([
   new ol.layer.TileLayer({
     source: new ol.source.TiledWMS({
       url: 'http://wms.geo.admin.ch/?',
+      attributions: [new ol.Attribution('&copy; <a href="http://www.geo.admin.ch/internet/geoportal/en/home.html">Pixelmap 1:1000000 / geo.admin.ch</a>')],
+      crossOrigin: null,
       params: {'LAYERS': 'ch.swisstopo.pixelkarte-farbe-pk1000.noscale'},
-      projection: epsg21781
+      projection: epsg21781,
+      extent: extent
+    })
+  }),
+  new ol.layer.TileLayer({
+    source: new ol.source.TiledWMS({
+      url: 'http://wms.geo.admin.ch/?',
+      attributions: [new ol.Attribution('&copy; <a href="http://www.geo.admin.ch/internet/geoportal/en/home.html">National parks / geo.admin.ch</a>')],
+      crossOrigin: null,
+      params: {'LAYERS': 'ch.bafu.schutzgebiete-paerke_nationaler_bedeutung'},
+      projection: epsg21781,
+      extent: extent
     })
   })
 ]);
 
 var map = new ol.Map({
-  center: new ol.Coordinate(600000, 200000),
+  center: new ol.Coordinate(660000, 190000),
   projection: epsg21781,
   layers: layers,
   target: 'map',
-  zoom: 8
+  zoom: 9
 });