Exemple estils vector ICGC àmbit mundial

Veure codi font pantalla completa 

  1.  
  2. <html>
  3. <head>
  4.     <meta charset='utf-8'/>
  5.     <title>Exemple mapbox i ContextMaps ICGC</title>
  6.     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
  7.     <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.13.1/mapbox-gl.js"></script>
  8.     <link href="https://api.mapbox.com/mapbox-gl-js/v1.13.1/mapbox-gl.css" rel="stylesheet"/>
  9.     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
  10.     <style>
  11.         body {
  12.             margin: 0;
  13.             padding: 0;
  14.         }
  15.         #map {
  16.             position: absolute;
  17.             top: 0;
  18.             bottom: 0;
  19.             width: 100%;
  20.             height: 100%
  21.         }
  22.         #menu {
  23.             position: absolute;
  24.             z-index: 1000;
  25.             background: #fff;
  26.             padding: 10px;
  27.             font-family: 'Open Sans', sans-serif;
  28.             top: 5px;
  29.             left: 5px;
  30.             border-radius: 7px;
  31.             -webkit-box-shadow: 5px 5px 5px -5px rgba(0, 0, 0, 0.75);
  32.             -moz-box-shadow: 5px 5px 5px -5px rgba(0, 0, 0, 0.75);
  33.             box-shadow: 5px 5px 5px -5px rgba(0, 0, 0, 0.75);
  34.         }
  35.         #div_pitch {
  36.             position: absolute;
  37.             right: 10px;
  38.             top: 142px;
  39.             width: 30px;
  40.             z-index: 100;
  41.         }
  42.         .sliderClass {
  43.             position: absolute;
  44.             left: 10px;
  45.             top: 79px;
  46.             width: 130px;
  47.             z-index: 100;
  48.             display: none;
  49.             background-color: white;
  50.             padding: 10px;
  51.             border-radius: 4px;
  52.             font-size: 0.85em;
  53.             opacity: 0.9;
  54.         }
  55.     </style>
  56. </head>
  57. <body>
  58.     <div id='menu'>
  59.     <input id='icgc_mapa_estandard' type='radio' name='rtoggle' value='icgc_mapa_estandard' checked='checked'>
  60.     <label for='icgc_mapa_estandard'>Mapa estàndard</label><br>
  61.     <input id='icgc_mapa_base_gris' type='radio' name='rtoggle' value='icgc_mapa_base_gris'>
  62.     <label for='icgc_mapa_base_gris'>Mapa base gris</label><br>
  63.     <input id='icgc_delimitacio_estandard' type='radio' name='rtoggle' value='icgc_delimitacio_estandard'>
  64.     <label for='icgc_delimitacio_estandard'>Delimitació estàndard</label><br>
  65.     <input id='icgc_xarxa_viaria_estandard' type='radio' name='rtoggle' value='icgc_xarxa_viaria_estandard'>
  66.     <label for='icgc_xarxa_viaria_estandard'>Xarxa viària estàndard</label><br>
  67.     <input id='icgc_arees_poblament' type='radio' name='rtoggle' value='icgc_arees_poblament'>
  68.     <label for='icgc_arees_poblament'>Àrees poblament</label><br>
  69.     <input id='icgc_orto_hibrida' type='radio' name='rtoggle' value='icgc_orto_hibrida'>
  70.     <label for='icgc_orto_hibrida'>Orto híbrida</label>
  71.     </div>
  72.     <div id='div_pitch' class="mapboxgl-ctrl-group mapboxgl-ctrl">
  73.         <button id="bt_pitch" title="Perspectiva" class="mapboxgl-ctrl-icon glyphicon glyphicon-road"></button>
  74.     </div>
  75.     <div id="map"></div>
  76.     <script>
  77.        const map = new mapboxgl.Map({
  78.             container: 'map',
  79.             style: 'https://geoserveis.icgc.cat/contextmaps/icgc_mapa_estandard.json',
  80.            center: [1.1464, 41.706],
  81.             zoom: 7.4,
  82.             maxZoom: 14,
  83.             hash: true,
  84.             pitch: 0,
  85. 			attributionControl: false
  86.         });
  87.         map.on('load', function () {
  88.             map.addControl(new mapboxgl.NavigationControl());
  89. 			map.addControl(new mapboxgl.AttributionControl({
  90.                compact: true
  91. 			}));
  92.             map.addControl(new mapboxgl.GeolocateControl({
  93.                 positionOptions: {
  94.                     enableHighAccuracy: true,
  95.                     watchPosition: true
  96.                 }
  97.             }));
  98.         });
  99.         const layerList = document.getElementById('menu');
  100.         const inputs = layerList.getElementsByTagName('input');
  101.         const button = document.getElementById('bt_pitch');
  102.         function switchLayer(layer) {
  103.             const layerId = layer.target.id;
  104.                 map.setStyle('https://geoserveis.icgc.cat/contextmaps/' + layerId + '.json');
  105.         }
  106.         function canviaPerspectiva() {
  107.             const pitch = parseInt(map.getPitch());
  108.             pitch == 60 ? pitch = 0 : pitch = pitch + 30;
  109.             map.easeTo({
  110.                 'pitch': pitch
  111.             })
  112.         };
  113.         for (let  i = 0; i < inputs.length; i++) {
  114.             inputs[i].onclick = switchLayer;
  115.         }
  116.         button.onclick = canviaPerspectiva;
  117.     </script>
  118. </body>
  119. </html>
  120.