la cartographie web avec javascript - igmdr/xpose2014/lacartographiewebavec... · 2015-03-08 ·...
TRANSCRIPT
![Page 1: La cartographie WEB Avec JavaScript - IGMdr/XPOSE2014/LaCartographieWebAvec... · 2015-03-08 · •Nouvelle API Javascript (juin 2013) •« Mobile friendly » et simple de prise](https://reader030.vdocuments.site/reader030/viewer/2022041102/5edf756fad6a402d666ace3a/html5/thumbnails/1.jpg)
LA CARTOGRAPHIE WEBAVEC JAVASCRIPT
MAXIME DESHAGETTE IG3
![Page 2: La cartographie WEB Avec JavaScript - IGMdr/XPOSE2014/LaCartographieWebAvec... · 2015-03-08 · •Nouvelle API Javascript (juin 2013) •« Mobile friendly » et simple de prise](https://reader030.vdocuments.site/reader030/viewer/2022041102/5edf756fad6a402d666ace3a/html5/thumbnails/2.jpg)
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 JavaScript - IGMdr/XPOSE2014/LaCartographieWebAvec... · 2015-03-08 · •Nouvelle API Javascript (juin 2013) •« Mobile friendly » et simple de prise](https://reader030.vdocuments.site/reader030/viewer/2022041102/5edf756fad6a402d666ace3a/html5/thumbnails/3.jpg)
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 JavaScript - IGMdr/XPOSE2014/LaCartographieWebAvec... · 2015-03-08 · •Nouvelle API Javascript (juin 2013) •« Mobile friendly » et simple de prise](https://reader030.vdocuments.site/reader030/viewer/2022041102/5edf756fad6a402d666ace3a/html5/thumbnails/4.jpg)
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 JavaScript - IGMdr/XPOSE2014/LaCartographieWebAvec... · 2015-03-08 · •Nouvelle API Javascript (juin 2013) •« Mobile friendly » et simple de prise](https://reader030.vdocuments.site/reader030/viewer/2022041102/5edf756fad6a402d666ace3a/html5/thumbnails/5.jpg)
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 JavaScript - IGMdr/XPOSE2014/LaCartographieWebAvec... · 2015-03-08 · •Nouvelle API Javascript (juin 2013) •« Mobile friendly » et simple de prise](https://reader030.vdocuments.site/reader030/viewer/2022041102/5edf756fad6a402d666ace3a/html5/thumbnails/6.jpg)
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 JavaScript - IGMdr/XPOSE2014/LaCartographieWebAvec... · 2015-03-08 · •Nouvelle API Javascript (juin 2013) •« Mobile friendly » et simple de prise](https://reader030.vdocuments.site/reader030/viewer/2022041102/5edf756fad6a402d666ace3a/html5/thumbnails/7.jpg)
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 JavaScript - IGMdr/XPOSE2014/LaCartographieWebAvec... · 2015-03-08 · •Nouvelle API Javascript (juin 2013) •« Mobile friendly » et simple de prise](https://reader030.vdocuments.site/reader030/viewer/2022041102/5edf756fad6a402d666ace3a/html5/thumbnails/8.jpg)
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 JavaScript - IGMdr/XPOSE2014/LaCartographieWebAvec... · 2015-03-08 · •Nouvelle API Javascript (juin 2013) •« Mobile friendly » et simple de prise](https://reader030.vdocuments.site/reader030/viewer/2022041102/5edf756fad6a402d666ace3a/html5/thumbnails/9.jpg)
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 JavaScript - IGMdr/XPOSE2014/LaCartographieWebAvec... · 2015-03-08 · •Nouvelle API Javascript (juin 2013) •« Mobile friendly » et simple de prise](https://reader030.vdocuments.site/reader030/viewer/2022041102/5edf756fad6a402d666ace3a/html5/thumbnails/10.jpg)
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 JavaScript - IGMdr/XPOSE2014/LaCartographieWebAvec... · 2015-03-08 · •Nouvelle API Javascript (juin 2013) •« Mobile friendly » et simple de prise](https://reader030.vdocuments.site/reader030/viewer/2022041102/5edf756fad6a402d666ace3a/html5/thumbnails/11.jpg)
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 JavaScript - IGMdr/XPOSE2014/LaCartographieWebAvec... · 2015-03-08 · •Nouvelle API Javascript (juin 2013) •« Mobile friendly » et simple de prise](https://reader030.vdocuments.site/reader030/viewer/2022041102/5edf756fad6a402d666ace3a/html5/thumbnails/12.jpg)
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 JavaScript - IGMdr/XPOSE2014/LaCartographieWebAvec... · 2015-03-08 · •Nouvelle API Javascript (juin 2013) •« Mobile friendly » et simple de prise](https://reader030.vdocuments.site/reader030/viewer/2022041102/5edf756fad6a402d666ace3a/html5/thumbnails/13.jpg)
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 JavaScript - IGMdr/XPOSE2014/LaCartographieWebAvec... · 2015-03-08 · •Nouvelle API Javascript (juin 2013) •« Mobile friendly » et simple de prise](https://reader030.vdocuments.site/reader030/viewer/2022041102/5edf756fad6a402d666ace3a/html5/thumbnails/14.jpg)
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 JavaScript - IGMdr/XPOSE2014/LaCartographieWebAvec... · 2015-03-08 · •Nouvelle API Javascript (juin 2013) •« Mobile friendly » et simple de prise](https://reader030.vdocuments.site/reader030/viewer/2022041102/5edf756fad6a402d666ace3a/html5/thumbnails/15.jpg)
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 JavaScript - IGMdr/XPOSE2014/LaCartographieWebAvec... · 2015-03-08 · •Nouvelle API Javascript (juin 2013) •« Mobile friendly » et simple de prise](https://reader030.vdocuments.site/reader030/viewer/2022041102/5edf756fad6a402d666ace3a/html5/thumbnails/16.jpg)
II.II QUI L’UTILISE ?
• Cartographie libre de type Open Street Map
• Foursquare
• IGN
• City-data
16
![Page 17: La cartographie WEB Avec JavaScript - IGMdr/XPOSE2014/LaCartographieWebAvec... · 2015-03-08 · •Nouvelle API Javascript (juin 2013) •« Mobile friendly » et simple de prise](https://reader030.vdocuments.site/reader030/viewer/2022041102/5edf756fad6a402d666ace3a/html5/thumbnails/17.jpg)
II.III QUELLES FONCTIONNALITÉS ?
• Chargement de fichier
• Gestion de plusieurs layers
17
![Page 18: La cartographie WEB Avec JavaScript - IGMdr/XPOSE2014/LaCartographieWebAvec... · 2015-03-08 · •Nouvelle API Javascript (juin 2013) •« Mobile friendly » et simple de prise](https://reader030.vdocuments.site/reader030/viewer/2022041102/5edf756fad6a402d666ace3a/html5/thumbnails/18.jpg)
II.III QUELLES FONCTIONNALITÉS ?
• Edition du layers en direct (ligne, point, cercle, polygone…)
• Recherche géographique
18
![Page 19: La cartographie WEB Avec JavaScript - IGMdr/XPOSE2014/LaCartographieWebAvec... · 2015-03-08 · •Nouvelle API Javascript (juin 2013) •« Mobile friendly » et simple de prise](https://reader030.vdocuments.site/reader030/viewer/2022041102/5edf756fad6a402d666ace3a/html5/thumbnails/19.jpg)
II.III QUELLES FONCTIONNALITÉS ?
• Exemple : Activité sismique en aout 2013 en Nouvelle Zélande
19
![Page 20: La cartographie WEB Avec JavaScript - IGMdr/XPOSE2014/LaCartographieWebAvec... · 2015-03-08 · •Nouvelle API Javascript (juin 2013) •« Mobile friendly » et simple de prise](https://reader030.vdocuments.site/reader030/viewer/2022041102/5edf756fad6a402d666ace3a/html5/thumbnails/20.jpg)
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 JavaScript - IGMdr/XPOSE2014/LaCartographieWebAvec... · 2015-03-08 · •Nouvelle API Javascript (juin 2013) •« Mobile friendly » et simple de prise](https://reader030.vdocuments.site/reader030/viewer/2022041102/5edf756fad6a402d666ace3a/html5/thumbnails/21.jpg)
1ÈRE ÉTAPE
21
![Page 22: La cartographie WEB Avec JavaScript - IGMdr/XPOSE2014/LaCartographieWebAvec... · 2015-03-08 · •Nouvelle API Javascript (juin 2013) •« Mobile friendly » et simple de prise](https://reader030.vdocuments.site/reader030/viewer/2022041102/5edf756fad6a402d666ace3a/html5/thumbnails/22.jpg)
2ÈME ÉTAPE
22
![Page 23: La cartographie WEB Avec JavaScript - IGMdr/XPOSE2014/LaCartographieWebAvec... · 2015-03-08 · •Nouvelle API Javascript (juin 2013) •« Mobile friendly » et simple de prise](https://reader030.vdocuments.site/reader030/viewer/2022041102/5edf756fad6a402d666ace3a/html5/thumbnails/23.jpg)
3ÈME ÉTAPE
23
![Page 24: La cartographie WEB Avec JavaScript - IGMdr/XPOSE2014/LaCartographieWebAvec... · 2015-03-08 · •Nouvelle API Javascript (juin 2013) •« Mobile friendly » et simple de prise](https://reader030.vdocuments.site/reader030/viewer/2022041102/5edf756fad6a402d666ace3a/html5/thumbnails/24.jpg)
4ÈME ÉTAPE
24
![Page 25: La cartographie WEB Avec JavaScript - IGMdr/XPOSE2014/LaCartographieWebAvec... · 2015-03-08 · •Nouvelle API Javascript (juin 2013) •« Mobile friendly » et simple de prise](https://reader030.vdocuments.site/reader030/viewer/2022041102/5edf756fad6a402d666ace3a/html5/thumbnails/25.jpg)
5ÈME ÉTAPE
25
![Page 27: La cartographie WEB Avec JavaScript - IGMdr/XPOSE2014/LaCartographieWebAvec... · 2015-03-08 · •Nouvelle API Javascript (juin 2013) •« Mobile friendly » et simple de prise](https://reader030.vdocuments.site/reader030/viewer/2022041102/5edf756fad6a402d666ace3a/html5/thumbnails/27.jpg)
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 JavaScript - IGMdr/XPOSE2014/LaCartographieWebAvec... · 2015-03-08 · •Nouvelle API Javascript (juin 2013) •« Mobile friendly » et simple de prise](https://reader030.vdocuments.site/reader030/viewer/2022041102/5edf756fad6a402d666ace3a/html5/thumbnails/28.jpg)
Merci de votre
Attention !
28