Skip to content

Autocomplete highlight area

This example demonstrates the highlighting of an area by using autocomplete and the area service.

<!DOCTYPE html>
<html>
  <head lang="de">
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <script src="https://cdn.smartmaps.cloud/packages/smartmaps/autocomplete/v5/umd/autocomplete.min.js"></script>
    <script src="https://cdn.smartmaps.cloud/packages/smartmaps/smartmaps-gl/v2/umd/smartmaps-gl.min.js"></script>
    <link
      rel="stylesheet"
      href="https://cdn.smartmaps.cloud/packages/smartmaps/autocomplete/autocomplete.css"
    />
    <style>
      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }

      html,
      body {
        height: 100%;
        font-family: "Open Sans", Helvetica, sans-serif;
        margin: 0;
      }

      .sm-autocomplete {
        position: absolute;
        width: 20%;
        align-items: center;
        margin: 0.5rem;
        width: calc(100% - 58px);
        max-width: 350px;
        font-size: 16px;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
        outline: none;
        border: 1px solid #ddd;
        background-color: white;
        border-radius: 4px;

        @media only screen and (max-width: 600px) {
          margin-top: 13%;
        }
      }
    </style>
  </head>

  <body>
    <div id="map-wrapper">
      <div id="map"></div>
      <input
        id="smartmaps-complete"
        type="search"
        placeholder="Enter address"
      />
    </div>
    <script>
      const apiKey = "INSERT API-KEY";
      const map = new smartmapsgl.Map({
        apiKey: apiKey,
        container: "map",
        center: [13.377702, 52.51628],
        zoom: 3,
        style: smartmapsgl.MapStyle.AUTO,
      });

      // Zoom-Level auf Basis GeoEntity-Typ:
      function getGeoEntityBasedZoomLevel(geoEntityType) {
        switch (geoEntityType) {
          case "COUNTRY":
            return 4;

          case "STATE":
            return 6;
          case "COUNTY":
            return 8;

          case "CITY":
          case "CITY_WITH_ZIP":
          case "ZIP":
            return 10;

          case "CITYPART":
          case "CITYPART_WITH_ZIP":
          case "DISTRICT":
          case "NEIGHBOURHOOD":
          case "VILLAGE":
            return 13;

          default:
            return 8;
        }
      }

      // Level auf Basis GeoEntity-Typ für Area-Service:
      function getAdminLevelByGeoEntityType(geoEntityType) {
        switch (geoEntityType) {
          case "COUNTRY":
            return 2;
          case "STATE":
            return 4;
          case "COUNTY":
            return 6;
          case "CITY":
          case "CITYPART":
            return 8;
          case "NEIGHBOURHOOD":
          case "DISTRICT":
          case "VILLAGE":
            return 10;
          case "ZIP":
          case "CITYPART_WITH_ZIP":
          case "CITY_WITH_ZIP":
            return 0;
          default:
            return 8;
        }
      }

      // Autocomplete:
      async function init() {
        const autocomplete =
          await smartmaps.autocompleteService.createAutocomplete(
            document.querySelector("#smartmaps-complete"),
            apiKey,
            {
              suggestionItemAlign: "auto",
              onlineState: "ONLINE",
              includeFilters: {
                city: true,
                citypart: true,
                county: true,
                country: true,
                district: true,
                neighborhood: true,
                state: true,
                village: true,
                zip: true,
                zipCity: true,
                zipCitypart: true,
              },
            }
          );

        autocomplete.addEventListener("error", (err) => {
          console.error(err);
        });

        autocomplete.addEventListener("selected", (e) => {
          const geojson = e.detail.geojson;
          const osmId = geojson.properties._osmid;
          const geoEntityType = geojson.properties.geoEntityType;
          const zoomLevelJumpTo = getGeoEntityBasedZoomLevel(geoEntityType);
          const center = geojson.geometry.coordinates;

          map.jumpTo({
            center: center,
            zoom: zoomLevelJumpTo,
            bearing: 0,
          });

          let url;
          if (osmId !== -1) {
            url = `https://area.smartmaps.cloud/api/v2/Boundaries/osmid?apiKey=${apiKey}&osmid=${osmId}&zoom=${zoomLevelJumpTo}`;
          } else {
            const level = getAdminLevelByGeoEntityType(geoEntityType);
            const latitude = center[1];
            const longitude = center[0];
            url = `https://area.smartmaps.cloud/api/v2/Boundaries/point?apiKey=${apiKey}&latitude=${latitude}&longitude=${longitude}&level=${level}&zoom=${zoomLevelJumpTo}`;
          }

          fetch(url)
            .then((response) => response.json())
            .then((data) => {
              // Entfernen Sie den vorhandenen Layer, falls vorhanden
              if (map.getLayer("geojson-outline-layer")) {
                map.removeLayer("geojson-outline-layer");
                map.removeSource("geojson-source");
              }

              // GeoJSON als Quelle hinzufügen
              map.addSource("geojson-source", {
                type: "geojson",
                data: data,
              });

              // Line-Layer für den Umriss des Polygons
              map.addLayer({
                id: "geojson-outline-layer",
                type: "line",
                source: "geojson-source",
                layout: {},
                paint: {
                  "line-color": "#ff0000",
                  "line-width": 2,
                  "line-dasharray": [1, 1],
                },
              });
            })
            .catch((error) => console.error("Error loading GeoJSON:", error));
        });
      }

      init();
    </script>
  </body>
</html>