For the implementation of an area search, 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>

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>

The implementation of the area search and the corresponding listing of POIs located nearby from the starting point is made possible by the integration of JavaScript code. 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) {
      ...
    });

To display the SmartMaps map for selecting the starting point of the perimeter search, an object of the class ym.map is created. Parameters are the ID of the div element, in which the map should 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.

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

The proximity search is enabled by an object of the class ym.services.AddressSearch. This object is stored in the variable address. The following example shows the implementation of a proximity search by branch codes. Therefore the byBranch method is needed to initialize it. The first parameter of the byBranch method are the branch codes of the POIs, which should be considered for the search. In the second place the starting point of the search is defined. In the following example this is always the center of the map rectangle using the getCenter method of the ym.map class. The last position is the radius in which the radius search should take place.

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

During an ongoing perimeter search, the POIs found are managed as GeoJSON objects. Therefore an object of the ym.GeoJson class is required. The object can be used to initialize incoming address data with a marker and, as in the following example, a pop-up. These objects are managed on a layer, which could be drawn on the SmartMaps map. To access the layer, the object is stored in the variable geoJson.

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

To track the proximity search, use rge a EventEmitter for the AddressSearch class, which enables geocoding on the SmartMaps map. The listener performs functions on specific events and can be used to distinguish between successful and unsuccessful proximity searches. In case of the AdressSearch-Class with the EventEmitter you can direcly use the on-method.
When the proximity search is successfully ('success') all results will added with the addData-method of the GeoJson-class and added to the layer. In the case of an unsucessfully request an error will added to the error log. 

      //Successful
      address.on('success', function (req, res) {
        geoJson.addData(res.body);
      });

      //Unsuccessful  
      address.on('error', function (request, response) {
        console.log(response.xhr);
        console.log(response.event);
      });

The final presentation of the results of a perimeter search on the map is achieved by adding the layer of the GeoJson object geoJson to the map object map.

      geoJson.addTo(map);

The vicinity search is now successfully integrated.