La cartographie WEB Avec JavaScriptigm.univ-mlv.fr/~dr/XPOSE2014/LaCartographieWebAvec...•Besoin...

28
LA CARTOGRAPHIE WEB AVEC JAVASCRIPT MAXIME DESHAGETTE IG3

Transcript of La cartographie WEB Avec JavaScriptigm.univ-mlv.fr/~dr/XPOSE2014/LaCartographieWebAvec...•Besoin...

Page 1: La cartographie WEB Avec JavaScriptigm.univ-mlv.fr/~dr/XPOSE2014/LaCartographieWebAvec...•Besoin d’HTML, CSS et Javascript + serveur, base de données 15 *WMS : Web Map Services

LA CARTOGRAPHIE WEBAVEC JAVASCRIPT

MAXIME DESHAGETTE IG3

Page 2: La cartographie WEB Avec JavaScriptigm.univ-mlv.fr/~dr/XPOSE2014/LaCartographieWebAvec...•Besoin d’HTML, CSS et Javascript + serveur, base de données 15 *WMS : Web Map Services

SOMMAIRE

• Introduction

• I. Présentation de la cartographie (web) et des APIs

• II. L’API Leaflet

• III. Processus de création de carte

• Conclusion

2

Page 3: La cartographie WEB Avec JavaScriptigm.univ-mlv.fr/~dr/XPOSE2014/LaCartographieWebAvec...•Besoin d’HTML, CSS et Javascript + serveur, base de données 15 *WMS : Web Map Services

INTRODUCTION

I. PRÉSENTATION DE LA CARTOGRAPHIE ET DES APIS

II. LEAFLET

III. CRÉATION D’UNE CARTE

CONCLUSION

3

Page 4: La cartographie WEB Avec JavaScriptigm.univ-mlv.fr/~dr/XPOSE2014/LaCartographieWebAvec...•Besoin d’HTML, CSS et Javascript + serveur, base de données 15 *WMS : Web Map Services

INTRODUCTION

• Cartographie en général

• Cartographie WEB

• La géomatique et la SIG*

• Les APIs Javascript

• Détails de leaflet

• Le processus de création

4

*SIG : Système d’Information Géographique

Page 5: La cartographie WEB Avec JavaScriptigm.univ-mlv.fr/~dr/XPOSE2014/LaCartographieWebAvec...•Besoin d’HTML, CSS et Javascript + serveur, base de données 15 *WMS : Web Map Services

INTRODUCTION

I. PRÉSENTATION DE LA CARTOGRAPHIE ET DES APIS

II. LEAFLET

III. CRÉATION D’UNE CARTE

CONCLUSION

5

Page 6: La cartographie WEB Avec JavaScriptigm.univ-mlv.fr/~dr/XPOSE2014/LaCartographieWebAvec...•Besoin d’HTML, CSS et Javascript + serveur, base de données 15 *WMS : Web Map Services

I.I LA CARTOGRAPHIE EN GÉNÉRAL

• Définition :

• Représentation d’une ou plusieurs données sur un support

• Procédé :

• Création du support (fond de carte)

• Récolte des données

• Elaboration du style de la carte (icones, couleurs, légendes…)

6

Page 7: La cartographie WEB Avec JavaScriptigm.univ-mlv.fr/~dr/XPOSE2014/LaCartographieWebAvec...•Besoin d’HTML, CSS et Javascript + serveur, base de données 15 *WMS : Web Map Services

I.II LA CARTOGRAPHIE WEB (OU WEBMAPPING)

• Trois composantes :

• Le client

• Les données

• Le serveur

• Deux principaux protagonistes

• OGC (Open Geospatial Consortium)

• OSGEO (Open Source Geospatial Foundation)

7

Page 8: La cartographie WEB Avec JavaScriptigm.univ-mlv.fr/~dr/XPOSE2014/LaCartographieWebAvec...•Besoin d’HTML, CSS et Javascript + serveur, base de données 15 *WMS : Web Map Services

I.III LES APIS JAVASCRIPT

• API : Application Program Interface

• Basé sur HTML et Javascirpt

