Donner Son Numero Sur Un Papier

This is a translate into to french of “From paper carte to the Web : A DIY digital Maps Primer” passant par Claire Chemel, library curator et digital directeur at the pièce des carte et plans ns the une bibliothèque nationale de France.

Vous lisez ce: Donner son numero sur un papier

Leer versión en español

En novembre 2014, j’ai lété invité parce que le 2e Semaine aux livre digital organisée par la une bibliothèque nationale ns Colombie. J’y ai présenté les projets développé par le btxrmaster.com Labs, et animé un lieu de travail consacré de outils actuels du cartographie numérique. Voici le contenu ns cet atelier, qui vous expliquera comment paramètres vos propres cartes géo-référencées à l’aide d’outils web gratuits.

En bref

Nous allons-y créer ceci. Ce tutoriel avoir besoin que amie disposiez d’une atlas numérisée et aux données jusquà lui superposer. Esquive principales étapes décrites sont:

géo-référencer la atlas numérisée convectif générer des tuiles,créer des données GeoJSON jusquà superposer jusqu’à la atlas numérisée,créer un angot de carte adaptation comme noter actuelle,assembler alger les éléments sur une jardin interactive.

Note: ce tutoriel suppose plus vous utilisiez Mozilla Firefox, sexcuser Safari ou Google Chrome. Allaient utiliser la tableau de bord développeur, et em ne dispose étape d’instructions pour alger les navigateurs.

Pour commencer

Voici ce que nous voulons obtenir. Cette s’agit d’une atlas de Bogota en 1891, conservée jusquà la bibliothèque nationale du Colombie (lien éclat Player), enrichie du données trouvées à lintérieur un annuaire ns Bogota du 1888.

1) Geo-référencement

Après numérisation ns la carte, les première étape est du lui ajouter des données géographiques, d’établir des courrier entre das pixels ns l’image et das lieux qu’ils représentent : il s’agit ns géo-référencement. Ce procédé aller déformer image numérisée :

*
Le scan d’origine (réduit, évidemment)

…pour l’aligner dessus la projection du Mercator qui orient utilisée dans la presque des projets de cartographie en ligne profitez-en OpenStreetMap foins Google Maps:

*
Scan géo-référencé alignées sur les projection de Mercator

Le degré aux déformation dépendra ns la qualité de relevé, de l’état du conservation et aux la deviner originelle du la carte. Amie vous demandez sans doute comment les fonctionne. Des logiciels la publicité ou open-source permettent du géo-référencer des images, mais le principe ns ce tutoriel est comprendre le même résultat en utilisant unique votre navigateur Internet. Voici donc Map Warper! Map Warper dorient un outil en file qui permet ns télécharger vos carte numérisées rang fournit d’un interface simple convectif les géo-référencer (ou esquive “rectifier”). Géo-référencer consister en à faire coïncider une partie aux la atlas numérisée (à gauche) à ns partie du vaisseau sanguin de atlas Mercator (à droite) :

*
L’interface aux rectification en vis-à-vis de Map Warper

Vous remarquerez esquive repères sur tous image. Tous repère porte ns numéro, et illustration dans esquive deux vues. Nom de famille permettent du savoir que les nord se trouve à gauche sur l’image numérisée, rang l’est vers le haut. Plus elle ajouterez ns repères, plus le géo-référencement sera précis, mais concède l’image finale prendra de temps à générer. Toutefois, la génération d’image est une opération unique, par conséquent ne vous inquiétez étape trop à ce sujet. Il s’agit plus du savoir combien de repères tu voulez ajouter. La carte utilisée dans cette tutoriel en a 101.

Dernier point, cette faut am sûr volonté une d’image géo-référencée du haute qualité del qu’elle ont été modifiée. L’action aux déformer l’image de départ s’appelle les réechantillonage1 (“resampling” en anglais). Dans les options avancées aux Map Warper, vous pouvez choisir entre leur méthodes, “Nearest Neighbour” (qualité basse mais rapide) foins “Cubic Spline” (qualité élevée mais lente) :

*
Choisir “Cubic Spline” à lintérieur l’option “Resampling Method”

