LES NOUVELLES APIS JAVASCRIPT

Transcription

1 LES NOUVELLES APIS JAVASCRIPT Aspects techniques Gilles Cébélieu IGN-SHOM

2 PROGRAMME > Préambule > SDK > Extensions Géoportail > Extension Géoportail pour OL3 > Extension Géoportail pour Leaflet > Bibliothèque d accès aux ressources > Eléments communs 2

3 PRÉAMBULE But des API JavaScript pour le Géoportail Faciliter l accès aux Géoservices dans la mise en œuvre d applications Web Utilisation libre et gratuite mais > La plupart des fonctionnalités proposées nécessitent des droits d accès aux Géoservices > Nécessité d obtenir au préalable une clef d accès sur le site professionnels.ign.fr 3

4 1 LE SDK Présentation, utilisation 4

5 LE SDK - PRÉSENTATION > Une bibliothèque JavaScript + des règles CSS > Assemblage d OpenLayers et de son extension Géoportail > + Interface de programmation simplifiée Pour la mise en œuvre de fonctionnalités simples : Composition de cartes dynamiques Centrage, projection, navigation, données IGN et autres sources de données Ajout d outils cartographiques Géocodage, altimétrie, mesures, coordonnées, navigation, itinéraire, isochrones, croquis Evénements sur l interaction avec la carte Pour réagir aux interaction des internautes avec la carte 5

6 LE SDK EXEMPLE D UTILISATION Une carte, un moteur de recherche et un marker 6

7 LE SDK EXEMPLE D UTILISATION Une carte, un moteur de recherche et un marker Mise en oeuvre Insertion des Ressources JavaScript et CSS Donne accès à l interface de programmation simplifiée, à OpenLayers et à son extension Géoportail => On utilise ici sur l interface de programmation simplifiée 7

8 LE SDK EXEMPLE D UTILISATION Une carte, un moteur de recherche et un marker 8

9 LE SDK EXEMPLE D UTILISATION Une carte, un moteur de recherche et un marker Une fonction «loader» Rattachement de la carte dynamique à un élément de la page Options d initialisation de la carte 9

10 LE SDK EXEMPLE D UTILISATION Une carte, un moteur de recherche et un marker Options d initialisation de la carte Clef d accès au Géoservices 10

11 LE SDK EXEMPLE D UTILISATION Une carte, un moteur de recherche et un marker Options d initialisation de la carte Centrage par coordonnées, géocodage ou géolocalisation 11

12 LE SDK EXEMPLE D UTILISATION Une carte, un moteur de recherche et un marker Options d initialisation de la carte Niveau de zoom 12

13 LE SDK EXEMPLE D UTILISATION Une carte, un moteur de recherche et un marker Options d initialisation de la carte Fonds de carte : couches disponibles sur la clef ou couches «externes» 13

14 LE SDK EXEMPLE D UTILISATION Une carte, un moteur de recherche et un marker Options d initialisation de la carte Outils à proposer à l internaute : à choisir parmi une liste d outils prédéfinie 14

15 LE SDK EXEMPLE D UTILISATION Une carte, un moteur de recherche et un marker Options d initialisation de la carte Positionnement de markers au centre de la carte ou à des coordonnées spécifiques 15

16 2 LES EXTENSIONS Présentations, utilisations 16

17 LES EXTENSIONS GÉOPORTAIL - PRINCIPE Des outils et fonctions JavaScript additionnels pour des frameworks cartographiques populaires Faciliter l accès aux géoservices pour mettre en place des applications cartographiques A utiliser en complément du framework cible Actuellement diponibles pour deux frameworks cible : OpenLayers 3+ et Leaflet Une extension en préparation pour itowns (3D) Fonctionnalités additionnelles type Affichage simplifié des données de référence Auto-configuration des couches Définition des systèmes des coordonnées utilisables sur tous les territoires français Dans les registres EPSG et IGNF Ajout d outils cartographiques utilisant les Géoservices Géocodage, altimétrie, mesures, coordonnées, itinéraire, isochrones 17

18 L EXTENSION GÉOPORTAIL POUR OPENLAYERS 3(+) 18

