workshop cartographie ubimix paris galaxies
TRANSCRIPT
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/