workshop cartographie ubimix paris galaxies

Carte Paris GalaxiesAspects techniques

Stéphane Laurièreubimix.com

Les outilsde développement

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

Rendering and diffing images on GitHub

Autres outils

Les donnéeset leur traitement

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 ]

}

}

Géocodage des données

Etalab addokGéocodeur ESRIGéocodeur Google : attention aux conditions

L’applicationParis 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

Le designcartographique

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

Le principe des tuiles carto Cré

dit

s : M

abo

x - H

ow

Web

Map

s W

ork

Principes de rendu cartographique

Rendu serveurTuiles imagesTuiles vectorielles

Rendu navigateurCanvas 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.comhttp://cartodb.comhttp://github.com/ubimixhttps://www.mapbox.com/maki/https://snazzymaps.com/http://mapstyle.ign.fr/http://d3js.org/