Exemples d'utilisation de l'API simple du SITN

Cette page décrit l'utilisation de l'API simple (utilisant la librairie jQuery). L'API simple permet l'insertion de cartes simples dans vos pages web

Voir l'aide de l'API Étendue.

Base

Pour utiliser l'API, insérez le code HTML suivant:

<script src="http://sitn.ne.ch/production/wsgi/api.js"></script>
<script>
window.onload = function() {
    // ajouter le code ici
};
</script>

Afin d'ajouter un nouvelle carte, il faut ajouter une balise div avec un identifiant id là où vous souhaitez voir apparaître la carte:

<div id='map1' style='width:700px;height:400px;'></div>

Une carte

var map = new sitn.Map({
    div: 'map1', // id de l'élément contenant la carte
    zoom: 8, // niveau de zoom au chargement de la page
    center: [2544500, 1210100] // centre de la carte
});

Une carte avec un point en son centre

var map = new sitn.Map({
    div: 'map2',
    zoom: 8,
    center: [2544500, 1210100]
});
map.addMarker() // ajout du point (au centre par défaut);

Une carte avec plusieurs points et représentation personnalisée

var map = new sitn.Map({
    div: 'map3',
    zoom: 8,
    center: [2544500, 1210100]
});
map.addMarker({
    position: [2544410, 1210100], 
    size: [14, 14], 
    icon: '/production/wsgi/proj/59118fd3e2bc42b68eda2f1cfb13a1c3/apihelp/images/info.png' 
});
map.addMarker({
    position: [2544450, 1210000],
    size: [18, 18],
    icon: '/production/wsgi/proj/59118fd3e2bc42b68eda2f1cfb13a1c3/apihelp/images/essence.png'
});
map.addMarker({
    position: [2544310, 1210200],
    size: [14, 14],
    icon: '/production/wsgi/proj/59118fd3e2bc42b68eda2f1cfb13a1c3/apihelp/images/parking.png'
});

Une carte avec des couches superposées

var map = new sitn.Map({
    div: 'map4',
    zoom: 8,
    center: [2544500, 1210100],
    layers: ['parcelles', 'batiments_ofs'] // couches à ajouter
});

Une carte avec quelques contrôles supplémentaires

var map = new sitn.Map({
    div: 'map5',
    zoom: 8,
    center: [2544500, 1210100],
    layers: ['mo4_pfp_3'],
    addLayerSwitcher: true, // sélecteur de couche
    layerSwitcherExpanded: true,// dérouler le sélecteur
    addMiniMap: true, // ajout d'une vue d'esemble
    miniMapExpanded: true, // dérouler la vue d'ensemble
    showCoords: true // afficher les coordonnées de la souris
});

Recentrer la carte sur des coordonnées données


var map_ = new sitn.Map({
    div: 'map6',
    addMiniMap: true,
    miniMapExpanded: true
});
var button1 = document.getElementById('button1');
button1.onclick = function() {
    map_.recenter([2543500, 1202154], 7); // coordonnées et niveau de zoom
}
var button2 = document.getElementById('button2');
button2.onclick = function() {
    map_.recenter([2564500, 1216100], 9);
}

Recentrer la carte sur des objets

var map = new sitn.Map({
    div: 'map7',
    layers: ['batiments_ofs']
});
map.recenterOnObjects(
    'batiments_ofs', // nom de la couche
    ['1474234', '1474232'], // identifiants des objets
    true // mettre les objets en évidence
);

Charger des données d'un fichier GPX

var map = new sitn.Map({
    div: 'map8'
});
map.addCustomLayer('gpx', 
    'My GPX layer', 
    /*source des données*/
    '/production/wsgi/proj/59118fd3e2bc42b68eda2f1cfb13a1c3/apihelp/track0.gpx' 
    );

Charger des données depuis un fichier text

See MonFichier.txt.
var map = new sitn.Map({
    div: 'map9'
});
map.addCustomLayer('text', 
    'My custom txt layer', 
    '/production/wsgi/proj/59118fd3e2bc42b68eda2f1cfb13a1c3/apihelp/MonFichier.txt'
    );

Carte avec zone de recherche

var mapSearch = new sitn.Map({
    div: 'searchBoxMap', // id de l'élément contenant la carte
    zoom: 8,
    center: [2544500, 1210100]
});
    




var searchBox = new sitn.SearchBox({
    div: 'searchBox', // // id de l'élément contenant la zone de recherche
    map: mapSearch, // objet de type carte lié à la fonction de recherche
    width:'400px'
});