• FOSS : Free Open Source Software

• Open Layers

• Leaflet

• D3

• Propriétaire :

• Google Maps

• ArcGis8

Page 9: La cartographie WEB Avec JavaScriptigm.univ-mlv.fr/~dr/XPOSE2014/LaCartographieWebAvec...•Besoin d’HTML, CSS et Javascript + serveur, base de données 15 *WMS : Web Map Services

I.III LES APIS JAVASCRIPT (OPEN LAYERS)

9

• Création d’applications cartographique web

• De nombreux exemples et documentations

• Grand communauté d’utilisateurs de l’API

• Nombreuses possibilités

• http://openlayers.org/

Page 10: La cartographie WEB Avec JavaScriptigm.univ-mlv.fr/~dr/XPOSE2014/LaCartographieWebAvec...•Besoin d’HTML, CSS et Javascript + serveur, base de données 15 *WMS : Web Map Services

I.III LES APIS JAVASCRIPT (LEAFLET)

• Nouvelle API javascript

• Légère, « mobile friendly » et facile de prise en main

• API complète mais très peu d’exemple d’utilisation

• http://leafletjs.com/

10

Page 11: La cartographie WEB Avec JavaScriptigm.univ-mlv.fr/~dr/XPOSE2014/LaCartographieWebAvec...•Besoin d’HTML, CSS et Javascript + serveur, base de données 15 *WMS : Web Map Services

I.III LES APIS JAVASCRIPT (D3)

• D3 : Data Driven Documents

• Librairie de visualisation de données (graphique et carte)

• Animation et transition

• Prise en main guidée

• Application web interactive

• http://d3js.org/

11

Page 12: La cartographie WEB Avec JavaScriptigm.univ-mlv.fr/~dr/XPOSE2014/LaCartographieWebAvec...•Besoin d’HTML, CSS et Javascript + serveur, base de données 15 *WMS : Web Map Services

I.III LES APIS JAVASCRIPT (GOOGLE MAPS)

• Ajout de données sur fond de google maps

• Export de fichier (format kml, kmz…)

• Familiarité avec google maps

• https://developers.google.com

/maps/documentation/javascript/

12

Page 13: La cartographie WEB Avec JavaScriptigm.univ-mlv.fr/~dr/XPOSE2014/LaCartographieWebAvec...•Besoin d’HTML, CSS et Javascript + serveur, base de données 15 *WMS : Web Map Services

I.III LES APIS JAVASCRIPT (ARCGIS)

• Crée par ESRI

• Optimisé pour les produits ESRI

• Multi langage et multi plateforme

• https://developers.arcgis.com/javascript/

13

Page 14: La cartographie WEB Avec JavaScriptigm.univ-mlv.fr/~dr/XPOSE2014/LaCartographieWebAvec...•Besoin d’HTML, CSS et Javascript + serveur, base de données 15 *WMS : Web Map Services

INTRODUCTION

I. PRÉSENTATION DE LA CARTOGRAPHIE ET DES APIS

II. LEAFLET

III. CRÉATION D’UNE CARTE

CONCLUSION

14

Page 15: La cartographie WEB Avec JavaScriptigm.univ-mlv.fr/~dr/XPOSE2014/LaCartographieWebAvec...•Besoin d’HTML, CSS et Javascript + serveur, base de données 15 *WMS : Web Map Services

II.I LEAFLET ?

• Nouvelle API Javascript (juin 2013)

• « Mobile friendly » et simple de prise en main

• Utilisation du format GeoJSON et vecteurs,

WMS

• Besoin d’HTML, CSS et Javascript + serveur, base de données

15

*WMS : Web Map Services

Page 16: La cartographie WEB Avec JavaScriptigm.univ-mlv.fr/~dr/XPOSE2014/LaCartographieWebAvec...•Besoin d’HTML, CSS et Javascript + serveur, base de données 15 *WMS : Web Map Services

II.II QUI L’UTILISE ?

• Cartographie libre de type Open Street Map

• Foursquare

• IGN

• City-data

16

