Carte Paris Galaxies
Aspects techniques
Stéphane Laurière
ubimix.com
Les outils
de développement
https://github.com/benbalter/dc-wifi-social/blob/master/bars.geojson
Rendering and diffing images on GitHub
Autres outils
Les données
et leur traitement
Formats JSON / GeoJSON
{
"type": "Feature",
"properties": {
"type": "Spot/Education",
"vignette": "acheres-centre-culturel...
Géocodage des données
Etalab addok
Géocodeur ESRI
Géocodeur Google : attention aux conditions
L’application
Paris Galaxies
La procédure d’installation
Installation serveur
Dépendances requises :
* NodeJS v0.10.28
* PostgreSQL
* Postgis
* Bower
*...
Le design
cartographique
Design de fond de carte
UX de navigation et d’interaction
Design des éléments interactifs
Le principe des tuiles carto
Crédits:Mabox-HowWebMapsWork
Principes de rendu cartographique
Rendu serveur
Tuiles images
Tuiles vectorielles
Rendu navigateur
Canvas HTML5
SVG
CartoCSS / Mapbox Studio
CartoCSS / Mapbox Studio
dessine-moi-une-ville.makina-corpus.net
Stamen.com
Mapbox Space Station Style
AJ Ashton Pirate Map
techonmap.fr
Escargot
ux.ubimix.com
austinmusicmap.com
http://fr.slideshare.net/loichay/storymapping
Liens
http://googlemapsmania.blogspot.com/
http://stamen.com
http://cartodb.com
http://github.com/ubimix
https://www.mapbo...
Workshop Cartographie Ubimix Paris Galaxies
Workshop Cartographie Ubimix Paris Galaxies
Workshop Cartographie Ubimix Paris Galaxies
Workshop Cartographie Ubimix Paris Galaxies
Workshop Cartographie Ubimix Paris Galaxies
Workshop Cartographie Ubimix Paris Galaxies
Workshop Cartographie Ubimix Paris Galaxies
Prochain SlideShare
Chargement dans…5
×

Workshop Cartographie Ubimix Paris Galaxies

479 vues

Publié le

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.

Publié dans : Internet
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
479
Sur SlideShare
0
Issues des intégrations
0
Intégrations
4
Actions
Partages
0
Téléchargements
3
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Workshop Cartographie Ubimix Paris Galaxies

  1. 1. Carte Paris Galaxies Aspects techniques Stéphane Laurière ubimix.com
  2. 2. Les outils de développement
  3. 3. https://github.com/benbalter/dc-wifi-social/blob/master/bars.geojson
  4. 4. Rendering and diffing images on GitHub
  5. 5. Autres outils
  6. 6. Les données et leur traitement
  7. 7. 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 ] } }
  8. 8. Géocodage des données Etalab addok Géocodeur ESRI Géocodeur Google : attention aux conditions
  9. 9. L’application Paris Galaxies
  10. 10. 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
  11. 11. Le design cartographique
  12. 12. Design de fond de carte UX de navigation et d’interaction Design des éléments interactifs
  13. 13. Le principe des tuiles carto Crédits:Mabox-HowWebMapsWork
  14. 14. Principes de rendu cartographique Rendu serveur Tuiles images Tuiles vectorielles Rendu navigateur Canvas HTML5 SVG
  15. 15. CartoCSS / Mapbox Studio
  16. 16. CartoCSS / Mapbox Studio
  17. 17. dessine-moi-une-ville.makina-corpus.net
  18. 18. Stamen.com
  19. 19. Mapbox Space Station Style
  20. 20. AJ Ashton Pirate Map
  21. 21. techonmap.fr
  22. 22. Escargot
  23. 23. ux.ubimix.com
  24. 24. austinmusicmap.com
  25. 25. http://fr.slideshare.net/loichay/storymapping
  26. 26. 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/

×