Vous pouvez voir le résultat final ici. Vous des buissons aussi télécharger cette atlas en haute résolution à lintérieur l’onglet “Export”. Mais jusquà mon avis l’élément le concède important à acquérir de Map Warper, ce sont das tuiles. Voici ns modèle du leur URL :

*
Vous trouverez l’URL de la tuile dedans l’onglet “Export”.

Le modèle de leur adresse est :

http://mapwarper.net/maps/tile/4949/z/x/y.png

Gardez précieusement cet URL, elle en aurez besoin. L’outil de création de tuiles du Map Warper utilise image géo-référencée convecteur produire des tuiles carrées, à différent niveaux ns zoom et avec des coordonnées propres, du manière à ne afficher que côtés utiles de votre atlas interactive quand vous les consultez2. En cest un cas :

Les cartes en contour sont constituées ns millions du tuiles bénéficie celle-ci.

2) extraction des données

Nous ont la carte, aujourdhui il nous faut choisir quelles données y afficher. Notre exemple utilise l’annuaire du la capitale du la Colombie, Bogota, en 1888. Cet annuaire regorge d’informations, regroupant les noms aux dizaines aux milliers de personne (chacune avec son adresse et sa profession), des dizaines aux métiers (décrits en page 4) und des publicités, listant aussi aux nombreux commerces (avec leurs adresses rang propriétaires). Cette annuaire nous envoyer un complet intéressant aux la vie en Colombie à la fin de XIXe siècles : avocats, photographes rang comptables en partagent das pages avec selliers rang forgerons. Je n’ai étape été complet original, et j’ai chercher des hommes politiques importants aux l’époque, comme le présidence en une pratique (page 222, premier désignations de la détachement colonne). Cette y a sept abrita sur notre licence de cargaison : 4 présidents, un vice-président, un ministre et ns président par interim3. Les liste précise esquive :

nomfonction (poste ns plus augmenté occupé au sein du pouvoir la gestion colombien)mandatpage (d’apparition à lintérieur l’annuaire)profession (telle qu’indiquée dedans l’annuaire)adresseURL du la la peinture dans Wikimedia Commonslatitude, longitude (une valeur échec située au centre-ville du Bogota, que allaient modifier).

Télécharger ns liste en formats CSV

Vous pouvez bien sûr aménager votre propre liste avec des données plus intéressantes ou concéder utiles convectif vous. N’oubliez démarche de paramètres des colonne latitude et longitude. Sauvegardez entre forme ns liste CSV (“comma-separated values”).

GeoJSON

Pour ns moment, nos les données sont contenues dans une liste CSV, mais les outils cartographiques en file utilisent en général le formats GeoJSON. GeoJSON orient fondé sur standard JSON, un des formats de données les concède courants pour le Web. GeoJSON utilise le idée d’entités (“features”) convectif décrire une information géographique. Ces entités peuvent matin des points (comme dedans notre exemple) ou des éléments géométriques plus complexes profitez-en des courant simples hay des multilignes, des polygones… chaque entité est sont définis par une géométrie –geometry– (point, ligne, polygone…) und des les attributs –properties– liées, lequel sont les données que tu voulez lui combiner (pour nous, das nom, adresse, photo… une individu). Par exemple4:

Nous devons converti notre planche en un l’objet GeoJSON, puis remplacer esquive valeurs par défaut du latitude rang longitude par das valeurs exactes, qui nous seront indiquées par la atlas elle-même. Cette nous faut un dinstruments permettant de générer et de manipuler facilement du GeoJSON : voici donc GeoJSON.io! cette s’agit une “outil rapide et simple convectif créer, visualiser et camp des cartes”. Cette possède une interface bon pratique pour aménager le GeoJSON parmi eux nous avons besoin.

Ouvrez donc GeoJSON.io dans ns nouvelle fenêtre aux votre navigateur. Vous verrez la atlas par défaut, sans non zoom. Maintenant, bricolons ns peu. Fait un clic pleinement n’importe où pour la carte, et choisissez Examiner l’élément (Inspect element en anglais):

*
Clic droit→ Examiner l’élément

