workshop cartographie ubimix paris galaxies
TRANSCRIPT
![Page 1: Workshop Cartographie Ubimix Paris Galaxies](https://reader031.vdocuments.us/reader031/viewer/2022032715/55ad11271a28abdb358b4604/html5/thumbnails/1.jpg)
Carte Paris GalaxiesAspects techniques
Stéphane Laurièreubimix.com
![Page 2: Workshop Cartographie Ubimix Paris Galaxies](https://reader031.vdocuments.us/reader031/viewer/2022032715/55ad11271a28abdb358b4604/html5/thumbnails/2.jpg)
![Page 3: Workshop Cartographie Ubimix Paris Galaxies](https://reader031.vdocuments.us/reader031/viewer/2022032715/55ad11271a28abdb358b4604/html5/thumbnails/3.jpg)
Les outilsde développement
![Page 4: Workshop Cartographie Ubimix Paris Galaxies](https://reader031.vdocuments.us/reader031/viewer/2022032715/55ad11271a28abdb358b4604/html5/thumbnails/4.jpg)
![Page 5: Workshop Cartographie Ubimix Paris Galaxies](https://reader031.vdocuments.us/reader031/viewer/2022032715/55ad11271a28abdb358b4604/html5/thumbnails/5.jpg)
https://github.com/benbalter/dc-wifi-social/blob/master/bars.geojson
![Page 6: Workshop Cartographie Ubimix Paris Galaxies](https://reader031.vdocuments.us/reader031/viewer/2022032715/55ad11271a28abdb358b4604/html5/thumbnails/6.jpg)
Rendering and diffing images on GitHub
![Page 7: Workshop Cartographie Ubimix Paris Galaxies](https://reader031.vdocuments.us/reader031/viewer/2022032715/55ad11271a28abdb358b4604/html5/thumbnails/7.jpg)
Autres outils
![Page 8: Workshop Cartographie Ubimix Paris Galaxies](https://reader031.vdocuments.us/reader031/viewer/2022032715/55ad11271a28abdb358b4604/html5/thumbnails/8.jpg)
Les donnéeset leur traitement
![Page 9: Workshop Cartographie Ubimix Paris Galaxies](https://reader031.vdocuments.us/reader031/viewer/2022032715/55ad11271a28abdb358b4604/html5/thumbnails/9.jpg)
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 10: Workshop Cartographie Ubimix Paris Galaxies](https://reader031.vdocuments.us/reader031/viewer/2022032715/55ad11271a28abdb358b4604/html5/thumbnails/10.jpg)
Géocodage des données
Etalab addokGéocodeur ESRIGéocodeur Google : attention aux conditions
![Page 11: Workshop Cartographie Ubimix Paris Galaxies](https://reader031.vdocuments.us/reader031/viewer/2022032715/55ad11271a28abdb358b4604/html5/thumbnails/11.jpg)
![Page 12: Workshop Cartographie Ubimix Paris Galaxies](https://reader031.vdocuments.us/reader031/viewer/2022032715/55ad11271a28abdb358b4604/html5/thumbnails/12.jpg)
![Page 13: Workshop Cartographie Ubimix Paris Galaxies](https://reader031.vdocuments.us/reader031/viewer/2022032715/55ad11271a28abdb358b4604/html5/thumbnails/13.jpg)
![Page 14: Workshop Cartographie Ubimix Paris Galaxies](https://reader031.vdocuments.us/reader031/viewer/2022032715/55ad11271a28abdb358b4604/html5/thumbnails/14.jpg)
L’applicationParis Galaxies
![Page 15: Workshop Cartographie Ubimix Paris Galaxies](https://reader031.vdocuments.us/reader031/viewer/2022032715/55ad11271a28abdb358b4604/html5/thumbnails/15.jpg)
![Page 16: Workshop Cartographie Ubimix Paris Galaxies](https://reader031.vdocuments.us/reader031/viewer/2022032715/55ad11271a28abdb358b4604/html5/thumbnails/16.jpg)
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](https://reader031.vdocuments.us/reader031/viewer/2022032715/55ad11271a28abdb358b4604/html5/thumbnails/17.jpg)
Le designcartographique
![Page 18: Workshop Cartographie Ubimix Paris Galaxies](https://reader031.vdocuments.us/reader031/viewer/2022032715/55ad11271a28abdb358b4604/html5/thumbnails/18.jpg)
Design de fond de carte UX de navigation et d’interaction Design des éléments interactifs
![Page 19: Workshop Cartographie Ubimix Paris Galaxies](https://reader031.vdocuments.us/reader031/viewer/2022032715/55ad11271a28abdb358b4604/html5/thumbnails/19.jpg)
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](https://reader031.vdocuments.us/reader031/viewer/2022032715/55ad11271a28abdb358b4604/html5/thumbnails/20.jpg)
Principes de rendu cartographique
Rendu serveurTuiles imagesTuiles vectorielles
Rendu navigateurCanvas HTML5
SVG
![Page 21: Workshop Cartographie Ubimix Paris Galaxies](https://reader031.vdocuments.us/reader031/viewer/2022032715/55ad11271a28abdb358b4604/html5/thumbnails/21.jpg)
CartoCSS / Mapbox Studio
![Page 22: Workshop Cartographie Ubimix Paris Galaxies](https://reader031.vdocuments.us/reader031/viewer/2022032715/55ad11271a28abdb358b4604/html5/thumbnails/22.jpg)
CartoCSS / Mapbox Studio
![Page 23: Workshop Cartographie Ubimix Paris Galaxies](https://reader031.vdocuments.us/reader031/viewer/2022032715/55ad11271a28abdb358b4604/html5/thumbnails/23.jpg)
dessine-moi-une-ville.makina-corpus.net
![Page 24: Workshop Cartographie Ubimix Paris Galaxies](https://reader031.vdocuments.us/reader031/viewer/2022032715/55ad11271a28abdb358b4604/html5/thumbnails/24.jpg)
Stamen.com
![Page 25: Workshop Cartographie Ubimix Paris Galaxies](https://reader031.vdocuments.us/reader031/viewer/2022032715/55ad11271a28abdb358b4604/html5/thumbnails/25.jpg)
Mapbox Space Station Style
![Page 26: Workshop Cartographie Ubimix Paris Galaxies](https://reader031.vdocuments.us/reader031/viewer/2022032715/55ad11271a28abdb358b4604/html5/thumbnails/26.jpg)
AJ Ashton Pirate Map
![Page 27: Workshop Cartographie Ubimix Paris Galaxies](https://reader031.vdocuments.us/reader031/viewer/2022032715/55ad11271a28abdb358b4604/html5/thumbnails/27.jpg)
techonmap.fr
![Page 28: Workshop Cartographie Ubimix Paris Galaxies](https://reader031.vdocuments.us/reader031/viewer/2022032715/55ad11271a28abdb358b4604/html5/thumbnails/28.jpg)
Escargot
![Page 29: Workshop Cartographie Ubimix Paris Galaxies](https://reader031.vdocuments.us/reader031/viewer/2022032715/55ad11271a28abdb358b4604/html5/thumbnails/29.jpg)
ux.ubimix.com
![Page 30: Workshop Cartographie Ubimix Paris Galaxies](https://reader031.vdocuments.us/reader031/viewer/2022032715/55ad11271a28abdb358b4604/html5/thumbnails/30.jpg)
austinmusicmap.com
![Page 31: Workshop Cartographie Ubimix Paris Galaxies](https://reader031.vdocuments.us/reader031/viewer/2022032715/55ad11271a28abdb358b4604/html5/thumbnails/31.jpg)
![Page 32: Workshop Cartographie Ubimix Paris Galaxies](https://reader031.vdocuments.us/reader031/viewer/2022032715/55ad11271a28abdb358b4604/html5/thumbnails/32.jpg)
http://fr.slideshare.net/loichay/storymapping
![Page 33: Workshop Cartographie Ubimix Paris Galaxies](https://reader031.vdocuments.us/reader031/viewer/2022032715/55ad11271a28abdb358b4604/html5/thumbnails/33.jpg)
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/