19 L EXTENSION GÉOPORTAIL POUR OPENLAYERS 3(+) > Une bibliothèque JavaScript + des règles CSS > Assemblage : Bibliothèque d accès aux ressources du Géoportail Proj4js Pour la définition des systèmes de coordonnées et des registres Fonctions et Widgets de l extension «Source» et «Layer» WMS et WMTS Géoportail Auto-paramétrage des «Source» et «Layer» OpenLayers correspondants Widgets additionnels Affichage de coordonnées (avec altitude), LayerSwitcher, Attributions dynamique, Géocodage direct et inverse, Itinéraires, Isochrones, Import de couches, Mesures, profil altimétrique, GetFeatureInfo 19

20 EXTENSION OL3(+) EXEMPLE D UTILISATION Fond de carte IGN et moteur de recherche 20

21 EXTENSION OL3(+) EXEMPLE D UTILISATION Fond de carte IGN et moteur de recherche > Insertion des Ressources JavaScript et CSS d OpenLayers et de l extension Géoportail > Paramétrage de la clef d accès aux Géoservices et chargement des données de configuration Dans la balise <script> ou dans le code de l application Exécution du code de l extension conditionnée au chargement de la configuration > Méthode issue de la bibliothèque d accès 21

22 EXTENSION OL3(+) EXEMPLE D UTILISATION Fond de carte IGN et moteur de recherche 22

23 EXTENSION OL3(+) EXEMPLE D UTILISATION Fond de carte IGN et moteur de recherche Création de la couche Géoportail Scan Express Standard WMTS (fonction de l extension) NB : pas besoin de préciser d autre paramétrage car celui-ci est issu des données de configuration 23

24 EXTENSION OL3(+) EXEMPLE D UTILISATION Fond de carte IGN et moteur de recherche Création de la carte OpenLayers (fonction d OpenLayers) paramétrée avec la couche Géoportail crée précédemment (compatible avec les couches OpenLayers) 24

25 EXTENSION OL3(+) EXEMPLE D UTILISATION Fond de carte IGN et moteur de recherche Création de la barre de recherche (fonction de l extension) et ajout à la carte (fonction d OpenLayers) 25

26 L EXTENSION GÉOPORTAIL POUR LEAFLET 26

27 L EXTENSION GÉOPORTAIL POUR LEAFLET > Une bibliothèque JavaScript + des règles CSS > Assemblage : Bibliothèque d accès aux ressources du Géoportail Proj4js (+ son wrapper pour Leaflet : Proj4Leaflet) Pour la définition des systèmes de coordonnées et des registres Leaflet.draw Plugin Leaflet pour gestion des dessins sur la carte Fonctions et Widgets de l extension «Layer» WMS et WMTS Géoportail Auto-paramétrage des «TileLayer» Leaflet correspondants Widgets additionnels Affichage de coordonnées (avec altitude), LayerSwitcher, Géocodage direct et inverse, Itinéraires, Isochrones, profil altimétrique 27

28 EXTENSION LEAFLET EXEMPLE D UTILISATION Fond de carte IGN et moteur de recherche 28

29 EXTENSION LEAFLET EXEMPLE D UTILISATION Fond de carte IGN et moteur de recherche > Insertion des Ressources JavaScript et CSS de Leaflet et de l extension Géoportail > Paramétrage de la clef d accès aux Géoservices et chargement des données de configuration Dans la balise <script> ou dans le code de l application Exécution du code de l extension conditionnée au chargement de la configuration > Méthode issue de la bibliothèque d accès 29

30 EXTENSION LEAFLET EXEMPLE D UTILISATION Fond de carte IGN et moteur de recherche 30

31 EXTENSION LEAFLET EXEMPLE D UTILISATION Fond de carte IGN et moteur de recherche Création de la carte Leaflet (fonction de Leaflet) 31

32 EXTENSION LEAFLET EXEMPLE D UTILISATION Fond de carte IGN et moteur de recherche Création de la couche Géoportail Scan Express Standard WMTS (fonction de l extension) et ajout à la carte (fonction de Leaflet) NB : pas besoin de préciser d autre paramétrage car celui-ci est issu des données de configuration 32

33 EXTENSION LEAFLET EXEMPLE D UTILISATION Fond de carte IGN et moteur de recherche Création de la barre de recherche (fonction de l extension) et ajout à la carte (fonction de Leaflet) 33

34 3 BIBLIOTHÈQUE D ACCÈS Présentation, utilisation 34

