For the implementation of an area service, which geocodes found results to the SmartMaps map according to the user's wishes, a div element with the ID map-wrapper is first added to the body tag of the HTML script.

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

The map-wrapper contains a div element with the class geocoder-form. It contains an empty small element with the ID message, which will be used later to display notifications regarding the selection and loading of administrative areas. The user is informed about the status of the area service.

    <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>

To enable the display of the SmartMaps map, the map-wrapper contains an empty div element with the ID map.  In this div element the map is loaded at runtime. For the div element you can set a fixed height and width for the map with the style-attribute.

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

To implement the functionality of the area service and the corresponding drawing of the administrative areas, the integration of JavaScript code is necessary. As in this example, this code can be included in the HTML script or in a separate .js file using a script tag. All variables and functions are implemented in the ym.ready method, because this method resolves dependencies to start the actual map application.

    ym.ready(function(modules) {

      ...

    });

The process (selection, loading, display) of an area service can take a few seconds when loading. For this purpose, the user is informed by notifications on the surface. To change and display these notifications dynamically during the process of the surface service, the small element with the ID message is stored in a variable message.

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

To display the SmartMaps map for selecting the administrative areas, an object of the class ym.map is created. Parameters are the ID of the div element in which the map is to be drawn and the desired map options (start position, start zoom level, etc.). To manage the map further in code, the object is stored in a variable map.

      // Karte definieren.
      var map = ym.map("map", {
        center: ym.latLng(48.991897, 8.435568),
        zoom: 6
      });

The administrative areas are visually defined in the map by an area layer. This is an object of the geoJson class, in which various options can be added as parameters for the representation of the surfaces. In the following example a popup for the administrative areas is defined in the options parameter. When clicking on this popup it appears and displays information about the area. The object is stored in the variable areaLayer and added to the map.

      // 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);

To get the polygons of an administrative area, an object of the class Area is needed. This GeoJSON-polygons gets the class using the GeoJSON WebService interface. The Area object enables the recognition of administrative areas and passes their GeoJson information for display on the map interface.

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

To track the loading of the administrative areas, an EventEmitter is used for the area class. With its on-method, it allows to add a listener. The listener performs functions on certain events and can be used to distinguish between a successful and unsuccessful transfer of area data. In this case the area class is already equipped with an EventEmitter and can directly access the on-method.
In case of a successful transfer of area data ('success') the small element message is updated with a confirmation message. For display on the map, the addData method of the areaLayer is called with the passed area data as parameter.

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

The map class also has the on method of the EventEmitter class to load the corresponding area data with the load method of the area class when clicking on an administrative area ('click').

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

The possible drawing of administrative areas on the SmartMaps map has now been successfully integrated.