Exemple estils vector ICGC àmbit mundial

Veure codi font pantalla completa



<html>
<head>
    <meta charset='utf-8'/>
    <title>Exemple mapbox i ContextMaps ICGC</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.13.1/mapbox-gl.js"></script>
    <link href="https://api.mapbox.com/mapbox-gl-js/v1.13.1/mapbox-gl.css" rel="stylesheet"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
            height: 100%
        }
        #menu {
            position: absolute;
            z-index: 1000;
            background: #fff;
            padding: 10px;
            font-family: 'Open Sans', sans-serif;
            top: 5px;
            left: 5px;
            border-radius: 7px;
            -webkit-box-shadow: 5px 5px 5px -5px rgba(0, 0, 0, 0.75);
            -moz-box-shadow: 5px 5px 5px -5px rgba(0, 0, 0, 0.75);
            box-shadow: 5px 5px 5px -5px rgba(0, 0, 0, 0.75);
        }
        #div_pitch {
            position: absolute;
            right: 10px;
            top: 142px;
            width: 30px;
            z-index: 100;
        }
        .sliderClass {
            position: absolute;
            left: 10px;
            top: 79px;
            width: 130px;
            z-index: 100;
            display: none;
            background-color: white;
            padding: 10px;
            border-radius: 4px;
            font-size: 0.85em;
            opacity: 0.9;
        }
    </style>
</head>
<body>
    <div id='menu'>
    <input id='icgc_mapa_estandard' type='radio' name='rtoggle' value='icgc_mapa_estandard' checked='checked'>
    <label for='icgc_mapa_estandard'>Mapa estàndard</label><br>
    <input id='icgc_mapa_base_gris' type='radio' name='rtoggle' value='icgc_mapa_base_gris'>
    <label for='icgc_mapa_base_gris'>Mapa base gris</label><br>
    <input id='icgc_delimitacio_estandard' type='radio' name='rtoggle' value='icgc_delimitacio_estandard'>
    <label for='icgc_delimitacio_estandard'>Delimitació estàndard</label><br>
    <input id='icgc_xarxa_viaria_estandard' type='radio' name='rtoggle' value='icgc_xarxa_viaria_estandard'>
    <label for='icgc_xarxa_viaria_estandard'>Xarxa viària estàndard</label><br>
    <input id='icgc_arees_poblament' type='radio' name='rtoggle' value='icgc_arees_poblament'>
    <label for='icgc_arees_poblament'>Àrees poblament</label><br>
    <input id='icgc_orto_hibrida' type='radio' name='rtoggle' value='icgc_orto_hibrida'>
    <label for='icgc_orto_hibrida'>Orto híbrida</label>
    </div>
    <div id='div_pitch' class="mapboxgl-ctrl-group mapboxgl-ctrl">
        <button id="bt_pitch" title="Perspectiva" class="mapboxgl-ctrl-icon glyphicon glyphicon-road"></button>
    </div>
    <div id="map"></div>
    <script>
       const map = new mapboxgl.Map({
            container: 'map',
            style: 'https://geoserveis.icgc.cat/contextmaps/icgc_mapa_estandard.json',
           center: [1.1464, 41.706],
            zoom: 7.4,
            maxZoom: 14,
            hash: true,
            pitch: 0,
			attributionControl: false
        });
        map.on('load', function () {
            map.addControl(new mapboxgl.NavigationControl());
			map.addControl(new mapboxgl.AttributionControl({
               compact: true
			}));
            map.addControl(new mapboxgl.GeolocateControl({
                positionOptions: {
                    enableHighAccuracy: true,
                    watchPosition: true
                }
            }));
        });
        const layerList = document.getElementById('menu');
        const inputs = layerList.getElementsByTagName('input');
        const button = document.getElementById('bt_pitch');
        function switchLayer(layer) {
            const layerId = layer.target.id;
                map.setStyle('https://geoserveis.icgc.cat/contextmaps/' + layerId + '.json');
        }
        function canviaPerspectiva() {
            const pitch = parseInt(map.getPitch());
            pitch == 60 ? pitch = 0 : pitch = pitch + 30;
            map.easeTo({
                'pitch': pitch
            })
        };
        for (let  i = 0; i < inputs.length; i++) {
            inputs[i].onclick = switchLayer;
        }
        button.onclick = canviaPerspectiva;
    </script>
</body>
</html>