This page describes how to use the Simple API. The Simple API provides a JavaScript API for inserting simple maps into web pages.
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>
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>
var map = new demo.Map({ div: 'map1', // id of the div element to put the map in zoom: 4, center: [544500, 210100] });
var map = new demo.Map({ div: 'map2', zoom: 8, backgroundLayers: ['OSM map'], center: [544500, 210100] }); map.addMarker();
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' });
var map = new demo.Map({ div: 'map4', zoom: 0, center: [590000, 170000], layers: ['ch.astra.hauptstrassennetz', 'polygon', 'point'] });
var map = new demo.Map({ div: 'map5', zoom: 3, center: [544500, 210100], layers: ['osm_open'], addLayerSwitcher: true, addMiniMap: true, miniMapExpanded: true, showCoords: true });
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); }
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 );
var map = new demo.Map({ div: 'map9' }); map.addCustomLayer('text', 'My custom txt layer', 'data.txt', { success: function() { map.selectObject(2); } });