Ceci ouvrira un affichage avancé permettant du lire et de modifier les code ns la page aperçus (ici, l’interface cartographique). GeoJSON.io comprenez vous une interface ns programmation (API) pour commandement la atlas affichée. Le noyau aux site est MapBoxJS, lui-même construit sur Leaflet, d’un “bibliothèque JavaScript open-source convecteur des cartes interactives adaptation aux mobiles”. Nom de fille mentionne das deux, puisque, ns plupart ns temps, cette qui fonctionne dedans l’un fonctionne dedans l’autre (documentez-vous bien prématuré de choisir!), et j’utiliserai le terme Leaflet venir lieu aux MapBoxJS.

Dans l’onglet tableau de bord vous verrez du texte et, en bas, un aiguille là où vous pouvez exécuter de code JavaScript. Vous remarquerez même des commentaires de créateur ns GeoJSON.io. D’un ligne est prévue pour entrer du JavaScript supplémentaire, tapez-y les contenu du GIF prochain et appuyez d’environ Entrée :

La atlas sera centrée et zoomée dessus Bogota, Colombie, la zone couverte par la carte de 1891. Maintenant tapez ceci :

…et faites Entrée. Cette ajoutera les couche ns tuiles correctement dite. Les ligne ns code comprendre l’URL suite vous aviez copiée à l’étape 1. Le conséquence donnera quelque chose prendre plaisir ça :

*
Un dil. “bricolage” dedans GeoJSON.io

Vous pouvez pour linstant fermer ns console du développement (mais pas le navigateur!).

Note: Il je vais lavoir entrer ce code à chaque fois plus vous accéderez jusquà GeoJSON.io, puisqu’il ne sauvegarde pas les modifications faites à lintérieur la console. Vous pouvez par anti conserver la honte que vous ajouter à la carte en vous connectant.

Ajouter des données à lintérieur GeoJSON.io

Nous allons actuellement utiliser les version modifiée de la atlas comme base pour géo-localiser exactement notre accident CSV des présidents. Faites collage sur la atlas le fichier CSV que vous oui téléchargé :

*
La magie de glisser-déposer à lintérieur GeoJSON.io

Vous remarquerez que la honte sont automatiquement converties en GeoJSON (à droite) et suite la carte zoome pour les repères associée à tous président (à gauche). Un un message (sur vaisseau sanguin vert en chefs à gauche) nous informe suite sept divertissement ont été importées.

Mais où est passée la atlas de 1891? Pas du panique, la atlas est juste à un niveau aux zoom trop avancé, et nos jeu ns tuiles née dispose étape d’images à ça échelle. Dézoomez ns peu, rang vous verrez réapparaitre la atlas de 1891.

Localiser les points ns repère

Les points indiqués à lintérieur notre CSV sont alger localisés das uns pour les autres, dessus la Plaza aux Bolívar. Il faut esquive déplacer dessus leur page? ˅ correct. Aucas vous cliquez sur le marqueur gris, elle verrez les données attribuées au repère aux dessus (General Rafael Reyes). Il habitait alors au 50, Calle 16. Trouvons cette adresse sur la carte.

Voir plus: Dommages De Guerre Payés Par L Allemagne, Histoire Militaire Des États

Il orient relativement facile de trouver les adresses puisque les coins ns chaque pâté ns maisons indiquent esquive numéros des imeuble correspondants. La numérotation des “carreras” (rues verticales) va sud vers ns nord, et s’être répartit entre pairs jusqu’à l’ouest et impairs à l’est ; donc que les des “calles” (rues horizontales) va du l’est jusqu’à l’ouest, avec les numéro pairs à nord et impairs venir sud :

*

Plaçons-nous dessus une adressent approximative, en conditions météorologiques repérant sur les coins de rues. Pour ce faire, ouvrez ns mode éditer en cliquant dessus l’icône

*
. Esquive marqueurs sont encadré en rose, et vous bidons les déplacer. Placez-les jusquà l’endroit voulu, cliquez d’environ “Save” pour enregistrer les modifications :

*

Certaines adresses sont délicates à placer, mais cest plaisant de pouvoir s’être perdre par conséquent dans les Bogota du 1891. Elle remarquerez que sur cette atlas les bâtiments gouvernementaux portent esquive couleurs du drapeau colombien. Quand nous place Rafael Núñez Moledo, ns président en exercice à cette date, son adresse correspond jusquà un ns ces bâtiments, ns Casa aux Nariño.

Sauvegarder ns fichier GeoJSON

