ym.services.Area

Initialization

The Area class gets 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) from v3

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) from v3

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, that means 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), // Mittelpunkt von Deutschland
			  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 by 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), // Mittelpunkt von Deutschland
			  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) from v3

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.