Search & Autocomplete
Die Search & Autocomplete-API liefert schnelle, AJAX-gestützte Vorschläge in Echtzeit – perfekt für dynamische Suchfelder auf Webseiten. Bitte beachten Sie, dass der Referer der Domain mit dem API-Schlüssel übereinstimmen muss, wie es in den Backend-Einstellungen festgelegt wurde.
Endpunkt
https://api.gdpr-map.eu/api?q=[SUCHE]&[PARAMETER]&key=[API_KEY]
Beispiel
https://api.gdpr-map.eu/api?q=Residenzstraße&key=[API_KEY]
Parameter
Dieser Abschnitt listet zusätzliche Parameter auf, um die Ausgabe weiter zu beeinflussen.
Suche mit Standortbezug
| Parameter | Wert | Standard |
|---|---|---|
| lon | Längengrad (Float) | – |
| lat | Breitengrad (Float) | – |
| zoom | 1 – 18 | 16 |
| location_bias_scale | 0.0 – 1.0 | 0.2 |
Es gibt zwei optionale Parameter, um den Standortbezug zu beeinflussen. zoom beschreibt den Radius um das Zentrum, auf den fokussiert werden soll. Dies ist eine Zahl, die ungefähr dem Zoomparameter einer entsprechenden Kartendarstellung entsprechen sollte.
Der Parameter location_bias_scale beschreibt, wie stark die Relevanz eines Ergebnisses berücksichtigt werden sollte. Sinnvolle Werte reichen von 0.0 (Relevanz wird fast vollständig ignoriert) bis 1.0 (Relevanz hat ungefähr denselben Wert).
Beispiel
https://api.gdpr-map.eu/api?q=berlin&lon=10&lat=52&zoom=13&location_bias_scale=0.2&key=[API_KEY]
Sprache und Anzahl der Ergebnisse
| Parameter | Wert |
|---|---|
| lang | ISO 639-1 Code |
| limit | Ganzzahl |
Der Parameter lang definiert die Sprache der Suchergebnisse, wobei die Sprachcodes gemäß ISO 639-1, wie beispielsweise „de“ für Deutsch oder „en“ für Englisch, verwendet werden sollten.
Der Parameter limit ermöglicht es, die Anzahl der angezeigten Suchergebnisse zu begrenzen.
Beispiel
https://api.gdpr-map.eu/api?q=Residenzstraße&limit=2&lang=de&key=[API_KEY]
Filter
Die Filterfunktion ermöglicht eine präzisere Einschränkung der Suchergebnisse durch die Anwendung von Filtern wie einer Bounding Box, OSM Tags und Layern. Diese Werkzeuge bieten eine verfeinerte Steuerung über die dargestellten Daten, indem sie die Ergebnisse auf spezifische geografische Bereiche und bestimmte Attribute begrenzen.
Bounding Box
| Parameter | Wert |
|---|---|
| bbox | [minLon,minLat,maxLon,maxLat] |
Die Filterung nach einer Bounding Box ermöglicht eine gezielte Suche innerhalb eines definierten geografischen Bereichs. Die Koordinaten dieser Box werden im Format [minLon, minLat, maxLon, maxLat] angegeben, wobei ‚minLon‘ und ‚minLat‘ die minimalen Längen- und Breitengrade definieren und ‚maxLon‘ und ‚maxLat‘ die maximalen Längen- und Breitengrade festlegen. Diese Werte bestimmen somit die Eckpunkte des rechteckigen Suchbereichs auf der Karte.
Beispiel
https://api.gdpr-map.eu/api?q=Berlin&bbox=9.5,51.5,11.5,53.5&key=[API_KEY]
OSM Tags
| Parameter | Wert |
|---|---|
| osm_tag | [key:value] |
Dieser Filter funktioniert nur für Main-OSM-Tags und nicht alle OSM-Tag/Wert-Kombinationen können durchsucht werden. Alle Tag/Wert-Kombinationen mit einer Eigenschaft ‚main‘ sind in der Datenbank enthalten. Wenn ein oder mehrere Abfrageparameter vorhanden sind, werden die Ergebnisse nach diesen Tags gefiltern. Verwenden Sie folgende Syntax:
| Beschreibung | Parameter |
|---|---|
| Tag einschließen | osm_tag=key:value |
| Tag ausschließen | osm_tag=!key:value |
| Key einschließen | osm_tag=key |
| Value einschließen | osm_tag=:value |
| Key ausschließen | osm_tag=!key |
| Value ausschließen | osm_tag=:!value |
Eine Auflistung aller OSM-Tags finden Sie hier.
Beispiele
Alle Orte mit dem Namen München und dem Tag tourism=museum suchen:
https://api.gdpr-map.eu/api?q=München&osm_tag=tourism:museum&key=[API_KEY]
Nur nach dem Key tourism suchen:
https://api.gdpr-map.eu/api?q=München&osm_tag=tourism&key=[API_KEY]
Layer
Sie haben ebenfalls die Möglichkeit, nach Layern zu filtern. Folgende Layer stehen zur Verfügung:
| Wert | Beschreibung |
|---|---|
| house | Gebäude |
| street | Straße |
| locality | Ortschaft |
| district | Bezirk |
| city | Stadt |
| county | Landkreis |
| state | Bundesland |
| country | Land |
Beispiel
https://api.gdpr-map.eu/api?q=München&layer=city&layer=locality&key=[API_KEY]
API Call Beispiele
HTML
<div class="autocomplete-container">
<input type="text" id="search-input" placeholder="Straße, PLZ, Ort suchen..." autocomplete="off">
<ul id="suggestions" class="suggestions-list"></ul>
</div>
<style>
.autocomplete-container { position: relative; }
.suggestions-list {
position: absolute;
background: white;
border: 1px solid #ccc;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
max-height: 240px;
overflow-y: auto;
z-index: 1000;
}
.suggestions-list li {
padding: 8px 12px;
cursor: pointer;
}
.suggestions-list li:hover {
background: #f0f0f0;
}
</style>
JavaScript
// debounce-Funktion (verhindert zu viele Anfragen beim Tippen)
function debounce(fn, delay) {
let timeout;
return (...args) => {
clearTimeout(timeout);
timeout = setTimeout(() => fn(...args), delay);
};
}
const searchInput = document.getElementById('search-input');
const suggestionsList = document.getElementById('suggestions');
const fetchSuggestions = debounce(async (query) => {
if (query.length < 2) {
suggestionsList.innerHTML = '';
return;
}
const url = `https://api.gdpr-map.eu/api?q=${encodeURIComponent(query)}&limit=6&lang=de&key=YOUR_API_KEY`;
try {
const response = await fetch(url);
if (!response.ok) throw new Error('Netzwerkfehler');
const data = await response.json();
suggestionsList.innerHTML = '';
data.forEach(item => {
const li = document.createElement('li');
li.textContent = item.display_name;
li.addEventListener('click', () => {
searchInput.value = item.display_name;
suggestionsList.innerHTML = '';
// Hier z. B. Karte auf item.lat / item.lon zentrieren
console.log('Ausgewählt:', item.lat, item.lon);
});
suggestionsList.appendChild(li);
});
} catch (err) {
console.error('Autocomplete Fehler:', err);
}
}, 250); // 250 ms Wartezeit
searchInput.addEventListener('input', (e) => {
fetchSuggestions(e.target.value.trim());
});
jQuery
$(document).ready(function() {
const $input = $('#search-input');
const $suggestions = $('#suggestions');
$input.on('input', debounce(function() {
const query = $(this).val().trim();
if (query.length < 2) {
$suggestions.empty().hide();
return;
}
$.ajax({
url: 'https://api.gdpr-map.eu/api',
data: {
q: query,
limit: 7,
lang: 'de',
key: '[API_KEY]'
},
dataType: 'json',
success: function(data) {
$suggestions.empty();
$.each(data, function(i, item) {
$('<li>')
.text(item.display_name)
.on('click', function() {
$input.val(item.display_name);
$suggestions.empty().hide();
// Response
console.log(item.lat, item.lon);
})
.appendTo($suggestions);
});
$suggestions.show();
},
error: function(xhr, status, error) {
console.error('Autocomplete Fehler:', error);
}
});
}, 300));
});
Antwort
{
"features": [
{
"geometry": {
"coordinates": [
11.5753822,
48.1371079
],
"type": "Point"
},
"type": "Feature",
"properties": {
"osm_type": "R",
"osm_id": 62428,
"extent": [
11.360777,
48.2481162,
11.7229099,
48.0616244
],
"country": "Germany",
"osm_key": "place",
"countrycode": "DE",
"osm_value": "city",
"name": "Munich",
"state": "Bavaria",
"type": "city"
}
},
{
"geometry": {
"coordinates": [
7.757172,
48.5816352
],
"type": "Point"
},
"type": "Feature",
"properties": {
"osm_id": 13864920,
"extent": [
7.7571648,
48.5820094,
7.75722,
48.5812344
],
"country": "France",
"city": "Strasbourg",
"countrycode": "FR",
"postcode": "67000",
"locality": "Krutenau",
"type": "street",
"osm_type": "W",
"osm_key": "highway",
"district": "Bourse-Esplanade-Krutenau",
"osm_value": "residential",
"name": "Rue Munch",
"state": "Grand Est"
}
},
{
"geometry": {
"coordinates": [
7.757225,
48.5822932
],
"type": "Point"
},
"type": "Feature",
"properties": {
"osm_id": 709676959,
"extent": [
7.7571924,
48.5823487,
7.7572443,
48.5820094
],
"country": "France",
"city": "Strasbourg",
"countrycode": "FR",
"postcode": "67000",
"locality": "Krutenau",
"type": "street",
"osm_type": "W",
"osm_key": "highway",
"district": "Bourse-Esplanade-Krutenau",
"osm_value": "living_street",
"name": "Rue Munch",
"state": "Grand Est"
}
}
],
"type": "FeatureCollection"
}