Simple API MapBS

Diese Seite beschreibt wie die Simple API genutzt werden kann. Die Simple API bietet eine JavaScript API für das einfache Einbinden in Webseiten.

Technisch gesehen, ist die SimpleApi eine kleine OpenLayers 3 Anwendung, die Kartendienste WMS und WMTS des Kantons Basel-Stadt bereits verknüpft hat. Vordefinierte Methoden, wie unten beschrieben können über das "mapbs"-Objekt genutzt und individuell erweitert werden. Beispiele werden im Folgenden aufgeführt.

Grundlagen

Um die API nutzen zu können, einfach folgenden Code hinzufügen:


<meta charset="utf-8">
<link href="https://map.geo.bs.ch/api.css" rel="stylesheet">
<script src="https://map.geo.bs.ch/api.js?version=2"></script>
<script>
window.onload = function() {
    // add the code here
};
</script>

Um ein Kartenelement in der Karte einzubinden muss ein div Elementmit einer bestimmten id dort hinzugefügt werden, wo die Karte erscheinen soll:

<div id='map1' style='width:700px;height:400px;'></div>

Ein einfacher Kartenausschnitt

var map = new mapbs.Map({
    div: 'map1', // id of the div element to put the map in
    zoom: 4,    
    center: [2611484, 1267592]
});

Ein Kartenausschnitt mit einem Marker-Punkt in der Mitte

var map = new mapbs.Map({
    div: 'map2',
    zoom: 4,
    backgroundLayers: ['Grundkarte farbig'],
    center: [2611484, 1267592]
});
map.addMarker();

Ein Kartenausschnitt mit individuellen Marker-Punkten

var map = new mapbs.Map({
    div: 'map3',
    zoom: 4,
    center: [2611494, 1267592],
    showCoords: true
});
map.addMarker({
    position: [2611982, 1267773],
    size: [14, 14],
    icon: '/static-ngeo/api/apihelp/img/info.png'
});
map.addMarker({
    position: [2611090, 1267875],
    size: [18, 18],
    icon: '/static-ngeo/api/apihelp/img/essence.png'
});
map.addMarker({
    position: [2611500, 1267335],
    size: [14, 14],
    icon: '/static-ngeo/api/apihelp/img/parking.png'
});

Ein Kartenausschnitt mit verschiedenen überlagerten Kartenebenen

var map = new mapbs.Map({
    div: 'map4',
    zoom: 4,
    center: [2611494, 1267592],
    layers: ['GL_AbschnittsStoergrade', 'SW_Jugendlichenanteil', 'KJ_Jugendangebot']
});

Ein Kartenausschnitt mit zusätzlichen Steuerelementen

var map = new mapbs.Map({
    div: 'map5',
    zoom: 4,
    center: [2611494, 1267592],
    layers: ['VO_TouristischeVelorouten_EuroVelo5', 'VO_TouristischeVelorouten_EuroVelo6', 'VO_TouristischeVelorouten_EuroVelo15'],
    addLayerSwitcher: true,
    addMiniMap: true,
    miniMapExpanded: true,
    showCoords: true
});

Verschieben der Kartenmitte, basierend auf gegebenen Koordinaten

var map_ = new mapbs.Map({
    div: 'map6',
    addMiniMap: true,
    zoom: 4,
    center: [2611494, 1267592],
    miniMapExpanded: true,
    showCoords:true
});
var button1 = document.getElementById('button1');
button1.onclick = function() {
    map_.recenter([2611527, 1267290], 7);
}
var button2 = document.getElementById('button2');
button2.onclick = function() {
    map_.recenter([2611773, 1266868], 7);
}
var button3 = document.getElementById('button3');
button3.onclick = function() {
    map_.recenter([2611494, 1267592], 4);
}

Verschieben der Kartenmitte basierend auf Objekten

var map = new mapbs.Map({
    div: 'map7',
    zoom: 4,
    backgroundLayers: ['Grundkarte farbig'],
    layers: ['AS_Akutspitaeler']
});
map.recenterOnObjects(
    /* the layer name */
    'AS_Akutspitaeler',
    /* the ids of the objects */
    ['14','15'],
    /* whether to highlight the objects or not */
    false
);

Object abfragen

Klickt man auf ein Objekt, kann via JavaScript ein Popup angezeigt werden. Möchte man dieses Popup nicht nutzen, kann durch den Aufruf der mapbs.getMapbsFeaturesFromCoordinates() Methode die Eigenschaften des Objekts im JSON-Format abgerufen und ggf. weiterverarbeitet werden.

<div id='featureContainer' ></div>

Klicken Sie auf ein Objekt.


var map9 = new mapbs.Map({
    div: 'map9',
    zoom: 9,
    center: [2611525, 1267284],
    layers: ['DM_Gebaeudeinformationen_DatenmarktGebaeudeID_GebaeudeFertiggestellt']
});
// layer to be queried (if it is a wfs layer)
const layerName = 'DM_Gebaeudeinformationen_DatenmarktGebaeudeID_GebaeudeFertiggestellt';
// displays results of WFS Request in a popup
const showPopup = true;
// reacts on click in map
map9.map_.on('singleclick', (event) '=>' {
    //returns object of wfs properties of selected feature -- whereas translations and exclude are both optional
    mapbs.getMapbsFeaturesFromCoordinates(event, map9, layerName, showPopup, translations, exclude).then(properties => {
        //converts propteries object into json
        var contentHTML_json = JSON.stringify(properties, (key, value) => {
            // uses list of values to be excluded of json
            if (exclude[key] !== undefined) {
                return undefined;
            }
            return value;
        }, "<br />");
        // display json of feature 
        document.getElementById('featureContainer').innerHTML = "<h3>Objekteigenschaften</h3><p>" + contentHTML_json + "</p>";
    }, error => {
        // no feature was found
        document.getElementById('featureContainer').innerHTML = "<h3>Objekteigenschaften</h3><p>" + error + "</p>";
    });
});
// Keys of wfs properties usually have a technical name. Translations can be done here
var translations = {
    "dm_gebaeudenummer": "Gebäude ID",
    "dm_gebaeudestatus": "Gebäudestatus",
    "dm_grundflaeche": "Gebäudegrundfläche [m²]",
    "dm_gebaeudekategorie": "Gebäudekategorie",
    "dm_adresse": "Adresse"
};
// this dictionary is used to exclude specific properties from popup and json result
var exclude = {
    "boundedBy": "",
    "dm_sektion": "",
    "dm_parzellennummer": "",
    "dm_gebaeudenummerbfs": "",
    "dm_koordinaten": "",
    "the_geom": ""
}

Daten aus einer Text-Datei hinzufügen

Siehe: data.txt.

var map = new mapbs.Map({
    div: 'map10',
    zoom: 4,
    center: [2612222, 1267592],
    showCoords: true
});

map.addCustomLayer('text', 'My custom txt layer', '/static-ngeo/api/apihelp/data.txt', {
    success: function() {
        map.selectObject(1);
        map.recenter([2612222, 1267592], 3);
    }
});