Willkommen

SmartMaps JS SDK v5 ist eine leistungsstarke JavaScript-Bibliothek, mit der Sie interaktive Karten in Ihre Webanwendungen integrieren können. SmartMaps bietet eine weltweit nutzbare Kartenbasis, die an Ihre branchenspezifischen Anforderungen angepasst werden kann. Egal, ob Sie Standortdaten, Geschäftsdaten oder soziodemografische Daten im Web, in internen Anwendungen oder in mobilen Apps visualisieren möchten – SmartMaps deckt Sie ab.

Version auswählen

v5 eignet sich besonders für Anwendungsfälle mit Raster-Tiles. Für neue Vektor-Kartenprojekte empfehlen wir SmartMaps GL (bessere Performance und Anpassbarkeit). Suchen Sie die ältere JS-API v3? Ihre Dokumentation ist weiterhin hier verfügbar.

Erste Schritte

Um die SmartMaps JS API v5 zu verwenden, führen Sie folgende Schritte aus:

Registrieren Sie sich kostenlos bei SmartMaps, um Ihren API-Key zu erhalten.
Installieren Sie die SmartMaps-Bibliothek über npm:
```
npm install --save-dev @smartmaps/maps
```
Importieren Sie die Funktion map aus der Bibliothek:
```
import { map } from "@smartmaps/map";
```
Erstellen Sie eine Karteninstanz, indem Sie das HTML-Element oder den CSS-Selektor, in dem die Karte angezeigt werden soll, Ihren API-Key sowie die anfänglichen Mittelpunktkoordinaten und die Zoomstufe übergeben:
```
const map = map(elementOrCssSelector, "[INSERT API-KEY]", {
  center: [49.021273, 8.439316],
  zoom: 14,
});
```
Fügen Sie ein div-Element mit einer bestimmten ID hinzu, in dem die Karte gerendert werden soll:
```
<div id="map"></div>
```
Stellen Sie sicher, dass der Kartencontainer eine definierte Höhe hat, indem Sie diese in Ihrem CSS festlegen:
```
#map { height: 600px; }
```
Importieren Sie die SmartMaps-Stile aus node_modules/@smartmaps/maps/dist/smartmaps-maps.css. Die genaue Vorgehensweise hängt von Ihrem Build-Prozess ab. Wenn Sie kein Build-Tool wie Webpack oder Rollup verwenden, können Sie die Datei aus dem Verzeichnis node_modules in einen in Ihrer App gehosteten Ordner kopieren und über ein HTML-link-Tag laden:
```
<link rel="stylesheet" href="YourAssetsFolder/smartmaps-maps.css">
```

Mit der SmartMaps JS API v5 können Sie interaktive und funktionsreiche Karten erstellen und dabei den Datenschutz und die Privatsphäre der Nutzer in den Vordergrund stellen. Nutzen Sie die Möglichkeiten von SmartMaps, um Ihre Webanwendungen um standortbasierte Funktionen zu erweitern und ein nahtloses Nutzererlebnis zu bieten.