MapBS-API

Diese Seite beschreibt, wie die MapBS-API genutzt werden kann. Die API stellt eine moderne Web-Component-API zur Verfügung, die eine einfache Integration in Webseiten ermöglicht. Technisch gesehen handelt es sich bei der API um eine schlanke OpenLayers-Anwendung, die Kartendienste des Kantons Basel-Stadt bereits integriert hat. Im Folgenden werden Beispiele aufgeführt.

Die MapBS-API ist öffentlich zugänglich. Wie alle anderen APIs des Kantons Basel-Stadt benötigen Sie jedoch für den Zugang einen kostenlosen API-Key.
Einen API-Key können Sie auf folgender Seite beantragen: https://api.geo.bs.ch

Grundlagen

Um die API nutzen zu können, fügen Sie einfach den folgenden Code hinzu: 

<head>
  <script type="module" crossorigin src="https://api.geo.bs.ch/mapbs-api/v1/mapbs-api.js?apikey=public_test_key"></script>
</head>

Der Key public_test_key kann als Beispiel verwendet werden, jedoch ist die Anzahl der Abfragen begrenzt.

Ein einfachen Kartenausschnitt hinzufügen

<map-bs />

Koordinaten angeben, um die Karte zu zentrieren

<map-bs center="2614484, 1267592" />

Den Zoomlevel festlegen

<map-bs zoom="8" />

Die Kartenprojektion festlegen

<map-bs projection="EPSG:3857" />

Den Hintergrundlayer auswählen

Mögliche Werte: grau (Standard), farbig, luftbild

<map-bs background="luftbild" />

Das Mouse-Scroll deaktivieren

<map-bs embed="true"/>

Marker in der Mitte der Karte hinzufügen

<map-bs marker="true" />

Einen benutzerdefinierten Marker verwenden

<map-bs marker="true" 
        markerurl="https://map.geo.bs.ch/static/api/apihelp/img/parking.png" />

Eine Liste von Markern aus einer Datei laden

<map-bs marker="https://map.geo.bs.ch/static/api/apihelp/data.txt" />

Zeichenwerkzeuge aktivieren

<map-bs drawpoint="true"
        drawpolygon="true"
        drawline="true"
        drawbox="true"
        delete="true" />

Mehrere Zeichnungen erlauben

<map-bs drawpoint="true"
        drawpolygon="true"
        mode="multi" />

Die gezeichneten Geometrien abrufen

<map-bs id="mapOnChange" drawpolygon="true" drawbox="true" delete="true" mode="multi" />


          


          
          
        

      


      

        
Eine Legende anzeigen


        

          

            
          

          

            
<map-bs legend="true" drawpoint="true" mode="multi"/>

          

        

      


      

        
OpenLayers verwenden, um zusätzliche Ebenen hinzuzufügen


        

          

            
          

          

            
<map-bs id="mapAddLayers" legend="true" />