1. Documentation
2. Utilisation rapide

Utilisation rapide

Prérequis

Pour utiliser rapidement LASCARjs, il vous faudra vous prémunir au préalable des librairies suivantes :

• jQuery (>= 3.2.1)
• Leaflet (>= 1.2.0)

Les versions indiquées entre partenthèses sont celles utilisées dans le cadre des démonstrateurs sur la page d'accueil, mais rien ne vous empêche d'utiliser des versions supérieures ou inférieures. Sachez que nous n'avons pas encore testé ces autres versions et ne pouvons pas garantir de support.

Il vous faudra aussi disposer d'une page web dans laquelle intégrer la carte. Dans le cadre de cet exemple, nous vous proposons de générer une carte en mode "plein écran". Pour simplifier ce tutoriel, je vous propose de partir d'une page HTML simple, sans framework (Bootstrap par exemple).

Réalisation

Etape 1 : Mise en place de la structure

Dans votre page HTML, insérez le conteneur suivant afin de permettre la génération de la carte :

<!-- CONTENEUR "lf-map" permettant la génération de la carte -->
<div id="lf-map"></div>

L'identifiant lf-map est l'identifiant utilisé par défaut par notre librairie pour construire une carte. Ce paramètre peut être personnalisé, je vous invite à consulter la documentation¹ pour en savoir plus.

Etape 2 : Définition du style

Afin de permettre à la future carte de s'afficher en plein écran, vous devez apportez quelques modifications de style à la page HTML. Je vous propose d'exploiter le style suivant :

/* Redimensionnement de la page :
   pour permettre l'affichage "plein écran". */
html, body {
    height: 100%;
    width: 100%;
}
/* Personnalisation du corps de page :
   pour contenir la carte.*/
body {
    position: relative;
    margin: 0px;
    padding: 0px;
}
/* Personnalisation du conteneur de la carte :
   pour afficher le rendu en "plein écran". */
#lf-map { 
    width: 100%;
    height: 100%;
}

Pour information, pensez à donner une "hauteur" à votre carte pour qu'elle puisse s'afficher (cf. propriété height en CSS).

Etape 3 : Génération de la carte

Pour finir, il ne reste plus qu'à créer la carte à l'aide de LASCARjs. Pour ce faire, je vous propose de procéder ainsi :

/* On intègre la référence de la carte dans une variable
   pour faciliter l'utilisation par la suite de composants
   fournis par LASCARjs (paramètres dans l'URL, layer GeoJSON,
   layer OverPass, ...). */
var map = new Lascar.cl.Map();

Nous utilisons ici le constructeur par défaut proposé par LASCARjs. Toutefois vous pouvez la personnaliser à l'aide de paramètres. Pour en savoir plus, je vous invite à aller consulter la documentation¹.

Rendu

Une fois chacune des étapes précédentes réalisées, vous obtiendrez le résultat suivant :

Consulter le rendu