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. Der Key public_test_key kann als Beispiel verwendet werden, jedoch ist die Anzahl der Abfragen begrenzt.

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>
<body>
  <div style="width:100%;height:300px;">
    <map-bs />
  </div>
</body>

Auf dieser Seite

API Dokumentation

Attribute

Die MapBS Web-Component verfügt über verschiedene Attribute, die zur Konfiguration der Karte verwendet werden können. Eine Übersicht über die verfügbaren Attribute finden Sie in der folgenden Tabelle. Jedes Attribut kann nach der ersten Anzeige wie folgt geändert werden: 

// Beispiel: Zoomlevel anpassen
document.querySelector('map-bs').setAttribute("zoom", "15");

Events

Die MapBS Web-Component verfügt über verschiedene Events, die zur Interaktion mit der Karte verwendet werden können. Eine Übersicht über die verfügbaren Events finden Sie in der folgenden Tabelle. Jedes Property kann nach der ersten Anzeige wie folgt geändert werden: 

 
// Beispiel: Auf das "change" Event hören

// Warten, bis die Javascript API bereit ist.
document.addEventListener("apiready", () => {
  document.querySelector('map-bs').addEventListener("change", (e) => {
    const data = e.detail;
    console.log(e.detail);
  });
});

Beispiele

Einfacher Kartenausschnitt hinzufügen

<map-bs />

Hintergrundlayer auswählen

<map-bs background="luftbild" />

Koordinaten angeben, um die Karte zu zentrieren

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

Auf ein Objekt zentrieren

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

Zoomlevel festlegen

<map-bs zoom="8" />

Kartenprojektion festlegen

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

Legende anzeigen

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

Suchfenster einblenden

<map-bs search="true"/>

Maus-Scroll deaktivieren

<map-bs embed="true"/>

Marker in der Mitte der Karte hinzufügen

<map-bs marker="true" />

Benutzerdefinierten Marker verwenden

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

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"
        translate="true"
        rotate="true"
        modifyfeatures="true"
        delete="true" />

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

Mehrere Zeichnungen erlauben

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

Geojson Geometrie als Input für die Zeichnung

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

Gezeichnete Geometrien abrufen

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


          


          
          
        

      
     

      

        
GeoJSON als Ebene hinzufügen


        

          

            
          

          

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

            
            
          

        

      


      

        
Aktuelles Kartenbild als Base64 Bild exportieren


        

          

            
            
          

          

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

            

            


            
            
          

        

      


      

        
WMS-Ebenen hinzufügen

        

          

            
          

          

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

          

        

      


      

        
Inaktive WMS-Ebenen hinzufügen


        

          

            
          

          

            
<map-bs wmslayers="TK_TagesheimKita, BW_Allmendbewilligungen_Bauinstallation" inactivewmslayers="TK_TagesheimKita" legend="true" />

          

        

      


      

        
Abfragbare WMS-Ebenen

        

          

            
          

          

            
<map-bs wmslayers="BW_Allmendbewilligungen_Bauinstallation,TK_TagesheimKita" queryablelayers="BW_Allmendbewilligungen_Bauinstallation,TK_TagesheimKita" legend="true"  />

          

        

      


      

        
Abfragbare WMS-Ebenen mit eigenen Spaltennamen

        

          

            
          

          

            
<map-bs wmslayers="BW_Allmendbewilligungen_Bauinstallation,TK_TagesheimKita" queryablelayers="BW_Allmendbewilligungen_Bauinstallation,TK_TagesheimKita" texts='{"mapbs_bw_detail_belegung": "Belegung","mapbs_bw_kalender_strasseplatz": " Kalender starsse/platz","bw_belegungs_art_bez":"Belegungsart","bw_belegung_id":"Bewilligungsid","bw_begehren_id":"BegehreniId","bw_art_des_begehrens_bez":"Art des Begehren","bw_bezeichnung":"Bezeichnung","bw_belastungs_art_bez":"Belastungsart","bw_datum":"Datum","bw_antragsteller":"Antragsteller"}' />

          

        

      


      

        
Abfragbare WMS-Ebenen ohne Attributfenster

        

          

            
          

          

            
<map-bs wmslayers="BW_Allmendbewilligungen_Bauinstallation,TK_TagesheimKita" queryablelayers="BW_Allmendbewilligungen_Bauinstallation,TK_TagesheimKita" overlay="false" />

            

          


          
          
        

      


      

        
Externe WMS-Ebenen hinzufügen

        

          

            
          

          

            
<map-bs wmslayers="geoadmin:ch.bfs.gebaeude_wohnungs_register, geoadmin:ch.swisstopo.swisstlm3d-wanderwege, TK_TagesheimKita" inactivewmslayers="geoadmin:ch.swisstopo.swisstlm3d-wanderwege" wmsurls="geoadmin:https://wms.geo.admin.ch/" legend="true" />

          

        

      
      

      

        
Beschränkt öffentliche WMS-Ebenen hinzufügen

        

          

            
          

          

            
<map-bs loginrequired="true" wmslayers="LS_BaumreiheGeplant"/>