Area Service
Übergeben Sie eine beliebige Koordinate an den SmartMaps Area Service; wir ermitteln für Sie die entsprechenden Verwaltungsgebiete oder Postleitzahlgebiete zur Anzeige auf der Karte. Der Dienst ist derzeit in Deutschland, Österreich und der Schweiz verfügbar.
Anleitung
Für die Implementierung eines Area Service, der gefundene Ergebnisse gemäß den Wünschen des Nutzers auf der SmartMaps-Karte geocodiert, wird zunächst ein div-Element mit der ID map-wrapper zum body-Tag des HTML-Skripts hinzugefügt.
Der map-wrapper enthält ein div-Element mit der Klasse geocoder-form. Dieses enthält ein leeres small-Element mit der ID message, das später zur Anzeige von Benachrichtigungen bezüglich der Auswahl und des Ladens von Verwaltungsgebieten verwendet wird. Der Nutzer wird über den Status des Area Service informiert.
<div class="geocoder-form" style="z-index:1000">
<p>Klick in die Karte lädt den zugehörigen Bereich</p>
<small id="message"></small>
</div>
Um die Anzeige der SmartMaps-Karte zu ermöglichen, enthält der map-wrapper ein leeres div-Element mit der ID map. In diesem div-Element wird die Karte zur Laufzeit geladen. Für das div-Element können Sie mit dem Attribut style eine feste Höhe und Breite für die Karte festlegen.
Um die Funktionalität des Area Service und die entsprechende Zeichnung der Verwaltungsgebiete zu implementieren, ist die Einbindung von JavaScript-Code erforderlich. Wie in diesem Beispiel kann dieser Code im HTML-Skript oder in einer separaten .js-Datei über ein Script-Tag eingebunden werden. Alle Variablen und Funktionen werden in der Methode ym.ready implementiert, da diese Methode Abhängigkeiten auflöst, um die eigentliche Kartenanwendung zu starten.
Der Prozess (Auswahl, Laden, Anzeige) eines Area Service kann beim Laden einige Sekunden dauern. Zu diesem Zweck wird der Nutzer durch Benachrichtigungen auf der Oberfläche informiert. Um diese Benachrichtigungen während des Ablaufs des Oberflächendienstes dynamisch zu ändern und anzuzeigen, wird das small-Element mit der ID message in einer Variable message gespeichert.
Um die SmartMaps-Karte zur Auswahl der Verwaltungsgebiete anzuzeigen, wird ein Objekt der Klasse ym.map erstellt. Parameter sind die ID des div-Elements, in dem die Karte gezeichnet werden soll, sowie die gewünschten Kartenoptionen (Startposition, Start-Zoomstufe usw.). Um die Karte im Code weiter zu verwalten, wird das Objekt in einer Variable map gespeichert.
Die Verwaltungsgebiete werden visuell durch einen Area-Layer auf der Karte definiert. Dies ist ein Objekt der Klasse geoJson, dem verschiedene Optionen als Parameter für die Darstellung der Flächen hinzugefügt werden können. Im folgenden Beispiel wird im Options-Parameter ein Pop-up für die Verwaltungsgebiete definiert. Beim Klick auf dieses Pop-up erscheint es und zeigt Informationen zum Gebiet an. Das Objekt wird in der Variable areaLayer gespeichert und der Karte hinzugefügt.
// Flächen-Layer definieren.
var areaLayer = ym.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>");
}
});
// Layer einzeichnen.
map.addLayer(areaLayer);
Um die Polygone eines Verwaltungsgebiets zu erhalten, wird ein Objekt der Klasse Area benötigt. Diese GeoJSON-Polygone erhält die Klasse über die GeoJSON-WebService-Schnittstelle. Das Area-Objekt ermöglicht die Erkennung von Verwaltungsgebieten und übergibt deren GeoJSON-Informationen zur Anzeige auf der Kartenoberfläche.
Um das Laden der Verwaltungsgebiete zu verfolgen, wird für die Klasse area ein EventEmitter verwendet. Mit seiner on-Methode ermöglicht er das Hinzufügen eines Listeners. Der Listener führt Funktionen bei bestimmten Ereignissen aus und kann verwendet werden, um zwischen einer erfolgreichen und einer nicht erfolgreichen Übertragung von Gebietsdaten zu unterscheiden. In diesem Fall ist die Klasse area bereits mit einem EventEmitter ausgestattet und kann direkt auf die on-Methode zugreifen.
Im Falle einer erfolgreichen Übertragung von Gebietsdaten ('success') wird das small-Element message mit einer Bestätigungsmeldung aktualisiert. Zur Anzeige auf der Karte wird die Methode addData von areaLayer mit den übergebenen Gebietsdaten als Parameter aufgerufen.
area.on('success', function(req, res) {
message.innerHTML = "Daten wurden übermittelt";
areaLayer.addData(res.body);
map.fitBounds(areaLayer.getBounds());
});
Die Klasse map verfügt ebenfalls über die on-Methode der EventEmitter-Klasse, um beim Klicken auf ein Verwaltungsgebiet ('click') die entsprechenden Gebietsdaten mit der Methode load der Klasse area zu laden.
map.on('click', function(e) {
message.innerHTML = "Bereich wird geladen...";
if (areaLayer) {
areaLayer.clearLayers();
}
area.load(e.latlng, [1]);
});
Die mögliche Zeichnung von Verwaltungsgebieten auf der SmartMaps-Karte wurde nun erfolgreich integriert.
HTML-Dokument
Codebeispiel: Area Service
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Area service</title>
</head>
<body>
<div id="map-wrapper">
<!-- Vordefiniertes div-Element, in das die Karte geladen wird. -->
<div class="geocoder-form" style="z-index:1000">
<p>Click on the map to load the associated area</p>
<small id="message"></small>
</div>
<div id="map" style="height: 400px; width: 500px;"></div>
</div>
<!-- SmartMaps-API -->
<script
src="https://www.yellowmap.de/api_rst/api/loader?libraries=free-3&apiKey={API_key}"></script>
<script>
ym.ready(function (modules) {
var message = document.getElementById("message");
// Karte definieren.
var map = ym.map("map", {
center: ym.latLng(48.991897, 8.435568),
zoom: 6
});
// Flächen-Layer definieren.
var areaLayer = ym.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>");
}
});
// Layer einzeichnen.
map.addLayer(areaLayer);
var area = new ym.services.Area();
area.on('success', function (req, res) {
message.innerHTML = "Daten wurden übermittelt";
areaLayer.addData(res.body);
map.fitBounds(areaLayer.getBounds());
});
map.on('click', function (e) {
message.innerHTML = "Bereich wird geladen...";
if (areaLayer) {
areaLayer.clearLayers();
}
area.load(e.latlng, [1]);
});
});
</script>
</body>
</html>