35 LA BIBLIOTHÈQUE D ACCÈS - PRÉSENTATION > Une bibliothèque JavaScript Aucun élément graphique > Dialoguer avec les services web du Géoportail Ceux non supportés nativement par les frameworks cartographiques classiques Abstraction du protocole du service > Liée à aucun framework cartographique Les données géographiques échangées le sont au format standard GéoJSON Le développeur est libre de les intégrer dans son application avec le framework de son choix 35

36 LA BIBLIOTHÈQUES D ACCÈS EXEMPLE D UTILISATION Dialogue avec le service de Géocodage 36

37 LA BIBLIOTHÈQUES D ACCÈS EXEMPLE D UTILISATION Dialogue avec le service de Géocodage Mise en œuvre Insertion des Ressources JavaScript => Donne accès à l interface de programmation de la Bibliothèque d accès 37

38 LA BIBLIOTHÈQUES D ACCÈS EXEMPLE D UTILISATION Dialogue avec le service de Géocodage 38

39 LA BIBLIOTHÈQUES D ACCÈS EXEMPLE D UTILISATION Dialogue avec le service de Géocodage Une fonction de Géocodage 39

40 LA BIBLIOTHÈQUES D ACCÈS EXEMPLE D UTILISATION Dialogue avec le service de Géocodage Paramètre : clef d accès aux Géoservices 40

41 LA BIBLIOTHÈQUES D ACCÈS EXEMPLE D UTILISATION Dialogue avec le service de Géocodage Paramètres en entrée de la requête de Géocodage : localisant et critères de filtrage 41

42 LA BIBLIOTHÈQUES D ACCÈS EXEMPLE D UTILISATION Dialogue avec le service de Géocodage Paramètres : 2 fonctions de callback pour le traitement de la réponse du service (succès et erreur) 42

43 4 ELÉMENTS COMMUNS Auto-configuration, évolutions, documentation, support 43

44 LES NOUVELLES APIS JS AUTOCONFIGURATION Le SDK et les extensions reposent sur le service d autoconfiguration > Fournit les droits et paramètrages liés à la clef d accès aux géoservices > Accès à ces informations nécessaire à l exécution des fonctions proposées > Par défaut le service d auto-configuration est interrogé à l initialisation Mise en cache de la configuration liée à la clef > Le formulaire suivant permet d obtenir et sauvegarder ces informations localement > Vous pouvez ensuite paramétrer le SDK ou les extensions pour s initialiser avec ces informations 44

45 LES NOUVELLES APIS JS AUTOCONFIGURATION Le SDK et les extensions reposent sur le service d autoconfiguration > Fournit les droits et paramètrages liés à la clef d accès aux géoservices > Accès à ces informations nécessaire à l exécution des fonctions proposées > Par défaut le service d auto-configuration est interrogé à l initialisation Mise en cache de la configuration liée à la clef > Le formulaire suivant permet d obtenir et sauvegarder ces informations localement Gain en performance > Vous pouvez ensuite paramétrer le SDK ou les extensions pour s initialiser avec ces informations 45

46 LES NOUVELLES APIS JS ÉVOLUTIONS Evolutions > Maintenance évolutive : Evolution des navigateurs Evolutions de la plateforme Géoportail (nouvelles ressources) Evolutions des frameworks cibles ou utilisés (OpenLayers, Leaflet,... ) > Rythme trimestriel de mise à jour visé Sauf si bugfix important > Disponibilité dans les dépots NPM Bibliothèque d accès (effectif) Extensions et SDK (à venir) 46

47 LES NOUVELLES APIS JS ÉLÉMENTS COMMUNS Compatibilités navigateurs Les API Javascript sont compatibles avec les navigateurs récents Distribution Disponibles en licence CECILL-B. Non contraignante, simple obligation de citation. 47

48 LES NOUVELLES APIS JS SUPPORT Documentation Sur le site géoservices Documentation développeur (jsdoc) Accès au code source : Github IGNF Galerie d exemples : Galerie du site Géoservices Support Problématiques liées à la contractualisation : contact.geoservices@ign.fr Problématiques liées à l utilisation d une bibliothèque : forum developpez.com Remontées de bugs, contributions : Github IGNF 48

49 DES QUESTIONS? IGN-SHOM