Skip to main content

clickLayer query

When the mouse clicks on a layer feature, the attribute information of the feature is displayed.

show
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>clickLayer query</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,
        userId: '***', // Authorization code,This parameter must be added
    });
    
      map.on('load', function () {
               map.on('click', 'buildings-high', function (e) {
                     new mapmost.Popup()
                         .setLngLat(e.lngLat)
                         .setHTML("Building height:"+e.features[0].properties.jzzgdgd)
                         .addTo(map);
                 });
         
                 // Change the cursor to a pointer when the mouse is over the states layer.
                 map.on('mouseenter', 'buildings-high', function () {
                     map.getCanvas().style.cursor = 'pointer';
                 });
         
                 // Change it back to a pointer when it leaves.
                 map.on('mouseleave', 'buildings-high', function () {
                     map.getCanvas().style.cursor = '';
                 });
      })
</script>
</body>
</html>