SmartMaps ENTERPRISE

Hierbei handelt es sich um eine Enterprise-Funktion der SmartMaps. Die Funktionalität ist in SmartMaps FREE nicht verfügbar. Sie nutzen bereits SmartMaps ENTERPRISE oder haben Interesse an diesem Service? Für die Freischaltung dieses Dienstes und weiteren Fragen stehen wir Ihnen gerne in unserem Supportbereich  zur Verfügung.

Umkreissuche

Mit der Umkreissuche können Sie sich verschiedene Geokodierungen in der Nähe ihres Ausgangpunktes anzeigen lassen (Filialen, Dienstleistungen, usw.).

Anleitung

Für die Implementierung der SmartMaps-Umkreissuche, welche die Anzeige von geokodierten Adressen (POIs) in der Nähe eines Ausgangpunktes ermöglicht, wird vorerst im body-Tag des HTML-Skriptes ein div-Element mit der ID map-wrapper hinzugefügt.

  <div id="map-wrapper">
     ...
  </div>

Um die Anzeige der SmartMaps-Karte zur ermöglichen, beinhaltet der map-wrapper ein leeres div-Element mit der ID map.  In diesem wird zur Laufzeit die Karte geladen. Für das div-Element kann man durch das style-Attribut eine feste Höhe und Breite für die Karte festlegen.

    <div id="map" style="height: 400px; width: 500px;"></div>

Die Umsetzung der Umkreissuche und die dazugehörige Auflistung der vom Ausgangspunkt sich in der Nähe befindenden POIs, wird ermöglicht durch die Einbindung von JavaScript-Code. Dieser kann, wie in diesem Beispiel, anhand eines script-Tags im HTML-Skript oder in einer separaten .js-Datei eingebunden werden. Alle Variablen und Funktionen werden in der ym.ready-Methode implementiert, da diese Abhängigkeiten auflöst, um die eigentliche Kartenanwendung zu starten.

    ym.ready(function(modules) {
      ...
    });

Für das Anzeigen der SmartMaps-Karte zur Auswahl des Ausgangpunktes der Umkreissuche wird ein Objekt der Klasse ym.map angelegt. Als Parameter wird dabei die ID des div-Elementes übergeben, in dem die Karte eingezeichnet werden soll, und die gewünschten Karten-Optionen (Startposition, Startzoom-Level, usw.). Um die Karte weiterhin im Code zu verwalten, wird das Objekt in einer Variable map gelagert.

      // Karte definieren.
      var map = new ym.map("map", {
        center: new ym.latLng(51.20978708852442, 10.45829772949219),
        zoom: 14
      });
      window.map = map;

Die Umkreissuche wird durch ein Objekt der Klasse ym.services.AddressSearch ermöglicht. Dieses wird in die Variable address gelagert. Im folgendem Beispiel wird die Implementierung einer Umkreissuche durch Branchencodes aufgezeigt. Daher benötigt man für die Initialisierung dieser die byBranch-Methode. Diese bekommt als Parameter an erster Stelle die Branchencodes der POIs, welche bei der Umkreissuche berücksichtigt werden sollen. An zweiter Stelle ist der Ausgangspunkt der Umkreissuche definiert. Im folgenden Beispiel ist dies durch die getCenter-Methode der ym.map-Klasse immer die Mitte des Karten-Rechtecks. An letzter Stelle steht der Radius, in welchem die Umkreissuche stattfinden soll.

       // Umkreissuche definieren.
      var address = new ym.services.AddressSearch();
      address.byBranch(['CGGA'], map.getCenter(), 50000);

Bei einer laufenden Umkreissuche, werden die gefunden POIs als GeoJSON-Objekte verwaltet. Daher wird ein Objekt der ym.GeoJson-Klasse benötigt. Durch das Objekt können kommende Adressdaten mit einem Marker und, wie im folgenden Beispiel, einem Pop-Up initialisiert werden. Diese Objekte werden auf einer Ebene verwaltet, welche man auf der SmartMaps-Karte einzeichnen könnte. Für den zugriff auf die Ebene, wird das Objekt in die Variable geoJson gelagert.

      //Geo Json
      var geoJson = new ym.geoJson(null, {
        onEachFeature: function (feature, layer) {
          layer.bindPopup("<p>" + feature.properties.jcard.address.companyName + "</p>");
        }
      });

Um die Umkreissuche zu verfolgen, nutzt man für die AddressSearch-Klasse, welche die Geokodierung auf der SmartMaps-Karte ermöglicht, einen EventEmitter. Dieser ermöglicht durch seine on-Methode, dass ein Listener hinzugefügt wird. Der Listener führt Funktionen bei bestimmten Events durch und kann somit genutzt werden um zwischen einer erfolgreichen und nicht erfolgreichen Umkreissuche zu unterscheiden. In dem Falle ist die AdressSearch-Klasse mit einen EventEmitter schon ausgestattet und kann direkt auf die on-Methode zugereifen.
Im Falle einer erfolgreichen Umkreissuche ('success') werden alle Ergebnisse, durch die addData-Methode der GeoJson-Klasse, als GeoJson-Objekte der Ebene hinzugefügt. Im Falle einer nicht erfolgreichen Umkreissuche wird dementsprechend ein Fehler-Log in die Konsole geschrieben. 

      //Erfolgreich
      address.on('success', function (req, res) {
        geoJson.addData(res.body);
      });
      //Nicht erfolgreich 
      address.on('error', function (request, response) {
        console.log(response.xhr);
        console.log(response.event);
      });

Die endgültige Darstellung der Ergebnisse einer Umkreissuche auf der Karte erfolgt durch das Hinzufügen der Ebene des GeoJson-Objektes geoJson zum Karten-Objekt map.

      geoJson.addTo(map);

Die Umkreissuche ist nun erfolgreich eingebunden.

HTML Dokument

Codebeispiel: Umkreissuche

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>Umkreissuche</title>
</head>
<body>
  <script
    src="https://www.yellowmap.de/api_rst/api/loader?libraries=enterprise&apiKey={API_KEY}"></script>
  <div id="map" style="height: 400px; width: 500px;"></div>
  <script>
    ym.ready(function (modules) {
      // Karte definieren.
      var map = new ym.map("map", {
        center: new ym.latLng(51.20978708852442, 10.45829772949219),
        zoom: 14
      });
      window.map = map;
      // Umkreissuche definieren.
      var address = new ym.services.AddressSearch();
      address.byBranch(['CGGA'], map.getCenter(), 50000);
      //Geo Json
      var geoJson = new ym.geoJson(null, {
        onEachFeature: function (feature, layer) {
          layer.bindPopup("<p>" + feature.properties.jcard.address.companyName + "</p>");
        }
      });
      //Erfolgreich
      address.on('success', function (req, res) {
        geoJson.addData(res.body);
      });
      //Nicht erfolgreich 
      address.on('error', function (request, response) {
        console.log(response.xhr);
        console.log(response.event);
      });
      geoJson.addTo(map);
    });
  </script>
</body>
</html>