Exemple estils vector ICGC

Veure codi font pantalla completa



        <html>
<head>
    <meta charset='utf-8'/>
    <title>Exemple MapLibre i ContextMaps ICGC</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
    <script src="https://unpkg.com/maplibre-gl@1.14.0-rc.1/dist/maplibre-gl.js"></script>
    <link href="https://unpkg.com/maplibre-gl@1.14.0-rc.1/dist/maplibre-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' type='radio' name='rtoggle' value='icgc' checked='checked'>
        <label for='icgc'>icgc</label>
        <input id='osm-bright' type='radio' name='rtoggle' value='osm-bright'>
        <label for='osm-bright'>osm-bright</label>
        <input id='positron' type='radio' name='rtoggle' value='positron'>
        <label for='positron'>positron</label>
        <input id='fulldark' type='radio' name='rtoggle' value='fulldark'>
        <label for='fulldark'>fulldark</label>
        <input id='night' type='radio' name='rtoggle' value='night'>
        <label for='night'>night</label>
        <input id='hibrid' type='radio' name='rtoggle' value='hibrid'>
        <label for='hibrid'>hibrid</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 type="module">
       const map = new maplibregl.Map({
            container: 'map',
            style: 'https://geoserveis.icgc.cat/contextmaps/icgc.json',
           center: [1.1464, 41.706],
            zoom: 7.4,
            maxZoom: 14,
            hash: true,
            pitch: 0,
			attributionControl: false
        });
        map.on('load', function () {
            map.addControl(new maplibregl.NavigationControl());
			map.addControl(new maplibregl.AttributionControl({
               compact: true
			}));
            map.addControl(new maplibregl.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>