Support de conférence de Stéphane Laurière, Ubimix, présenté le 8 avril 2015 au Campus La Fonderie de l'Image dans le cadre d'un workshop dédié aux enjeux de design et de développement des interfaces cartographiques collaboratives. (Direction : Sylvia Fredriksson, coordination : Anthony Masure et David Prud'homme) Copyright : Stéphane Laurière, Ubimix. 2015.

1. Carte Paris Galaxies
Aspects techniques
Stéphane Laurière
ubimix.com

3. Les outils
de développement

5. https://github.com/benbalter/dc-wifi-social/blob/master/bars.geojson

6. Rendering and diffing images on GitHub

7. Autres outils

8. Les données
et leur traitement

9. Formats JSON / GeoJSON
{
"type": "Feature",
"properties": {
"type": "Spot/Education",
"vignette": "acheres-centre-culturel-dacheres-3.jpg",
"label": "CENTRE CULTUREL D'ACHERES",
"sectors": [ "Education" ],
"description": "L'Espace Jean Cocteau propose de nombreuses activités pour tous les âges ainsi que des
stages.Le CCA vous propose des activités culturelles et créatives pour enfants et adultes.",
"location": "Place Georges Brassensn78260 ACHERESnFrance",
"since": "1969", "time": "41mins",
},
"geometry": {
"type": "Point",
"coordinates": [ 2.075048, 48.9693423 ]
}
}

10. Géocodage des données
Etalab addok
Géocodeur ESRI
Géocodeur Google : attention aux conditions

14. L’application
Paris Galaxies

16. La procédure d’installation
Installation serveur
Dépendances requises :
* NodeJS v0.10.28
* PostgreSQL
* Postgis
* Bower
* NPM
Étapes à suivre une fois ces dépendances installées :
* Cloner le repository : git clone https://github.com/rbwadd/parisgalaxies.git
* Installer les modules NodeJS requis : npm install
* Importer les données dans le serveur de base de données en exécutant les deux scripts 01.
db.rebuild.sh et node ./06.db.import.js du répertoire scripts
* Lancer le serveur web : npm start
Installation des librairies JavaScript de l'application cliente
* Lancer la commande bower install
* Puis ouvrir un navigateur à l'adresse http://localhost:3712/app

17. Le design
cartographique

18. Design de fond de carte
UX de navigation et d’interaction
Design des éléments interactifs

19. Le principe des tuiles carto
Crédits:Mabox-HowWebMapsWork

20. Principes de rendu cartographique
Rendu serveur
Tuiles images
Tuiles vectorielles
Rendu navigateur
Canvas HTML5
SVG

21. CartoCSS / Mapbox Studio

22. CartoCSS / Mapbox Studio

23. dessine-moi-une-ville.makina-corpus.net

24. Stamen.com

25. Mapbox Space Station Style

26. AJ Ashton Pirate Map

27. techonmap.fr

28. Escargot

29. ux.ubimix.com

30. austinmusicmap.com

32. http://fr.slideshare.net/loichay/storymapping

33. Liens
http://googlemapsmania.blogspot.com/
http://stamen.com
http://cartodb.com
http://github.com/ubimix
https://www.mapbox.com/maki/
https://snazzymaps.com/
http://mapstyle.ign.fr/
http://d3js.org/