Skip to content

ym.services.Area

Overview

The Area class retrieves the polygons of a region using the GeoJson WebService interface. If the Area class is used without extended map functionalities, the GeoJson can be accessed as follows:

Code example: Initialization area service

ym.ready(function () {
   var area = new ym.services.Area();

   area.on('success', function (request, response) {
      console.log(response.body);
   });

   area.load({lat: 51.163375, lng: 10.447683});
});

Constructor(options)

The constructor takes the same options as the class ym.provider.GeoJSON.

Methods

Area.load(LatLng, levels, providerId)

Loads GeoJson polygons from GeoJson WebService.

  • Parameter: latLng
    The geo-coordinate in which to search.

  • Parameter: levels
    Optional; default: [1, 2]. Several values can be transferred.

Level Meaning
0 Country
1 Federal State
2 Administrative district
3 County
4 POSTAL CODE
5 Municipality
6 City district
  • Parameter: providerId
    Optional; Standard: OSM

Example call

area.load({lat: 51.163375, lng: 10.447683});

Area.addTo(layer)

The addTo method is used to register an area for a map layer and automatically update it as soon as a new GeoJson is available. This means that you don't have to create another GeoJson object and you don't have to care about the Success-Listener. From the moment you register on the layers, the GeoJSON display is always updated as soon as a new request to the GeoJSON interface occurs. The map layer must be an instance of ym.provider.Map.

  • Parameter: layer
    The map layer derived from ym.provider.Map on which the area is to be drawn.

Example calls

The example is complete; you can save it locally in a file and view it in your browser. You only have to replace the value for the apiKey before.

In the first example, the administrative levels 1 to 3 are requested, meaning state, county, and district.

Code example: Example call (Lvl. 1 - 3)

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8" />
</head>
<body>
    <!-- Position where a map should be displayed. The ID is referred to at the bottom of the script. -->
    <div id="map" style="height: 400px; width: 700px;"></div>

    <!-- Loading of the SmartMaps API. -->
    <script src="https://www.yellowmap.de/api_rst/api/loader/?apiKey={API_KEY}&libraries=free-3"></script>

    <!-- Access to the SmartMaps API. -->
    <script>
        ym.ready(function (modules) {
           var provider = modules.provider;

           var map = new provider.Map("map", {
              center: new provider.LatLng(51.163375, 10.447683), // Center of Germany
              zoom: 6
           });

           var area = new ym.services.Area({
              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>");
              }
           });
           area.addTo(map);

           area.load(map.getCenter(), [1,2,3]);

           window.map = map;
        });
    </script>
</body>
</html>

Alternatively, you can instantiate it yourself and use the Success-Listener:

Code example: Example call (Success-Listener)

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8" />
</head>
<body>
    <!-- Position where a map should be displayed. The ID is referred to at the bottom of the script. -->
    <div id="map" style="height: 400px; width: 700px;"></div>

    <!-- Loading of the SmartMaps API. -->
    <script src="https://www.yellowmap.de/api_rst/api/loader/?apiKey={API_KEY}&libraries=free-3"></script>

    <!-- Access to the SmartMaps API. -->
    <script>
        ym.ready(function (modules) {
           var provider = modules.provider;

           var map = new provider.Map("map", {
              center: new provider.LatLng(51.163375, 10.447683), // Center of Germany
              zoom: 6
           });

           var geoJson = new provider.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>");
              }
           });

           var area = new ym.services.Area();
           area.on('success', function (request, response) {
              geoJson.addData(response.body);
           });

           area.load(map.getCenter(), [1,2,3]);

           geoJson.addTo(map);

           window.map = map;
        });
    </script>
</body>
</html>

Area.removeFrom(layer)

Removes the GeoJson from the layer.

Events

The basis of the area class is the request class. Accordingly, there are also the event listeners success and error, which announce whether a request was successful or failed.