Désolé, aucune traduction n'est disponible pour cette page dans votre langue. Changer pour .

Exploiter une source OverPass ou GeoJSON

Prérequis

Technologie

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 les cartes. Dans le cadre de cet exemple, nous vous proposons de générer deux cartes en mode "plein écran" se partageant de manière équitable l'espace disponible. Pour simplifier ce tutoriel, je vous propose de partir d'une page HTML simple, sans framework (Bootstrap par exemple).

Objectifs

En repartant de la carte en mode "plein écran" du tutoriel Utilisation rapide¹ et à l'aide des sources de données suivantes :

Source GeoJSON : Départements².
Source OverPass : OverPass.

Nous allons :

Intégrer et configurer une source de données GeoJSON à l'aide d'une instance Lascar.cl.layer.GeoJSON³.
Intégrer et configurer une source de données OverPass à l'aide d'une instance Lascar.cl.layer.OverPass⁴.

Avant de commencer, il est important de préciser que les fonctionnalités évoquées dans les rubriques Pour aller plus loin sont valables pour les composants de type Lascar.cl.layer.GeoJSON³ et Lascar.cl.layer.OverPass⁴.

Réalisation

Etape 1 : Intégration d'une source de données GeoJSON

Pour intégrer une source de données GeoJSON sur une carte Leaflet, il vous faut connaître la source de données à exploiter et générer une instance de la classe Lascar.cl.layer.GeoJSON³.

Nous allons dans un premier temps générer le layer GeoJSON³, basé sur une requête Ajax exploitant la source de données des départements² suivante : /data/departements.geojson.json. N'hésitez pas à exploiter les propriétés fournies par l'objet jQuery.ajax() pour aller plus loin.

// ... on référence le layer Lascar GeoJSON utilisant 
// les données des départements.
    geojsonDptsLayer = new Lascar.cl.layer.GeoJSON({
        type: "GET",
        url: "/data/departements.geojson.json"
    });

Une fois le layer initialisé, nous l'ajoutons à notre carte afin qu'il se génére ou s'actualise sur celle-ci. Pour cela, nous devons définir un identifiant unique, avoir la carte à laquelle l'associer. Il est possible de nommer le layer pour qu'il soit facilement repérable par les utilisateurs de votre carte. Vous pouvez aussi gérer le paramètre permettant de définir si vous voulez ou non permettre la gestion de l'affichage de ce layer par l'utilisateur (case à cocher).

// On ajoute le layer à la carte ...
geojsonDptsLayer.addTo("dpts_m{0}".format(map._leaflet_id), map, "Départements (GeoJSON)", true);

Pour générer enfin le layer sur la ou les cartes associées, il ne reste plus qu'à provoquer l'appel de la requête Ajax :

// ... et on provoque l'appel vers la ressource pour
// permettre son chargement.
geojsonDptsLayer.req.send();

Pour aller plus loin - intégrer visuellement les informations complémentaires

Vous n'êtes pas sans savoir qu'un objet GeoJSON possède (potentiellement) des attributs de données. Afin de faciliter leur affichage, nous vous proposons de les retourner sous forme d'un tableau dans une dialogue liée à l'objet. La définition de cette méthode est la suivante : Lascar.cl.layer.UrlBasedLayer.prototype._parseProperties. Elle est désactivée par défaut des instances Lascar.cl.layer.GeoJSON³ mais peut être réactivée de la manière suivante :

// Pour permettre l'affichage des propriétés dans une infobulle
geojsonDptsLayer.parsing.properties = Lascar.cl.layer.UrlBasedLayer.prototype._parseProperties;

Pour aller plus loin - supprimer le Notifier

En exploitant l'instance Lascar.cl.layer.GeoJSON³, vous avez dû vous rendre compte de la présence d'un Notifier : cette petite fenêtre expliquant l'état d'avancement du chargement des données GeoJSON. Si cette fenêtre vous dérange, aucun problème, vous pouvez bloquer la génération de celle-ci à l'aide du code suivant :

// Pour empêcher la génération d'un "Notifier" :
geojsonDptsLayer.options.autobuildNotifier = false;

Etape 2 : Intégration d'une source de données OverPass

Sur le même principe que pour un layer GeoJSON³, pour intégrer une source de données OverPass sur une carte Leaflet, il vous faut connaître une source de données à exploiter, disposer d'une requête OverPass et générer une instance de la classe Lascar.cl.layer.OverPass⁴.

Nous allons dans un premier temps générer le layer OverPass⁴, basé sur une requête Ajax exploitant la source de données OverPass API Principale.

// On référence le layer Lascar OverPass utilisant 
// les données de l'OverPass API.
    overpassRerLayer = new Lascar.cl.layer.OverPass({
        type: "POST",
        url: "https://overpass-api.de/api/interpreter",
        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
    });

Comme précédemment, une fois le layer initialisé, nous l'ajoutons à la carte.

// On ajoute le layer à la carte ...
overpassRerLayer.addTo("opapi_m{0}".format(map._leaflet_id), map, "RER E (OverPass)", true);

Pour générer ou regénérer le layer, il ne vous reste plus qu'à provoquer l'appel de la requête Ajax à l'aide de la requête OverPass et d'une zone géographique (aussi nommée BBOX). Pour les requêtes OverPass, n'hésitez à pas à utiliser la documentation d'OpenStreetMap pour en comprendre le fonctionnement et à utiliser OverPass Turbo pour les expérimenter.

// ... et on provoque l'appel vers la ressource pour
// permettre son chargement.
overpassRerLayer.apply('[out:json]; rel["network"="RER"]["name"="RER E"]({{bbox}}); (._;>;); out;', map.getBounds());

Pour aller plus loin - personnaliser le style des objets

En exploitant l'instance Lascar.cl.layer.OverPass⁴, vous avez dû vous rendre compte de la présence d'options permettant de personnaliser le style des différents objets générés sur la carte à partir des données fournies. Il existe trois types de formes :

Les points : permettant de représenter des éléments ponctuels.
Les lignes : permettant de représenter des éléments linéaires.
Les formes : permettant de représenter des polygones.

Dans notre cas, voici le code utilisé permettant de personnaliser les différentes formes :

// On définit un style personnalisé pour les formes.
overpassRerLayer.options.styles = {
    point: {
        radius: 7,
        weight: 2,
        color: "blue",
        fillColor: "yellow"
    },
    ligne: {
        color: "#6E1E78",
        weight: 2,
    },
    forme: {
        color: "orange",
        fillOpacity: 0.4,
        weight: 2,
    }
};

Rendu

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

Consulter le rendu

Accéder au tutoriel Utilisation rapide. ↩
Accéder au GitHub du propriétaire de la source de données des Départements (FR) GeoJSON. ↩ ↩
Documentation de la classe Lascar.cl.layer.GeoJSON. ↩ ↩ ↩ ↩ ↩ ↩ ↩
Documentation de la classe Lascar.cl.layer.OverPass. ↩ ↩ ↩ ↩ ↩