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" />

Auf ein Objekt zentrieren

centertoobject ist ein optionales Attribut. Es dient der genaueren Angabe für das Suchergebnis.

Mögliche Werte : "Adresse" oder "Strasse, Platz, Park" oder "AddressID" oder "BBOX" (siehe nächstes Beispiel)

<map-bs centerto="Steinengraben" centertoobject="Strasse, Platz, Park" />

Auf eine Bounding Box zentrieren

centertoobject ist für die Zentrieung der Bounding Box ein Pflichtattribut.

<map-bs centerto="2610980.179, 1266842.005, 2611145.501, 1267262.677"  centertoobject="BBOX"  />

or with EPSG:3857:

<map-bs centerto="844302.941,6032677.920,844546.280,6033302.425" centertoobject="BBOX" projection="EPSG:3857" />

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" />

WMS-Layers hinzufügen

Mögliche Werte: Kitas, Allmendbewilligungen, BaselInfo, BaselInfoPOIs

Optionale Parameter: wmstimefrom und wmstimeto können genutzt werden, um WMS Ebenen zeitlich zu filtern, falls die Ebenen dies erlauben. 

<map-bs wmslayers="Kitas, Allmendbewilligungen" legend="true" wmstimefrom="2025-01-01" wmstimeto="2025-06-30" />

Inaktive WMS-Layers hinzufügen

<map-bs wmslayers="Kitas, Allmendbewilligungen" inactivewmslayers="Kitas" legend="true" />

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

modifyfeatures ist ein optionales Attribut, mit welchem gesteuert werden kann, ob die gezeichneten Features im Nachhinein bearbeitet werden können. Standardmässig können sie bearbeitet werden. 

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

Mehrere Zeichnungen erlauben

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

Zeichenwerkzeuge aktivieren mit eigener Farbe

<map-bs drawpoint="true"
        drawpolygon="true"
        drawline="true"
        drawfillcolor="rgba(44,127,184,0.2)"
        drawstrokecolor="rgba(44,127,184,1)"
        />

Eine Geojson Geometrie als Input für die Zeichnung

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

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" drawpolygon="true" drawline="true" mode="multi"/>

          

        

      

      

        
Ein GeoJSON als Ebene hinzufügen


        

          

            
          

          

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

            
            
          

        

      

      

        
OpenLayers verwenden, um zusätzliche Ebenen hinzuzufügen


        

          

            
          

          

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

          

          
          
        

      


      

        
Suchfenster einblenden


        

          

            
          

          

            
<map-bs search="true"/>

          

        

      


      

        
Aktuelles Kartenbild als Base64 Bild exportieren

        
Hier im Beispiel wird das Kartenbild nach einer Zeichnungsaktion ausgelöst.


        

          

            
            
          

          

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