Commercail POI category

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 commPoiLayer = {
  "id": "761398-1",
  "name": "Коммерческие POI",
  "type": "point",
  "style": {
    "textFont": [
      "Noto_Sans_Semibold",
      [
        "step",
        [
          "zoom"
        ],
        "",
        16,
        "Noto_Sans"
      ]
    ],
    "iconImage": "peak",
    "iconWidth": [
      "interpolate",
      [
        "linear"
      ],
      [
        "zoom"
      ],
      15,
      14,
      16.8,
      16
    ],
    "textColor": ["match", ["global", "poiCategory"], [["get", "poi_category"]], "#FF0000", "#00FF00"],
    "visibility": "visible",
    "iconPriority": 50,
    "textFontSize": [
      [
        "interpolate",
        [
          "linear"
        ],
        [
          "zoom"
        ],
        15.5,
        11,
        18,
        13
      ],
      [
        "interpolate",
        [
          "linear"
        ],
        [
          "zoom"
        ],
        15.5,
        10,
        18,
        12
      ]
    ],
    "textPriority": 30,
    "textHaloColor": "rgba(255,255,255,0.5)",
    "textHaloWidth": 0.9,
    "iconLabelingMargin": {
      "leftRight": 6,
      "topBottom": 6
    }
  },
  "filter": [
    "all",
    [
      "match",
      [
        "get",
        "db_sublayer"
      ],
      [
        "Commercial_poi_default"
      ],
      true,
      false
    ],
    [
      "match",
      [
        "get",
        "db_region"
      ],
      [
        99
      ],
      false,
      true
    ],
    [
      "match",
      [
        "global",
        "searchOn"
      ],
      [
        true
      ],
      false,
      true
    ],
    [
      "any",
      [
        "==",
        [
          "in",
          [
            "get",
            "db_building_id"
          ],
          [
            "global",
            "_activeFloorBuildingIds"
          ]
        ],
        false
      ],
      [
        "in",
        [
          "get",
          "db_plan_id"
        ],
        [
          "global",
          "_activeFloorIds"
 ...