• Imprimeix

API de Leaflet

Si utilitzes l'API de Leaflet, afegeix mapes i fotos aèries de l'ICGC.

Codi d'un visor d'exemple que utilitza els servidors ICGC en caché per a Leaflet en el sistema de referència ETRS89 i projecció UTM fus 31 (codi EPSG 25831). Les capes disponibles són topo (mapes topogràfics) i orto (ortofotos).

<!DOCTYPE html>
<html lang="ca">
<head>
         <meta http-equiv="content-type" content="text/html; charset=utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <meta name="author" content="Institut Cartogràfic i Geològic de Catalunya -ICGC"/>
         <meta name="description" content="Exemple llibreria Leaflet amb geoserveis ICGC">
         <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
         
          <style>
             html, body, .map {
             margin: 0;
             padding: 0;
             width: 100%;
             height: 100%;
             }         
          </style>
          
          <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
          <script src="http://rawgithub.com/kartena/Proj4Leaflet/master/lib/proj4-compressed.js" type="text/javascript"></script>
          <script src="https://rawgithub.com/kartena/Proj4Leaflet/master/src/proj4leaflet.js" type="text/javascript"></script>
          
          <title>Visor demo ICGC - Leaflet</title>
</head>
    <body>
        <div id="map" class="map"></div>
            <script type="text/javascript">
                 var center = [41.82045, 1.54907];
                 var crs25831 = new L.Proj.CRS('EPSG:25831','+proj=utm +zone=31 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs',
                          {
                               resolutions: [1100, 550, 275, 100, 50, 25, 10, 5, 2, 1, 0.5, 0.25]
                          }
                 );

                 var serveiTopoCache = L.tileLayer.wms("http://mapcache.icc.cat/map/bases/service?", {
                        layers: 'topo',
                        format: 'image/jpeg',
                        crs: crs25831,
                        continuousWorld: true,
                        attribution: 'Institut Cartogràfic i Geològic de Catalunya -ICGC',
                  });

                 var serveiOrtoCache = L.tileLayer.wms("http://mapcache.icc.cat/map/bases/service?", {
                        layers: 'orto',
                        format: 'image/jpeg',
                        crs: crs25831,
                        continuousWorld: true,
                        attribution: 'Institut Cartogràfic i Geològic de Catalunya -ICGC',
                  });

                  var serveitopoGrisCache = L.tileLayer.wms("http://mapcache.icc.cat/map/bases/service?", {
                        layers: 'topogris',
                        format: 'image/jpeg',
                        crs: crs25831,
                        continuousWorld: true,
                        attribution: 'Institut Cartogràfic i Geològic de Catalunya -ICGC',
                  });

                  var wmsComarques = L.tileLayer.wms("http://geoserveis.icc.cat/icc_limadmin/wms/service?", {
                        layers: '5,1',
                        format: 'image/png',
                        crs: crs25831,
                        transparent: true,
                        continuousWorld: true,
                        attribution: 'Base Comarcal 1:50.000 -ICGC',
                  });

                  var map = L.map('map', {
                        layers: [serveiTopoCache,wmsComarques],
                        crs: crs25831,
                        continuousWorld: true,
                        worldCopyJump: false,
                        center: center,
                        zoom: 2,
                        });

                        var baseMaps = {
                                     "Topogràfic": serveiTopoCache,
                                     "Topogràfic gris": serveitopoGrisCache,
                                     "Ortofoto": serveiOrtoCache
                        };
                        var overlayMaps = {
                                     "Comarques": wmsComarques
                        };

                       L.control.layers(baseMaps, overlayMaps).addTo(map);
              </script>
    </body>
</html>