Page 17: La cartographie WEB Avec JavaScriptigm.univ-mlv.fr/~dr/XPOSE2014/LaCartographieWebAvec...•Besoin d’HTML, CSS et Javascript + serveur, base de données 15 *WMS : Web Map Services

II.III QUELLES FONCTIONNALITÉS ?

• Chargement de fichier

• Gestion de plusieurs layers

17

Page 18: La cartographie WEB Avec JavaScriptigm.univ-mlv.fr/~dr/XPOSE2014/LaCartographieWebAvec...•Besoin d’HTML, CSS et Javascript + serveur, base de données 15 *WMS : Web Map Services

II.III QUELLES FONCTIONNALITÉS ?

• Edition du layers en direct (ligne, point, cercle, polygone…)

• Recherche géographique

18

Page 19: La cartographie WEB Avec JavaScriptigm.univ-mlv.fr/~dr/XPOSE2014/LaCartographieWebAvec...•Besoin d’HTML, CSS et Javascript + serveur, base de données 15 *WMS : Web Map Services

II.III QUELLES FONCTIONNALITÉS ?

• Exemple : Activité sismique en aout 2013 en Nouvelle Zélande

19

Page 20: La cartographie WEB Avec JavaScriptigm.univ-mlv.fr/~dr/XPOSE2014/LaCartographieWebAvec...•Besoin d’HTML, CSS et Javascript + serveur, base de données 15 *WMS : Web Map Services

INTRODUCTION

I. PRÉSENTATION DE LA CARTOGRAPHIE ET DES APIS

II. LEAFLET

III. CRÉATION D’UNE CARTE

CONCLUSION

20

Page 21: La cartographie WEB Avec JavaScriptigm.univ-mlv.fr/~dr/XPOSE2014/LaCartographieWebAvec...•Besoin d’HTML, CSS et Javascript + serveur, base de données 15 *WMS : Web Map Services

1ÈRE ÉTAPE

21

Page 22: La cartographie WEB Avec JavaScriptigm.univ-mlv.fr/~dr/XPOSE2014/LaCartographieWebAvec...•Besoin d’HTML, CSS et Javascript + serveur, base de données 15 *WMS : Web Map Services

2ÈME ÉTAPE

22

Page 23: La cartographie WEB Avec JavaScriptigm.univ-mlv.fr/~dr/XPOSE2014/LaCartographieWebAvec...•Besoin d’HTML, CSS et Javascript + serveur, base de données 15 *WMS : Web Map Services

3ÈME ÉTAPE

23

Page 24: La cartographie WEB Avec JavaScriptigm.univ-mlv.fr/~dr/XPOSE2014/LaCartographieWebAvec...•Besoin d’HTML, CSS et Javascript + serveur, base de données 15 *WMS : Web Map Services

4ÈME ÉTAPE

24

Page 25: La cartographie WEB Avec JavaScriptigm.univ-mlv.fr/~dr/XPOSE2014/LaCartographieWebAvec...•Besoin d’HTML, CSS et Javascript + serveur, base de données 15 *WMS : Web Map Services

5ÈME ÉTAPE

25

Page 26: La cartographie WEB Avec JavaScriptigm.univ-mlv.fr/~dr/XPOSE2014/LaCartographieWebAvec...•Besoin d’HTML, CSS et Javascript + serveur, base de données 15 *WMS : Web Map Services

Démonstration

26

Page 27: La cartographie WEB Avec JavaScriptigm.univ-mlv.fr/~dr/XPOSE2014/LaCartographieWebAvec...•Besoin d’HTML, CSS et Javascript + serveur, base de données 15 *WMS : Web Map Services

INTRODUCTION

I. PRÉSENTATION DE LA CARTOGRAPHIE ET DES APIS

II. LEAFLET

III. CRÉATION D’UNE CARTE

CONCLUSION

27

Page 28: La cartographie WEB Avec JavaScriptigm.univ-mlv.fr/~dr/XPOSE2014/LaCartographieWebAvec...•Besoin d’HTML, CSS et Javascript + serveur, base de données 15 *WMS : Web Map Services

Merci de votre

Attention !

28