Hide POI on search 2

MapGL conditional POI visibility

by Michel Beloshitsky

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>2GIS Map API</title>
        <meta name="description" content="Quckstart with 2GIS Map API">
    </head>
    <body>
        <input placeholder="Поиск..." id="search" oninput="onSearch(event)" onblur="finishSearch()">
        <div id="container"></div>
        <script src="https://mapgl.2gis.com/api/js/v1"></script>
    </body>
</html>

CSS

html,
body,
#container {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#search {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
}

JavaScript

const map = new mapgl.Map('container', {
    center: [55.31878, 25.23584],
    zoom: 13,
    key: 'bfd8bbca-8abf-11ea-b033-5fa57aae2de7',
    style: '4322c286-92a7-48e9-b2d2-b62d4338ba0b',
    styleState: {
      isSearching: false
    }
});

const marker = new mapgl.Marker(map, {
    coordinates: [55.31878, 25.23584],
});

function onSearch(ev) {
  map.patchStyleState({ isSearching: !!ev.target.value });
}

function finishSearch() {
  map.patchStyleState({ isSearching: false });
}