Geocoding
You can use the SmartMaps API to geocode any address or to assign an address to a coordinate. Please use the class GeoCoder. The options correspond to those of the constructor. By default, the options from the constructor and parent class are used. If the options are set here, they overwrite the previously set options for this call.
Instructions
For the implementation of a form that allows the geocoding of addresses on the SmartMaps map, a div element with the ID map-wrapper is first added to the body tag of the HTML script.
The map-wrapper contains another div element with the class geocoder-form. In this element, the user interface for the input of address information is implemented. The simple geocoding of addresses is a form (ID=location-form), which queries the postal code, the city, and the street of the address to be geocoded. The input field for entering the country of the address is set to hidden in this case and defaults to Germany.
<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>
To display the SmartMaps map, the map-wrapper contains an empty div element with the ID map. In this div element, the map is loaded at runtime. For the div element, you can set a fixed height and width for the map with the style attribute.
To realize the functionality of geocoding, the integration of JavaScript code is necessary. As in this example, this code can be included in the HTML script using script tags or in a separate .js file. All variables and functions are implemented in the ym.ready method, because this method resolves dependencies to start the actual map application.
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 document
Code example: 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={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>