New age mapping components library.

1. Ngeo
New age mapping components library
Florent Gravin • 08.05.2017

2. Agenda
● Présentation ngeo
○ Présentation conceptuelle
○ Présentation technique
○ Demo des exemples
● Ngeo et geOrchestra
○ Etat des lieux
○ Les enjeux et les challenges de l’intégration
● Présentation GeoMapfish
● Proposition de roadmap

3. Historique, cheminement
1. Rappel des besoins
a. Site web cartographique responsive (desktop/tablet/smartphone)
b. Fonctionnalités carto hyper performantes (mobile)
c. Fonctionnalités SIG
d. Affichage 2D/3D
2. Démarche open source
a. Partager une librairie avec un maximum de projets/utilisateurs
b. Modularité, Souplesse et adaptivité à des projets spécifiques
c. Solidité de l’architecture, des tests et du workflow de développement pour récolter des
contributions
3. Choix effectués
a. OpenLayers, AngularJS, CesiumJS
b. Ngeo: 4000 commits, 27 contributeurs, 40 exemples fonctionnels

4. Ngeo
Librairie javascript Open Source
pour le développement
d’applications cartographiques
Modernité
● Technologies récentes
● Design moderne
Modularité
Déclinaison en niveaux de complexité
Responsive
Intégration dans des sites partenaires

5. Ngeo - Choix technologiques
Openlayers
● La plus complète des librairies carto
OpenSource
● Performante
● Communauté très active
AngularJS
● Superheroic javascript Framework
● Communauté massive
● Développé par Google

6. Ngeo: la philosophie
● Toolkit
● Composants atomiques
● Abstraction de la UI
● Librairie non intrusive
● Approche impérative
● Guidelines pour le développement AngularJs/Openlayers
● A jour avec les conventions Openlayers

7. Ngeo
L’architecture
Organisation du code
Compilation avancée
Exemples
Tests
Documentation
Guidelines

8. Ngeo: l’architecture
/src Directives, controllers, modules, externs
/test Tests des composants (karma, jasmine, phantomJs)
/examples Examples compilés
/contribs Contributions métiers
/jsdoc Documentation
Coeur buildé avec Closure Compiler
● Architecture évolutive pour suivre les tendances de l’écosystèmes javascript
● Perspectives de compatibilité modules ES6

9. Ngeo: la librairie
Services
● Gestionnaire couche de fond
● Decorateurs
● Permalien
● Impression
● ...
Directives
● Arbre des couches
● Géolocalisation
● Recherche
● Dessin
● ...
Fournit des composants coeurs pour la construction d’applications
cartographiques.

10. Ngeo: usage
controller.js
// Create the map
this.map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})],
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
//Fetch the layer tree
this.tree = $http.get(layertreeUrl);
view.html
<div ngeo-map="$ctrl.map"></div>
<div ngeo-layertree="$ctrl.tree"
ngeo-layertree-map="$ctrl.map">
</div>

11. Des exemples
https://camptocamp.github.io/ngeo/master/examples/

12. Gmf
Participation de la communauté
GeoMapfish dans Ngeo
Section contribution spécifique
Niveau de finition supérieur
Nouveaux services & directives
Composants clés en main
Templates d’application
● Mobile
● Desktop

13. Des exemples
https://camptocamp.github.io/ngeo/master/examples/contribs/gmf/
Dessin - Impression - Thèmes - Profile

14. Les templates
Desktop - Mobile

15. geOrchestra
Visualisation des données
géographiques
Plusieurs solutions proposées
● Non uniformité des technologies
utilisées
● Cibles & directions diverses
● Communautés différentes
Quels sont les besoin d’aujourd’hui ?
● Responsive
● Performance
● Modularité, configuration
Les besoins de demain ?
● Intégration 2D/3D
● Tuiles LIDAR
● Tuiles vecteur

16. Webmapping dans geOrchestra 16.12
Mapfishapp
● ExtJs
● GeoExt
● Openlayers2
● Look ancien
● Pas responsive
● Expert mode
Sviewer
● Jquery Mobile
● Openlayers3
● Très simple
● Non modulaire
Mviewer
● Jquery
● Openlayers 3
● Bootstrap
● Spécifique
● Communauté ?

17. geOrchestra: les attentes
Besoins utilisateurs
● Modernité
● Performance
● Plusieurs supports
Besoins administrateurs
● Modularité (déclinaison, configuration)
● Customisation (contribution, personnalisation)
● Intégration dans des sites partenaires

18. Ngeo &
geOrchestra
Intégration / convergence
Une librairie qui couvre déjà une
grande partie des fonctionnalités de
mapfishapp.
Une seule solution pour des
applications à la carte
● Support
● Complexité
● Applications métiers

19. La bibliothèque
● Composants coeur geOrchestra
● Composants métier
● Composants contributeurs
● Différents niveaux d’intégration (à partir du coeur de ngeo ou de composants plus élaborés)
Les applications
● Templates coeur pour différents support (desktop, mobile..)
● Déclinaison en niveau de complexité (expert, simple)
● Configuration et personnalisation
● Applications métiers annexes basées sur les mêmes composants
Ngeo & geOrchestra

20. Intégration sites partenaires
Api
● Pour quel public ?
● Difficile à maintenir
Iframe
● Pas de code, pas de maintenance
● Communication possible iframe/page source.
● Différents templates
● Exemple

21. http://basel-debug.camptocamp.net/mkuenzli/wsgi/static-ngeo/0/examples/

23. Ngeo: Les contributions
Plateformes nationales
● Suisse
● Luxembourg
Solutions Open Source
● Geonetwork
● GeoMapFish
Sites & portails
● Camptocamp
● Swissalpine

24. Intégration itérative et progressive
● Mise en place de l’architecture, intégration de ngeo dans geOrchestra.
● Livraison d’une application épurée (viewer simple mobile).
● Développement de nouveaux composants et templates plus complets
● Templates d’application niveau mapfishapp
Intégration: proposition de roadmap

25. Intégration dans
geOrchestra
ngeo/contribs/georchestra ?
Ngeo
https://github.com/camptocamp/ngeo
Florent Gravin
florent.gravin@camptocamp.com