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

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

const map2 = new morges.Map({
    div: 'map2',
    zoom: 5,
    center: [2527748, 1151338]
});
map2.addMarker();
                    

const map3 = new morges.Map({
    div: 'map3',
    zoom: 5,
    center: [2527748, 1151338]
});
map3.addMarker({
    position: [2527758, 1151348],
    size: [14, 14],
    icon: '../static/636337/apihelp/img/info.png'
});
map3.addMarker({
    position: [2527718, 1151308],
    size: [18, 18],
    icon: '../static/636337/apihelp/img/essence.png'
});
map3.addMarker({
    position: [2527748, 1151338],
    size: [14, 14],
    icon: '../static/636337/apihelp/img/parking.png'
});
                    

const map4 = new morges.Map({
    div: 'map4',
    zoom: 5,
    center: [2527748, 1151338],
    layers: ['vd_rcb_adr2', 'vd_cad_parc_proprio_grl']
});
                    

const map5 = new morges.Map({
    div: 'map5',
    zoom: 5,
    center: [2527748, 1151338],
    layers: ['mg_cad_pf_pfa_grl'],
    addLayerSwitcher: true,
    addMiniMap: true,
    miniMapExpanded: true,
    showCoords: true
});
                    

const map6 = new morges.Map({
    div: 'map6',
    zoom: 3,
    center: [2527748, 1151338],
    addMiniMap: true,
    miniMapExpanded: false
});
const button1 = document.getElementById('button1');
button1.onclick = function() {
    map6.recenter([2529267, 1152245], 7);
}
const button2 = document.getElementById('button2');
button2.onclick = function() {
    map6.recenter([2527748, 1151338], 5);
}
                    

const map7 = new morges.Map({
    div: 'map7',
    layers: ['vd_rcb_adr2']
});
map7.recenterOnObjects(
    /* the layer name */
    'vd_rcb_adr2',
    /* the ids of the objects */
    ['16974', '16895'],
    /* whether to highlight the objects or not */
    true
);
                    

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

const map9 = new morges.Map({
    div: 'map9',
    zoom: 3,
    center: [2527748, 1151338],
    searchDiv: 'map9search'
});