# 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:

    <script
      src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6,default-3.6,Array.prototype.includes,Object.entries,Object.values"
      crossorigin="anonymous">
    </script>
    <link href="https://geomapfish-demo-2-8.camptocamp.com/api.css" rel="stylesheet">
    <script src="https://geomapfish-demo-2-8.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

    const map1 = new demo.Map({
        div: 'map1', // id of the div element to put the map in
        zoom: 4,
        center: [2544500, 1210100]
    });

## A map with a marker on its center

    const map2 = new demo.Map({
        div: 'map2',
        zoom: 7,
        backgroundLayers: ['OSM map'],
        center: [2544500, 1210100]
    });
    map2.addMarker();

## A map with several custom markers

    const map3 = new demo.Map({
        div: 'map3',
        zoom: 7,
        center: [2544500, 1210100]
    });
    map3.addMarker({
        position: [2544410, 1210100],
        size: [14, 14],
        icon: 'img/info.png'
    });
    map3.addMarker({
        position: [2544450, 1210000],
        size: [18, 18],
        icon: 'img/essence.png'
    });
    map3.addMarker({
        position: [2544310, 1210200],
        size: [14, 14],
        icon: 'img/parking.png'
    });

## A map with a subset of overlays

    const map4 = new demo.Map({
        div: 'map4',
        zoom: 0,
        center: [2590000, 1170000],
        layers: ['ch.astra.hauptstrassennetz', 'polygon', 'point', 'group']
    });

## A map with some additional controls

    const map5 = new demo.Map({
        div: 'map5',
        zoom: 3,
        center: [2544500, 1210100],
        layers: ['osm_open'],
        addLayerSwitcher: true,
        addMiniMap: true,
        miniMapExpanded: true,
        showCoords: true
    });

## Recenter the map to given coordinates

    const map6 = new demo.Map({
        div: 'map6',
        addMiniMap: true,
        miniMapExpanded: false
    });
    const button1 = document.getElementById('button1');
    button1.onclick = function() {
        map6.recenter([2543500, 1202154], 7);
    }
    const button2 = document.getElementById('button2');
    button2.onclick = function() {
        map6.recenter([2564500, 1216100], 9);
    }

## Recenter the map on objects

    const map7 = new demo.Map({
        div: 'map7',
        layers: ['polygon']
    });
    map7.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.

    const map8 = new demo.Map({
        div: 'map8'
    });
    map8.addCustomLayer('text', 'My custom txt layer', 'data.txt', {
      success: function() {
        map8.selectObject(2);
      }
    });

## Search input

    const map9 = new demo.Map({
        div: 'map9',
        zoom: 3,
        center: [2544500, 1210100],
        searchDiv: 'map9search'
    });