Maintenant il faut génère le GeoJSON final, que conditions météorologiques utiliserons pour paramètres notre atlas interactive. Choisissez simplement Save > GeoJSON dans le menu. Ns fichier décidé map.geojson deviendra généré et comptabilisée sur votre ordinateur. Convoque tricher, vous bidons aussi télécharger celui que jai créé…

3) aménager une atlas personnalisée de 2014 (facultatif)

Nous voulons comparable cette atlas de 1891 avec le Bogota d’aujourd’hui, afin d’étudier les monnaie dans le temps. Cette nous faut une atlas de base, qui est cette que GeoJSON offre quand amie chargez la page : une atlas du mondes toute facile (et exacte, espérons-le), affichant esquive rues actuelles. Nous pouvons utiliser les tuiles étendard d’OpenStreetMap ou un service bénéficie MapBox convectif produire une atlas complétement personnalisée (MapBox s’appuie sur la honte d’OpenStreetMap). MapBox peut donner beaucoup aux choses : cette permet de alternance les couleurs, du choisir cette qui orient affiché (rues, bâtiments, parcs, etc.) et même aller chercher recours jusqu’à l’imagerie satellite! je ne vais pas sophistiqué comment bénéficier à MapBox, vous bidons vous référer à leur excellent tutoriel. Lorsque vous aura fini, notez bien l’identifiant ns la atlas (“Map ID”), lequel se présentera pour le modèle username.k53dp4io. Les page “Projects” aux MapBox permet ns voir tous vos carte et ns copier directement esquive identifiants dedans votre presse-papiers :

*

NOTE: aucas vous ne voulez pas créer votre propre atlas personnalisée, nom de fille donnerai concéder loin un exemple du MapBox ID.

4) Assemblage final

Nous disposons pour linstant de je connais les article nécessaires jusqu’à l’assemblage aux notre atlas interactive :

des les données géographiques en formats GeoJSON, des tuiles convoque la atlas de 1891, des tuiles ou d’un MapBox ID convecteur la atlas de 2014.

Nous afficherons une prototype à lintérieur JSFiddle, un instrument permettant du rapidement paramètres et tester ns code HTML, JavaScript rang CSS. Familiarisez-vous auprès l’interface élégance à ce tutoriel.

JSFiddle ajouter quatre volets de base :

code HTML (en haut à gauche),code CSS (en diriger à droite)JavaScript (en bas à gauche), rang le conséquence final (en bas à droite).

JSFiddle se calculé d’assembler esquive trois code et d’en publicité le résultat chaque fois suite vous cliquez sur “Run” (en haute, dedans la barre bleue).

HTML rang CSS

Dans cette exemple, les éléments HTM et CSS sont carrément simples. Nous ont uniquement nécessaire d’une zonage rectangulaire aux la side affichant la atlas et le sien commandes. Il nous faut un genest HTML là où sera placée la carte. Tapez ou collez cette dans les volet HTML :

Avec ce code conditions météorologiques créons un genest div identifié profitez-en une carte et qui, amie l’aurez compris, contiendra les carte. Il faut puis donner un sacrés à cet élément : d’un hauteur, ns largeur et, dans certains cas vous voulez, une bordure ou d’autres attributs. Les style est contrôler par le code CSS. Tapez hay collez ceci dans les volet CSS :

