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

Workshop Cartographie Ubimix Paris Galaxies

Embed Size (px)

Citation preview

Page 1: Workshop Cartographie Ubimix Paris Galaxies

Carte Paris GalaxiesAspects techniques

Stéphane Laurièreubimix.com

Page 2: Workshop Cartographie Ubimix Paris Galaxies
Page 3: Workshop Cartographie Ubimix Paris Galaxies

Les outilsde développement

Page 4: Workshop Cartographie Ubimix Paris Galaxies
Page 5: Workshop Cartographie Ubimix Paris Galaxies

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

Page 7: Workshop Cartographie Ubimix Paris Galaxies

Autres outils

Page 8: Workshop Cartographie Ubimix Paris Galaxies

Les donnéeset leur traitement

Page 9: Workshop Cartographie Ubimix Paris Galaxies

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 Brassens\n78260 ACHERES\nFrance",

"since": "1969", "time": "41mins",

},

"geometry": {

"type": "Point",

"coordinates": [ 2.075048, 48.9693423 ]

}

}

Page 11: Workshop Cartographie Ubimix Paris Galaxies
Page 12: Workshop Cartographie Ubimix Paris Galaxies
Page 13: Workshop Cartographie Ubimix Paris Galaxies
Page 14: Workshop Cartographie Ubimix Paris Galaxies

L’applicationParis Galaxies

Page 15: Workshop Cartographie Ubimix Paris Galaxies
Page 16: Workshop Cartographie Ubimix Paris Galaxies

La procédure d’installationInstallation 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

Page 17: Workshop Cartographie Ubimix Paris Galaxies

Le designcartographique

Page 18: Workshop Cartographie Ubimix Paris Galaxies

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

Page 19: Workshop Cartographie Ubimix Paris Galaxies

Le principe des tuiles carto Cré

dit

s : M

abo

x - H

ow

Web

Map

s W

ork

Page 20: Workshop Cartographie Ubimix Paris Galaxies

Principes de rendu cartographique

Rendu serveurTuiles imagesTuiles vectorielles

Rendu navigateurCanvas HTML5

SVG

Page 21: Workshop Cartographie Ubimix Paris Galaxies

CartoCSS / Mapbox Studio

Page 22: Workshop Cartographie Ubimix Paris Galaxies

CartoCSS / Mapbox Studio

Page 23: Workshop Cartographie Ubimix Paris Galaxies

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

Page 24: Workshop Cartographie Ubimix Paris Galaxies

Stamen.com

Page 25: Workshop Cartographie Ubimix Paris Galaxies

Mapbox Space Station Style

Page 26: Workshop Cartographie Ubimix Paris Galaxies

AJ Ashton Pirate Map

Page 27: Workshop Cartographie Ubimix Paris Galaxies

techonmap.fr

Page 28: Workshop Cartographie Ubimix Paris Galaxies

Escargot

Page 29: Workshop Cartographie Ubimix Paris Galaxies

ux.ubimix.com

Page 30: Workshop Cartographie Ubimix Paris Galaxies

austinmusicmap.com

Page 31: Workshop Cartographie Ubimix Paris Galaxies
Page 32: Workshop Cartographie Ubimix Paris Galaxies

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