Geocoding
Sie können die SmartMaps API verwenden, um jede Adresse zu geocodieren oder um einer Koordinate eine Adresse zuzuordnen. Verwenden Sie dazu die Klasse GeoCoder. Die Optionen entsprechen denen des Konstruktors. Standardmäßig werden die Optionen aus dem Konstruktor und der übergeordneten Klasse verwendet. Werden die Optionen hier gesetzt, überschreiben sie die zuvor gesetzten Optionen für diesen Aufruf.
Anleitung
Für die Implementierung eines Formulars, das das Geocoding von Adressen auf der SmartMaps-Karte ermöglicht, wird zunächst ein div-Element mit der ID map-wrapper in das Body-Tag des HTML-Scripts eingefügt.
Der map-wrapper enthält ein weiteres div-Element mit der Klasse geocoder-form. In diesem Element wird die Benutzeroberfläche für die Eingabe der Adressinformationen implementiert. Die einfache Geocodierung von Adressen erfolgt über ein Formular (ID=location-form), das die Postleitzahl, die Stadt und die Straße der zu geocodierenden Adresse abfragt. Das Eingabefeld für das Land der Adresse ist in diesem Fall auf „hidden" gesetzt und standardmäßig auf Deutschland voreingestellt.
<form id="location-form">
<fieldset>
<legend>Geocode address</legend>
<label>
Postleitzahl:
<input type="text" name="zip" value="76133" placeholder="zip code">
</label>
<label>
Stadt:
<input type="text" name="city" value="Karlsruhe" placeholder="city">
</label>
<label>
Straße:
<input type="text" name="street" value="Wattkopfstr" placeholder="street">
</label>
<input type="hidden" name="country" value="DE">
<button type="submit">send</button>
</fieldset>
</form>
Um die SmartMaps-Karte anzuzeigen, 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 über das style-Attribut eine feste Höhe und Breite für die Karte festlegen.
Um die Funktionalität des Geocodings zu realisieren, ist die Einbindung von JavaScript-Code erforderlich. Wie in diesem Beispiel kann dieser Code über Script-Tags in das HTML-Script eingebunden werden oder in einer separaten .js-Datei liegen. Alle Variablen und Funktionen werden in der Methode ym.ready implementiert, da diese Methode Abhängigkeiten auflöst, um die eigentliche Kartenanwendung zu starten.
ym.ready(function(modules) {
// Accessing the address form.
var geocodingForm = document.getElementById('location-form');
// Define Layer Group.
var layerGroup = ym.layerGroup();
// Draw in map.
var map = ym.map("map", {
center: ym.latLng(49.021273, 8.439316),
zoom: 14
});
// Drawing a Layer Group.
layerGroup.addTo(map);
geocodingForm.onsubmit = function(e) {
e.preventDefault();
var inputs = document.querySelectorAll('#location-form input');
var zip = inputs.value;
var city = inputs[1].value;
var street = inputs[2].value;
var country = inputs.value;
// Geocoding address data.
modules.geocode({
"country": country,
"district": "",
"zip": zip,
"city": city,
"cityAddOn": "",
"cityPart": "",
"street": street,
"houseNo": "",
"singleSlot": ""
});
};
ym.services.geoCoder.on('success', function(req, res) {
// Delete old data from the card.
layerGroup.clearLayers();
var geoJson = ym.geoJson(res.body, {
// Draw markers for each entry.
onEachFeature: function(feature, layer) {
layer.setIcon(ym.provider.Icon.Default());
var popUpContent = "";
if (feature.properties.street) {
popUpContent += feature.properties.street + ", ";
}
if (feature.properties.zip) {
popUpContent += feature.properties.zip + " ";
}
if (feature.properties.city) {
popUpContent += feature.properties.city + " ";
}
if (feature.properties.cityPart) {
popUpContent += feature.properties.cityPart;
}
// Show address data in popup.
layer.bindPopup(popUpContent);
}
});
// Optimize map section for result set.
map.fitBounds(geoJson.getBounds());
layerGroup.addLayer(geoJson);
});
ym.services.geoCoder.on('error', function(req, res, errorType) {
console.log(arguments);
});
});
HTML-Dokument
Codebeispiel: Geocoding
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Geocoding</title>
</head>
<body>
<div id="map-wrapper">
<div class="geocoder-form" style="z-index:1000">
<form id="location-form">
<fieldset>
<legend>Geocode address</legend>
<label>
Postleitzahl:
<input type="text" name="zip" value="76133" placeholder="zip code">
</label>
<label>
Stadt:
<input type="text" name="city" value="Karlsruhe" placeholder="city">
</label>
<label>
Straße:
<input type="text" name="street" value="Wattkopfstr" placeholder="street">
</label>
<input type="hidden" name="country" value="DE">
<button type="submit">send</button>
</fieldset>
</form>
</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=[INSERT API-KEY]"></script>
<script>
ym.ready(function (modules) {
// Accessing the address form.
var geocodingForm = document.getElementById('location-form');
// Define Layer Group.
var layerGroup = ym.layerGroup();
// Draw in map.
var map = ym.map("map", {
center: ym.latLng(49.021273, 8.439316),
zoom: 14
});
// Drawing a Layer Group.
layerGroup.addTo(map);
geocodingForm.onsubmit = function (e) {
e.preventDefault();
var inputs = document.querySelectorAll('#location-form input');
var zip = inputs.value;
var city = inputs[1].value;
var street = inputs[2].value;
var country = inputs.value;
// Geocoding address data.
modules.geocode({
"country": country,
"district": "",
"zip": zip,
"city": city,
"cityAddOn": "",
"cityPart": "",
"street": street,
"houseNo": "",
"singleSlot": ""
});
};
ym.services.geoCoder.on('success', function (req, res) {
// Delete old data from the card.
layerGroup.clearLayers();
var geoJson = ym.geoJson(res.body, {
// Draw markers for each entry.
onEachFeature: function (feature, layer) {
layer.setIcon(ym.provider.Icon.Default());
var popUpContent = "";
if (feature.properties.street) {
popUpContent += feature.properties.street + ", ";
}
if (feature.properties.zip) {
popUpContent += feature.properties.zip + " ";
}
if (feature.properties.city) {
popUpContent += feature.properties.city + " ";
}
if (feature.properties.cityPart) {
popUpContent += feature.properties.cityPart;
}
// Show address data in popup.
layer.bindPopup(popUpContent);
}
});
// Optimize map section for result set.
map.fitBounds(geoJson.getBounds());
layerGroup.addLayer(geoJson);
});
ym.services.geoCoder.on('error', function (req, res, errorType) {
console.log(arguments);
});
});
</script>
</body>
</html>