Skip to main content

Set layer visibility level

You can customize the maximum and minimum levels that the current layer can display.

show
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Set layer visibility level</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
    <script src="https://delivery.mapmost.com/cdn/sdk/lite/v9.1.0/mapmost-lite-min.js"></script>
</head>
<body>
<div id="map"></div>
<script>
    let map = new mapmost.Map({
        container: 'map', 
        style: "<your style url>",
        center: [120.72541613154851, 31.31171803927643],
        zoom: 14,
        pitch:60,
        userId: '***', // Authorization code,This parameter must be added
    });
    
      map.on('load', function () {
          
        //Set layers13-15Visible within layer
         map.addLayer({
                    "id": "building-hig",
                    "type": "fill-extrusion",
                    "source": "cultural",
                    "source-layer": "b_buildings",
                    "layout": {
                        "visibility": "visible",
                    },
                    "minzoom": 13,
                    "maxzoom": 15,
                    "paint": {
                        "fill-extrusion-height": ["get", "jzzgdgd"],
                        "fill-extrusion-color": "#4a4a4a",
                    "filter": [">=", "dscs", 19]
                }})
      })
</script>
</body>
</html>