Description de l’API

L’API du géoportail régional CartoJuraLéman permet l’insertion de cartes simples sur des pages web.

Cette page décrit comment utiliser L’API.

Pour utiliser l’API, vous devez ajouter le code html suivant (au dessus du body) :

<script src="https://map.cjl.ch/api.js?version=2"></script>
<script>
window.onload = function() {
    // add the code here
};
</script>

Pour mettre une nouvelle carte dans la page, vous devrez mettre un élément div avec un id dans votre page html :

<div id="map1" style="width:700px;height:400px;"></div>
Afficher le code source
var map = new morges.Map({
    div: 'map1', // id of the div element to put the map in
    zoom: 3,
    center: [2527748, 1151338]
});


Afficher le code source

var map = new morges.Map({
    div: 'map2',
    zoom: 5,
    center: [2527748, 1151338]
});
map.addMarker();
Afficher le code source
var map = new morges.Map({
    div: 'map3',
    zoom: 5,
    center: [2527748, 1151338]
});
map.addMarker({
    position: [2527758, 1151348],
    size: [14, 14],
    icon: '../static-ngeo/api/apihelp/img/info.png'
});
map.addMarker({
    position: [2527718, 1151308],
    size: [18, 18],
    icon: '../static-ngeo/api/apihelp/img/essence.png'
});
map.addMarker({
    position: [2527748, 1151338],
    size: [14, 14],
    icon: '../static-ngeo/api/apihelp/img/parking.png'
});


Afficher le code source

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


Afficher le code source

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


Afficher le code source

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


Afficher le code source

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


Afficher le code source

var map = new morges_geoportal.Map({
    div: 'map8'
});
map.addCustomLayer('gpx', 'My GPX layer', '/path/to/your/gpx/track0.gpx');


Afficher le code source

var map = new morges.Map({
    div: 'map9'
});
map.addCustomLayer('text', 'My custom txt layer', '/path/to/your/txt/MonFichier.txt');