ym.services.Area

Initialisierung

Die Klasse Area holt sich anhand der GeoJson-WebService-Schnittstelle die Polygone einer Region.

Wird die Area-Klasse ohne erweiterte Kartenfunktionalitäten eingesetzt, kann wie folgt auf das GeoJson zugegriffen werden:

Codebeispiel: Initialisierung Flächenservice

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)

Der Konstruktor nimmt dieselben Optionen entgegen, die auch die Klasse ym.provider.GeoJSON entgegennimmt.

Methoden

Area.load(LatLng, levels, providerId) ab v3

Lädt GeoJson-Polygone vom GeoJson-WebService.

Parameter: latLng

Die Geo-Koordinate, in der gesucht werden soll.

Parameter: levels

Optional; Standard: [1, 2]. Es können mehrere Werte übegeben werden.

Level Bedeutung
0 Land
1 Bundesland
2 Regierungsbezirk
3 Landkreis
4 PLZ
5 Gemeinde
6 Stadtteil

Parameter: providerId

Optional; Standard: OSM

Beispielaufruf

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

Area.addTo(layer) ab v3

Die addTo-Methode dient dazu, einen Bereich für einen Kartenlayer zu registrieren und automatisch zu aktualisieren, sobald ein neues GeoJson verfügbar ist. Das bedeutet, dass man kein weiteres GeoJson-Objekt erstellen und man sich um den Success-Listener nicht kümmern muss. Ab dem Zeitpunkt der Registrierung auf den Layer wird die Darstellung des GeoJSON immer aktualisiert, sobald ein neuer Request an die GeoJSON-Schnittstelle stattfindet. Der Kartenlayer muss hierbei eine Instanz von ym.provider.Map sein.

Parameter: layer

Der von ym.provider.Map abgeleitete Kartenlayer, auf dem der Bereich gezeichnet werden soll.

Beispielaufrufe

Das Beispiel ist vollständig; Sie können es lokal in einer Datei abspeichern und im Browser aufrufen. Sie müssen lediglich den Wert für den apiKey vorher ersetzen.

Im ersten Beispiel werden die administrativen Level 1 bis 3 angefordert, das heißt, Bundesland, Regierungsbezirk und Landkreis.

Codebeispiel: Beispielaufruf (Lvl. 1 - 3)

<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8" />
</head>
<body>
	<!-- Stelle, an der eine Karte angezeigt werden soll. Auf die ID wird unten im Skript verwiesen. -->
	<div id="map" style="height: 400px; width: 700px;"></div>

	<!-- Laden der SmartMaps-API. -->
	<script src="https://www.yellowmap.de/api_rst/api/loader/?apiKey={API_KEY}&libraries=free-3"></script>
	
	<!-- Zugriff auf die 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>

Alternativ kann man eigenhändig instanziieren und den Success-Listener verwenden:

Codebeispiel: Beispielaufruf (Success-Listener)

<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8" />
</head>
<body>
	<!-- Stelle, an der eine Karte angezeigt werden soll. Auf die ID wird unten im Skript verwiesen. -->
	<div id="map" style="height: 400px; width: 700px;"></div>

	<!-- Laden der SmartMaps-API. -->
	<script src="https://api.yellowmaps.eu/api_rst/api/loader/?apiKey={API_KEY}&libraries=free-3"></script>
	
	<!-- Zugriff auf die 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) ab v3

Entfernt das GeoJson vom Layer.

Ereignisse

Die Basis der Area-Klasse ist die Request-Klasse. Entsprechend gibt es auch die Event-Listener success und error, die ankündigen, ob eine Anfrage erfolgreich war oder fehlgeschlagen ist.