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.

Principe de base

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

<script src="https://map.cjl.ch/prod/wsgi/xapi.js"></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>

Carte simple

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]
});

Carte avec un marqueur au centre

Afficher le code source

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

Carte avec plusieurs marqueurs personalisés

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: '/path/to/your/icon/info.png'
});
map.addMarker({
    position: [2527718, 1151308],
    size: [18, 18],
    icon: '/path/to/your/icon/essence.png'
});
map.addMarker({
    position: [2527748, 1151338],
    size: [14, 14],
    icon: '/path/to/your/icon/parking.png'
});

Carte avec une superposition de couches

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']
});

Carte avec des fonctionnalités supplémentaires

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
});

Recentrer la carte selon des coordonnées

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);
}

Recentrer la carte sur des objets

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 des données depuis un fichier GPX

Afficher le code source

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

Afficher des données depuis un fichier txt

Afficher le code source

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