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.

See the Extended API Help page for help on the Extended API.

Basis

To use the API you should add the following HTML:

<script src="https://geomapfish-demo.camptocamp.net/1.6/wsgi/api.js"></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

var map = new demo.Map({
    div: 'map1', // id of the div element to put the map in
    zoom: 14,
    center: [537900, 152070]
});

A map with a marker on its center

var map = new demo.Map({
    div: 'map2',
    zoom: 15,
    center: [533030, 152390]
});
map.addMarker();

A map with several custom markers

var map = new demo.Map({
    div: 'map3',
    zoom: 13,
    center: [537900, 152070]
});
map.addMarker({
    position: [533030, 152390],
    size: [14, 14],
    icon: '/1.6/wsgi/proj/fc46d2bbbcca496888e823a76963d4c6/apihelp/images/info.png'
});
map.addMarker({
    position: [538345, 152680],
    size: [18, 18],
    icon: '/1.6/wsgi/proj/fc46d2bbbcca496888e823a76963d4c6/apihelp/images/essence.png'
});
map.addMarker({
    position: [537520, 153875],
    size: [14, 14],
    icon: '/1.6/wsgi/proj/fc46d2bbbcca496888e823a76963d4c6/apihelp/images/parking.png'
});

A map with a subset of overlays

var map = new demo.Map({
    div: 'map4',
    zoom: 12,
    center: [537900, 152070],
    layers: ['information']
});

A map with some additional controls

var map = new demo.Map({
    div: 'map5',
    zoom: 12,
    center: [537900, 152070],
    layers: ['hotel', 'cinema'],
    addLayerSwitcher: true,
    layerSwitcherExpanded: true,
    addMiniMap: true,
    miniMapExpanded: true,
    showCoords: true
});

Recenter the map to given coordinates


var map_ = new demo.Map({
    div: 'map6',
    zoom: 14,
    center: [537900, 152070],
    addMiniMap: true,
    miniMapExpanded: true
});
var button1 = document.getElementById('button1');
button1.onclick = function() {
    map_.recenter([538345, 152680], 16);
}
var button2 = document.getElementById('button2');
button2.onclick = function() {
    map_.recenter([537900, 152070], 14);
}

Recenter the map on objects

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

Load data from a GPX file

var map = new demo.Map({
    div: 'map8'
});
map.addCustomLayer('gpx', 'My GPX layer', '/1.6/wsgi/proj/fc46d2bbbcca496888e823a76963d4c6/apihelp/trace_demo.gpx');

Load data from a text file

See data.txt.
var map = new demo.Map({
    div: 'map9'
});
map.addCustomLayer('text', 'My custom txt layer', '/1.6/wsgi/proj/fc46d2bbbcca496888e823a76963d4c6/apihelp/data.txt');