Une altitude et une largeur aux 400 pixels seront origine à l’élément dont l’identifiant orient map (le préfixe # si pauvre identifiant en CSS). Bon sûr vous pouvez paramètres un rectangle concéder grand (si votre filtrer peut l’afficher) et indiquent d’autres attributs entre celles accolades (par exemple, background-color: #f00; convecteur un arrière-plan rouge aucas vous souhaitez cf l’élément sans pour autant carte), mais jai voulu prise les celles simples.

Si tu cliquez dessus “Run” maintenant, vous née verrez pas grand-chose (à moindres que elle n’ayez dépendance une coloré d’arrière-plan ou une bordure). Conditions météorologiques n’avons plus besoin d’HTML et aux CSS pour le moment.

Ajouter MapBoxJS

Pour visualiser la atlas et la remboursement interactive, nous avons besoin éléments supplémentaires et aux JavaScript. J’ai beau parlé ns Leaflet et du MapBoxJS: Leaflet est inclus dedans MapBoxJS, ainsi nous conditions météorologiques préoccuperons uniquement du ce dernier. MapBoxJS orient composé de deux fichiers: une fichier JS et une fichier CSS. Vous savez déjà cette que faisaient le CSS. Les fichier JavaScript renferme tout l’interactivité magique du notre carte. Voici les URL des fichiers en question (NB : il ne s’agit pas aux la final version ns MapBoxJS, mais les fonctionnera lorsque même) :

Fichier CSS : https://api.tiles.mapbox.com/mapbox.js/v1.5.0/mapbox.css

Fichier JavaScript : https://api.tiles.mapbox.com/mapbox.js/v1.5.0/mapbox.js

Dans ns colonne de gauche aux JSFiddle, ouvrez les section “External Resources”. Copiez celles URL rang collez chacune d’elle à lintérieur la cential JavaScript/CSS URI, alors cliquez sur le bouton “+”. Amie verrez alors quelque chose prendre plaisir cela :

*
Votre page JSFiddle del l’ajout des deux fichiers MapBoxJS

Désormais, JSFiddle chargera celles fichiers quand vous cliquerez dessus “Run”.

Bonjour ns carte!

Et maintenant, le instants que vous attendez tous! Créons une peu de JavaScript pour cf la atlas de 1891. Écrivez ceci dans les volet JavaScript :

…et cliquez d’environ “Run”. Voici ce que vous devriez cf :

*
Votre première carte Web!

Grâce jusquà Leaflet, créer des cartes en ligne est aussi facile que ça.

Note: je n’entre pas ici dans les détails des API Leaflet ou MapBoxJS. Il exister des tutoriels et des exemples convoque les deux. A la place, je vais tu donner des fragments du code, en expliquer brièvement cette qu’ils font. Vous marche copier, coller, cliquer sur “Run” et le conséquence sera magique5. Concède tard tu découvrirez par vous-même comme? ou quoi faire encore mieux.

Combiner plusieurs jeux ns tuiles

Vous ont vu que la carte est vide, sauf convectif la partie correspondant à 1891 : il est normal. L’URL aux ce jeu ns tuiles ne contenir que la atlas rectifiée, et personne d’autre. Cette nous faut une jeu du tuiles supplémentaire convectif comparer avec 2014 (je vais bénéficient un exemple ns MapBox Map ID, à cas d’où vous n’auriez pas créé le vôtre jusquà l’étape 3). Jallais remplacer le code JS par un nouveau, récipient :

les informations de provenance du la carte,les tuiles convectif 2014,une commandé pour passer d’un jeu de tuiles à l’autre.

Ce codé doit remplacer votre JS précédent :

Vous remarquerez que ce code est adéquat similaire jusquà l’autre. Les différences de base sont l’attribution des les données et les jeux aux tuiles MapBox (par les biais du la Map ID). La commande elle-même construction deux lignes : une pour établir une variable baseMaps qui supportera esquive tuiles (vous pouvez ajouter autant du jeux suite vous voulez) et une divers pour créer une commande aux bascule und l’ajouter parce que le carte. Ns voici en action:

*
La mention de provenance de l’image change avec le jeu aux tuiles.

Nous y sommes presque! il faut aujourdhui afficher notre données. Leaflet nous facilite le travail, puisque cette par échec compatible auprès GeoJSON. Cette étape garder en un couple lignes, maïs d’abord, supprimez les fonction aux zoom map.setView(<4.598056, -74.075833>,14). Pour linstant collez cette code en bas aux volet JS :

Copiez les GeoJSON viens du le fichier texte suite vous avez téléchargé dans GeoJSON.io et collez-le là où vous lisez "paste_geojson_here_keep_quotes". Gardez bon les guillemets! les ligne devrait regardé à ceci :

Nous avons remplacé la d’effet zoom par map.fitBounds(geolayer.getBounds()). Cette rend la atlas plus “intelligente” : conditions météorologiques ne rentrons étape manuellement longitude, latitude rang niveau ns zoom, l’on laissons Leaflet calcule la zone occupée par tous des marqueurs avec getBounds() et ajouter cette estime à la effet fitBounds(). Voilà, la atlas est actuellement zoomée convoque montrer je connais nos marqueurs. Au cas où vous en ajouter de nouveaux, das limites aux la zone s’ajusteront automatiquement!

Vous des buissons également ajouter des points du repères ou est différent informations for bascule aux couches. Il faut juste paramètres une variable similaire à cette que vous oui créée pour les jeux de tuiles et coincés à journée le code du création du commande :

Vous verrez quelque chose profitez-en ceci en cliquant pour “Run” :

*
Votre atlas et ses les données personnalisées

Note: Pensez bien à bouger le code aux création aux commande L.control.layers en dessous ns l’analyse aux GeoJSON. Les variablegeolayer a besoin d’exister convecteur être ajoutée à etc couches (overlays). Consultez ma résultats JSFiddle convoque plus de détails.

Une différent ligne importante est celle contenant la d’effet L.geoJson(). Celle-ci pour analyse toutes das entités décrites par les fichier map.geojson. Leaflet/MapBoxJS attacher par échec des marqueurs bleus convecteur les entités points, plus vous des buissons personnaliser. L.geoJson() permet en outre d’ajouter du l’interactivité aux marqueurs, car pour le moment cette ne se entretoise rien au cas où vous cliquez dessus.

Animer das marqueurs

Nous voulons pouvoir cliquer sur les notres points du repère et dénoter une la fenêtre pop-up auprès les données que nous deux avons associées (dans les propriétés de l’entité). Cette y a deux choses à commettre :

créer une effet qui créera und affichera ns pop-up pour tous entité point,et modifier l’appel L.geoJson() pour bénéficier à cette fonction.

C’est cette que fait la fonction bindPopup() de Leaflet : publicité une boite de texte pour une classer donnée. Ns texte peut matin balisé en HTML. Collez cette code sous tout ce que vous oui jusqu’à coupler :

Cette effet showPopup()reçoit une entité (feature), l’élément aux GeoJSON qui renferme toutes les personnes nos informations (une géomètre et des propriétés), rang une couche (layer), dans notre exemple, le marqueur bleu. Celles deux paramètres sont traités automatique par la d’effet L.geoJson(). ShowPopup() extrait après les les attributs de chaque entité (nom, adresse, etc.) et construction une chaîne HTML, utilisé pour établir le pop-up.

Modifiez votre ligne L.geoJsoncomme cette pour relier showPopup:

…vous ajouter , onEachFeature: showPopup cette geodata. Ceci indique jusqu’à Leaflet d’appliquer la d’effet showPopup à chaque entité GeoJSON.

Note: au cas où votre GeoJSON comporte plusieurs catégories d’entités (points, lignes, polygones…), cette faut connaissent que la même d’effet sera appliquer à toutes. Moyennant exemple, esquive polygones ont des limites, mais pas esquive points. Vérifiez au cas où l’entité sur laquelle vous oui cliquée a bon des limites prématuré d’utiliser ns fonctionfitBounds.

Si tu chargez la atlas et cliquez pour un repère, amie verrez certains chose prendre plaisir cela :

*

C’est déjà très bien, mais cette serait encore mieux en affichant ns photo, und en liant ns numéro aux page à l’annuaire numérisé. C’est ce que allaient faire. Remplacez la d’effet showPopup par celle-ci :

Nous oui juste ajouté une terrain sous état : si key est égal jusqu’à “Page” un lien est créé vers l’annuaire, et au cas où key dorient égal à “Photo” une vignette dorient affichée, avec une altitude limitée jusqu’à 150 pixels (au cas d’où l’image étaient trop grande).

Voir plus: Envoyer Page Web Par Mail Avec Chrome, Mailtrack For Gmail™

Voici jusqu’à quoi comme M. Núñez maintenant :

*

…tout à je faisais présidentiel!

Et l’on en oui fini!

Pour conclure

Il vous faudra compiler celles trois fragments du code dans d’un page HTML convecteur publier votre nouvelle atlas quelque part. Pas d’inquiétude, voici du code auprès les zone nécessaires convectif y adhésion vos CSS, HTML rang JS. Sauvegardez le tout dedans un fichier .html et publiez-le :

Voici la carte finie. J’ai faisaient quelques petit modifications venir CSS pour remplir la fenêtre ns navigateur.

J’espère que ce tutoriel vous je vais lavoir été utile. N’hésitez étape à je contacter pour tout annotation ou question!