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

List of examples

1. A map
2. A map with a marker on its center
3. A map with several custom markers
4. A map with a subset of overlays
5. A map with some additional controls
6. Recenter the map to given coordinates
7. Recenter the map on objects
8. Load data from a text file
9. A map with a search input

const map1 = new nyon.Map({
    div: 'map1', // id of the div element to put the map in
    zoom: 3,
    center: [2507670, 1137517]
});
                    

const map2 = new nyon.Map({
    div: 'map2',
    zoom: 5,
    backgroundLayers: ['plan_cadastral'],
    center: [2507670, 1137517]
});
map2.addMarker();
                    

const map3 = new nyon.Map({
    div: 'map3',
    zoom: 5,
    center: [2506406, 1137026]
});
map3.addMarker({
    position: [2506410, 1137100],
    size: [14, 14],
    icon: '../static/505993/apihelp/img/info.png'
});
map3.addMarker({
    position: [2506450, 1137000],
    size: [18, 18],
    icon: '../static/505993/apihelp/img/essence.png'
});
map3.addMarker({
    position: [2506310, 1137200],
    size: [14, 14],
    icon: '../static/505993/apihelp/img/parking.png'
});
                    

const map4 = new nyon.Map({
    div: 'map4',
    zoom: 0,
    center: [2507360, 1137845],
    layers: ['pat_salles_communales']
});
                    

const map5 = new nyon.Map({
    div: 'map5',
    zoom: 3,
    center: [2506500, 1137100],
    layers: ['poi_poi_transport', 'poi_poi_sport'],
    addLayerSwitcher: true,
    addMiniMap: true,
    miniMapExpanded: true,
    showCoords: true
});
                    

const map6 = new nyon.Map({
    div: 'map6',
    addMiniMap: true,
    miniMapExpanded: true,
    zoom: 3,
    center: [2507670, 1137517]
});
const button1 = document.getElementById('button1');
button1.onclick = function() {
    map6.recenter([2508490,1138842], 4);
}
const button2 = document.getElementById('button2');
button2.onclick = function() {
    map6.recenter([2506160,1143340], 5);
}
                    

const map7 = new nyon.Map({
    div: 'map7',
    layers: ['geol_sondages_publics'],
    backgroundLayers: ['plan_cadastral']
});
map7.recenterOnObjects(
    /* the layer name */
    'geol_sondages_publics',
    /* the ids of the objects */
    ['429'],
    /* whether to highlight the objects or not */
    true
);
                    

const map8 = new nyon.Map({
    div: 'map8',
});
map8.addCustomLayer('text', 'My custom txt layer', '../static/505993/apihelp/data.txt', {
  success: function() {
    map8.selectObject(2);
    map8.recenter([2507670, 1137517], 3);
  }
});
                    

const map10 = new nyon.Map({
    div: 'map10',
    zoom: 3,
    center: [2507670, 1137517],
    searchDiv: 'map10search'
});