1. Home
  2. Dokumente
  3. Karten
  4. Flächenservice

Flächenservice

Beschreibung

Übergeben Sie dem SmartMaps-Flächenservice eine beliebige Koordinate; wir ermitteln für Sie die zugehörigen administrativen Flächen oder Postleitzahlenbereiche, um sie in der Karte darzustellen.

Der Service ist aktuell in Deutschland, Österreich und der Schweiz nutzbar.

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:

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.

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

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

Weitere Informationen

Beispielszenario

Wie können wir helfen?