Simple API Help

This page describes how to use the Simple API. The Simple API provides a JavaScript API for inserting simple maps into web pages.

Basis

To use the API you should add the following HTML:


<link src="https://geomapfish-demo-2-4.camptocamp.com/api.css" rel="stylesheet">
<script src="https://geomapfish-demo-2-4.camptocamp.com/api.js?version=2"></script>
<script>
window.onload = function() {
    // add the code here
};
</script>
            

To put a new map in the page you'll have to put a div element with a certain id where you want your map to be:

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

A map

1000 m
var map = new demo.Map({
    div: 'map1', // id of the div element to put the map in
    zoom: 4,
    center: [544500, 210100]
});
                    

A map with a marker on its center

50 m
var map = new demo.Map({
    div: 'map2',
    zoom: 8,
    backgroundLayers: ['OSM map'],
    center: [544500, 210100]
});
map.addMarker();
                    

A map with several custom markers

50 m
var map = new demo.Map({
    div: 'map3',
    zoom: 8,
    center: [544500, 210100]
});
map.addMarker({
    position: [544410, 210100],
    size: [14, 14],
    icon: 'img/info.png'
});
map.addMarker({
    position: [544450, 210000],
    size: [18, 18],
    icon: 'img/essence.png'
});
map.addMarker({
    position: [544310, 210200],
    size: [14, 14],
    icon: 'img/parking.png'
});
                    

A map with a subset of overlays

20 km
var map = new demo.Map({
    div: 'map4',
    zoom: 0,
    center: [590000, 170000],
    layers: ['ch.astra.hauptstrassennetz', 'polygon', 'point']
});
                    

A map with some additional controls

2 km
    var map = new demo.Map({
        div: 'map5',
        zoom: 3,
        center: [544500, 210100],
        layers: ['osm_open'],
        addLayerSwitcher: true,
        addMiniMap: true,
        miniMapExpanded: true,
        showCoords: true
    });
                        

    Recenter the map to given coordinates


    var map_ = new demo.Map({
        div: 'map6',
        addMiniMap: true,
        miniMapExpanded: true
    });
    var button1 = document.getElementById('button1');
    button1.onclick = function() {
        map_.recenter([543500, 202154], 7);
    }
    var button2 = document.getElementById('button2');
    button2.onclick = function() {
        map_.recenter([564500, 216100], 9);
    }
                        

    Recenter the map on objects

    var map = new demo.Map({
        div: 'map7',
        layers: ['polygon']
    });
    map.recenterOnObjects(
        /* the layer name */
        'polygon',
        /* the ids of the objects */
        ['94', '125'],
        /* whether to highlight the objects or not */
        true
    );
                        

    Load data from a text file

    See data.txt.
    500 m
    var map = new demo.Map({
        div: 'map9'
    });
    map.addCustomLayer('text', 'My custom txt layer', 'data.txt', {
      success: function() {
        map.selectObject(2);
      }
    });