Für die Implementierung des SmartMaps-Flächenservices, welche das Erkennen und Anzeigen von administrativen Flächen 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>

Der map-wrapper beinhaltet in sich ein div-Element mit der Klasse geocoder-form. In diesem steht ein leeres small-Element mit der ID message, weches später genutzt wird um Benachrichtungen bezüglich der Auswahl und des Ladens der administrativen Flächen anzeigen zu lassen. Somit wird der Nutzer über den Stand des Flächenservices informiert.

    <div class="geocoder-form" style="z-index:1000">
      <p>Klick in die Karte lädt den zugehörigen Bereich</p>
      <small id="message"></small >
    </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>

Für die Umsetzung der Funktionalität des Flächenservices und die dazugehörige Einzeichnung der administrativen Bereiche, ist die Einbindung von JavaScript-Code notwendig. 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) {

      ...

    });

Der Verlauf (Auswahl, Laden, Anzeige) eines Flächenservices kann beim Laden wenige Sekunden an Zeit benötigen. Hierfür wird der Nutzer durch Benachrichtigungen auf der Oberfläche informiert. Um diese dynamisch während dem Prozess des Flächenservices zu ändern und anzuzeigen wird das für die Benachrichtigungen vorgesehene small-Element mit der ID message in eine Variable message gelagert.

      var message = document.getElementById("message");

Für das Anzeigen der SmartMaps-Karte zur Auswahl der administrativen Flächen 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 = ym.map("map", {
        center: ym.latLng(48.991897, 8.435568),
        zoom: 6
      });

Die administrativen Flächen werden in der Karte visuell durch einen Flächen-Layer definiert. Dabei handelt es sich um ein Objekt der GeoJson-Klasse, in welchem für die Darstellung der Flächen verschiedene Optionen als Parameter hinzugefügt werden können. Im folgenden Beispiel wird im Optionen-Parameter ein Popup für die administrativen Flächen definiert, welcher beim anklicken dieser erscheint und Informationen der Fläche anzeigt.  Das Objekt wird in die Variable areaLayer gelagert und zur Karte hinzugefügt.

      // Flächen-Layer definieren.
      var areaLayer = ym.geoJson(null, {
        onEachFeature: function(feature, layer) {
          var popupContent = "";
          for (var k in feature.properties) {
            popupContent += "<b>" + k + "</b> " + feature.properties[k] + "<br>";
          }
          layer.bindPopup("<pre>" + popupContent + "</pre>");
        }
      });
      // Layer einzeichnen.
      map.addLayer(areaLayer);

Um die Polygone einer administrativen Fläche zu bekommen, wird ein Objekt der Klasse Area benötigt. Diese GeoJSON-Polygone holt sich die Klasse anhand der GeoJSON-WebService-Schnittstelle. Das Area-Objekt ermöglicht somit die Erkennung von administrativen Flächen und übergibt deren GeoJson-Informationen zur Darstellung auf der Kartenoberfläche.

      var area = new ym.services.Area();

Um das Laden der administrativen Flächen zu verfolgen, nutzt man für die Area-Klasse 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 Übergabe von Flächendaten zu unterscheiden. In dem Falle ist die Area-Klasse mit einen EventEmitter schon ausgestattet und kann direkt auf die on-Methode zugreifen.
Im Falle einer erfolgreichen Übergabe von Flächendaten ('success') wird das small-Element message mit einer Bestätigungsnachricht aktualisiert. Für die Darstellung auf der Karte wird die addData-Methode des areaLayer's mit den übergebenen Flächendaten als Parameter aufgerufen.

      area.on('success', function(req, res) {
        message.innerHTML = "Daten wurden übermittelt";
        areaLayer.addData(res.body);
        map.fitBounds(areaLayer.getBounds());
      });

Die map-Klasse besitzt ebenfalls die on-Methode der EventEmitter-Klasse, um bei einem Mausklick auf einer administrativen Fläche ('click') die entsprechenden Flächendaten mit der load-Methode der Area-Klasse zu laden.

      map.on('click', function(e) {
        message.innerHTML = "Bereich wird geladen...";
        if (areaLayer) {
          areaLayer.clearLayers();
        }
        area.load(e.latlng, [1]);
      });

Die auf der SmartMaps-Karte mögliche Einzeichnung von administrativen Flächen ist nun erfolgreich eingebunden.