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://sitn.ne.ch/production/api.css" rel="stylesheet">
<script src="https://sitn.ne.ch/production/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

var map = new sitn.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

var map = new sitn.Map({
    div: 'map2',
    zoom: 8,
    backgroundLayers: ['osm'],
    center: [2544500, 1210100]
});
map.addMarker();
                    

A map with several custom markers

var map = new sitn.Map({
    div: 'map3',
    zoom: 8,
    center: [2544500, 1210100]
});
map.addMarker({
    position: [2544410, 1210100],
    size: [14, 14],
    icon: '../static-ngeo/api/apihelp/img/info.png'
});
map.addMarker({
    position: [2544450, 1210000],
    size: [18, 18],
    icon: '../static-ngeo/api/apihelp/img/essence.png'
});
map.addMarker({
    position: [2544310, 1210200],
    size: [14, 14],
    icon: '../static-ngeo/api/apihelp/img/parking.png'
});
                    

A map with a subset of overlays

var map = new sitn.Map({
    div: 'map4',
    zoom: 7,
    center: [2559460, 1203764],
    layers: ['ad05_npa6', 'batiments_ofs', 'poi_administration']
});
                    

A map with some additional controls

var map = new sitn.Map({
    div: 'map5',
    zoom: 3,
    center: [2544500, 1210100],
    layers: ['poi_services'],
    addLayerSwitcher: true,
    addMiniMap: true,
    miniMapExpanded: true,
    showCoords: true
});
                    

Recenter the map to given coordinates


var map_ = new sitn.Map({
    div: 'map6',
    addMiniMap: true,
    miniMapExpanded: true,
    zoom: 0,
    center: [2590000, 1170000]
});
var button1 = document.getElementById('button1');
button1.onclick = function() {
    map_.recenter([2543500, 1202154], 7);
}
var button2 = document.getElementById('button2');
button2.onclick = function() {
    map_.recenter([2564500, 1216100], 9);
}
                    

Recenter the map on objects

var map = new sitn.Map({
    div: 'map7'
});
map.addCustomLayer('text', 'My custom txt layer', '../static-ngeo/api/apihelp/data.txt', {
  success: function() {
    map.selectObject(2);
  }
});