JEUX POUR CRÉER SA PROPRE MAISON

This is a translate in to français of “From paper maps to the Web : A DIY numérique Maps Primer” passant par Claire Chemel, library curator et digital directeur at the pièce des carte et plans of the une bibliothèque nationale aux France.

Vous lisez ce: Jeux pour créer sa propre maison

Leer versión en español

En novembre 2014, j’ai été invité pour 2e Semaine aux livre numérique organisée moyennant la bibliothèque nationale aux Colombie. J’y oui présenté esquive projets développés par ns llywelyn.net Labs, und animé un lieu de travail consacré du outils actuels du cartographie numérique. Voici le contenu de cet atelier, qui vous expliquera comment aménager vos propres cartes géo-référencées jusqu’à l’aide d’outils la toile gratuits.

En bref

Nous allons créer ceci. Ce tutoriel avoir besoin que vous disposiez d’une carte numérisée et du données jusquà lui superposer. Das principales étapes décrites sont:

géo-référencer la atlas numérisée convoque 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 référence actuelle,assembler tous les article sur une page web interactive.

Note: cette tutoriel suppose que vous utilisiez Mozilla Firefox, sexcuser Safari hay Google Chrome. Est allé utiliser la console développeur, et nom de fille ne dispose démarche d’instructions pour alger les navigateurs.

Pour commencer

Voici cette que l’on voulons obtenir. Il s’agit d’une atlas de Bogota en 1891, conservée jusqu’à la bibliothèque nationale du Colombie (lien la vitesse Player), enrichie de données trouvées à lintérieur un annuaire du Bogota aux 1888.

1) Geo-référencement

Après numérisation aux la carte, les première démarche est aux lui add des les données géographiques, d’établir des même entre das pixels ns l’image et das lieux nom de famille représentent : cette s’agit ns géo-référencement. Cette procédé va déformer photo numérisée :

*
Le scan original (réduit, évidemment)

…pour l’aligner dessus la projection de Mercator qui orient utilisée à lintérieur la plupart des projets ns cartographie en ligne profitez-en OpenStreetMap ou Google Maps:

*
Scan géo-référencé sorte sur les projection ns Mercator

Le degré du déformation dépendra ns la qualité ns relevé, de l’état aux conservation et du la deviner originelle aux la carte. Elle vous demandez sans doute comment cela fonctionne. Des logiciels commerciaux ou open-source permettent de géo-référencer des images, mais ns principe aux ce tutoriel est importer le même résultat en utilisant unique votre navigateur Internet. Voici ainsi Map Warper! Map Warper est un instrument en la gestion qui permet aux télécharger vos carte numérisées und fournit ns interface simple convectif les géo-référencer (ou esquive “rectifier”). Géo-référencer consiste à faire correspondre une partie du la atlas numérisée (à gauche) à une partie du fond de carte Mercator (à droite) :

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

Vous remarquerez les repères sur tous image. Chaque repère porte une numéro, et personnage dans les deux vues. Ils permettent du savoir que ns nord se établir à gauche dessus l’image numérisée, et l’est vers ns haut. Plus elle ajouterez ns repères, concéder le géo-référencement sera précis, mais reconnaissance l’image finale prendra du temps jusqu’à générer. Toutefois, ns génération la peinture est une chirurgie unique, ainsi ne amie inquiétez étape trop à cette sujet. Il s’agit plus ns savoir combien ns repères vous voulez ajouter. La atlas utilisée dans cette tutoriel en a 101.

Dernier point, il faut matin sûr volonté une d’image géo-référencée de haute qualité après qu’elle ait été modifiée. L’action ns déformer l’image aux départ s’appelle les réechantillonage1 (“resampling” en anglais). Dans esquive options avancées ns Map Warper, vous bidons choisir entre deux méthodes, “Nearest Neighbour” (qualité court mais rapide) hay “Cubic Spline” (qualité haute mais lente) :

*
Choisir “Cubic Spline” dedans l’option “Resampling Method”

Vous des buissons voir le résultat final ici. Vous bidons aussi télécharger cette carte en haute résolution à lintérieur l’onglet “Export”. Mais à mon annonce l’élément le reconnaissance important à obtenir de Map Warper, cette sont das tuiles. Voici les modèle de leur URL :

*
Vous trouverez l’URL ns la tuile à lintérieur l’onglet “Export”.

Le modèle du leur adresse est :

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

Gardez précieusement cette URL, amie en aurez besoin. L’outil ns création aux tuiles du Map Warper utilise image géo-référencée convecteur produire des tuiles carrées, à différent niveaux du zoom et avec des coordonnées propres, aux manière jusquà ne démontrer que côtés utiles aux votre atlas interactive si vous la consultez2. En voici un cas :

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

2) exploit des données

Nous oui la carte, actuellement il nous faut choisir quelles données y afficher. Notre instance utilise l’annuaire de la capitale aux la Colombie, Bogota, en 1888. Cette annuaire regorge d’informations, regroupant les noms ns dizaines du milliers de abrita (chacune auprès son adresse et elle profession), des dizaines ns métiers (décrits en à côté de 4) rang des publicités, listant aussi aux nombreux commerces (avec ton adresses rang propriétaires). Cet annuaire nous envoyer un complètes intéressant aux la brut en Colombie à la fin aux XIXe centre : avocats, photographes rang comptables en partagent esquive pages avec selliers und forgerons. Nom de fille n’ai démarche été virtuellement original, et j’ai trouve des hommes politiques importants aux l’époque, profitez-en le présidence en sentraîner (page 222, premier désignations de la détablissement colonne). Cette y a sept abrita sur notre liste : 4 présidents, ns vice-président, un ministre et une président moyennant interim3. ça liste précise das :

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

Télécharger les liste en formats CSV

Vous bidons bien sûr paramètres votre privé liste avec des données concède intéressantes ou concède utiles convectif vous. N’oubliez pas de établir des colonne latitude rang longitude. Sauvegardez parmi forme de liste CSV (“comma-separated values”).

GeoJSON

Pour ns moment, nos données sont adjacent dans une liste CSV, mais les outils cartographiques en file utilisent généralement le formats GeoJSON. GeoJSON dorient fondé sur standard JSON, un des formats aux données les reconnaissance courants dessus le Web. GeoJSON utilise le concept d’entités (“features”) convectif décrire ns information géographique. Ces entités peuvent matin des points (comme dans notre exemple) foins des article géométriques concéder complexes prendre plaisir des courant simples hay des multilignes, des polygones… chaque entité est identifier par d’un géométrie –geometry– (point, ligne, polygone…) et des les attributs –properties– liées, lequel sont chiffres que elle voulez lui combiner (pour nous, les nom, adresse, photo… une individu). Moyennant exemple4:

Nous devons converti notre planche en un lobject GeoJSON, puis remplacer les valeurs moyennant défaut du latitude und longitude par les valeurs exactes, qui conditions météorologiques seront indiquées moyennant la atlas elle-même. Il nous faut un dinstruments permettant de générer et de manipuler facilement de GeoJSON : voici ainsi GeoJSON.io! cette s’agit une “outil immédiatement et simple convectif créer, visualiser et stock des cartes”. Cette possède ns interface bon pratique pour créer le GeoJSON parmi eux nous avons besoin.

Ouvrez ainsi GeoJSON.io dans une nouvelle fenêtre de votre navigateur. Amie verrez la atlas par défaut, sans non zoom. Maintenant, bricolons un peu. Fait un clic droit n’importe où dessus la carte, und choisissez Examiner l’élément (Inspect aspect en anglais):

*
Clic droit→ Examiner l’élément

Ceci ouvrira un dénoter avancé permettant du lire et de modifier les code du la page aperçus (ici, l’interface cartographique). GeoJSON.io comprendre une interface aux programmation (API) pour contrôler la atlas affichée. Les noyau ns site est MapBoxJS, lui-même construit sur Leaflet, une “bibliothèque JavaScript open-source convecteur des cartes interactives adaptation aux mobiles”. Em mentionne les deux, puisque, ns plupart de temps, cette qui fonctionne dans l’un fonctionne à lintérieur l’autre (documentez-vous bien prématuré de choisir!), rang j’utiliserai le terme Leaflet au lieu ns MapBoxJS.

Dans l’onglet tableau de bord vous verrez de texte et, en bas, un le curseur là à propos de quoi vous pouvez exécuter aux code JavaScript. Amie remarquerez aussi des commentaires ns créateur ns GeoJSON.io. Une ligne est prévue convecteur entrer du JavaScript supplémentaire, tapez-y le contenu ns GIF suivant et appuyez d’environ Entrée :

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

…et accompli Entrée. Cette ajoutera la couche aux tuiles proprement dite. Cette ligne aux code comprendre l’URL suite vous aviez copié à l’étape 1. Le résultat donnera certains chose bénéficie ça :

*
Un dil. “bricolage” dans GeoJSON.io

Vous pouvez maintenant fermer la console aux développement (mais démarche le navigateur!).

Note: Il aura entrer cette code à chaque fois suite vous accéderez à GeoJSON.io, puisqu’il ne sauvegarde pas das modifications faites dedans la console. Vous des buissons par anti conserver la honte que vous ajouter à la carte en amie connectant.

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

Nous allons pour linstant utiliser cette version modifiée de la carte comme investissements pour géo-localiser correctement notre laddiction CSV des présidents. Faites la colle sur la atlas le fichier CSV suite vous ont téléchargé :

*
La magie du glisser-déposer dans GeoJSON.io

Vous remarquerez que compte sont automatiquement converties en GeoJSON (à droite) et plus la atlas zoome dessus les repères associée à tous président (à gauche). Un un message (sur angot vert en diriger à gauche) nous informe plus sept entité ont été importées.

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

Localiser das points aux repère

Les points indiqués à lintérieur notre CSV sont alger localisés das uns d’environ les autres, d’environ la Plaza ns Bolívar. Il faut les déplacer pour leur chantier correct. Au cas où vous cliquez sur le marqueur gris, tu verrez das données attribué à au repère ns dessus (General Rafael Reyes). Il habitait alors au 50, Calle 16. Trouvons cette adresse sur les carte.

Voir plus: " How I Met Your Mother Saison 2 006), How I Met Your Mother Saison 2

Il est relativement facile de trouver esquive adresses puisque les coins ns chaque pâté de maisons indiquent das numéros des imeuble correspondants. Ns numérotation des “carreras” (rues verticales) va australe vers ns nord, et se répartit entré pairs à l’ouest rang impairs à l’est ; alors que les des “calles” (rues horizontales) va ns l’est jusqu’à l’ouest, avec les compte pairs venir nord et impairs à sud :

*

Plaçons-nous sur une adresse approximative, en conditions météorologiques repérant dessus les coins aux rues. Pour cette faire, ouvrez le mode édition en cliquant d’environ l’icône

*
. Das marqueurs sont encadré en rose, et vous pouvez les déplacer. Placez-les jusqu’à l’endroit voulu, cliquez d’environ “Save” pour enregistré les changements :

*

Certaines adresses sont délicates jusqu’à placer, mais cette plaisant ns pouvoir se perdre donc dans le Bogota du 1891. Amie remarquerez que pour cette atlas les immeubles gouvernementaux portent esquive couleurs aux drapeau colombien. Quand on place Rafael Núñez Moledo, le président en sentraîner à cette date, son adressent correspond à un aux ces bâtiments, ns Casa ns Nariño.

Sauvegarder ns fichier GeoJSON

Maintenant il faut créer le GeoJSON final, que l’on utiliserons pour aménager notre atlas interactive. Choisissez facile Save > GeoJSON à lintérieur le menu. Ns fichier nommer map.geojson sera généré et comptabilisée sur ton ordinateur. Convecteur tricher, vous pouvez aussi télécharger un seul homme que j’ai créé…

3) paramètres une atlas personnalisée ns 2014 (facultatif)

Nous voulons comparable cette atlas de 1891 avec le Bogota d’aujourd’hui, afin d’étudier les monnaie dans les temps. Il nous faut une atlas de base, qui est cette que GeoJSON offre quand amie chargez la page : une carte du mondes toute facile (et exacte, espérons-le), affichant esquive rues actuelles. L’on pouvons bénéficier à les tuiles étendard d’OpenStreetMap foins un service comme MapBox convectif produire une carte complétement personnalisée (MapBox s’appuie sur chiffres d’OpenStreetMap). MapBox peut faire beaucoup du choses : cette permet de rotation les couleurs, aux choisir ce qui est affiché (rues, bâtiments, parcs, etc.) und même d’avoir recours jusqu’à l’imagerie satellite! nom de fille ne vais pas expliquer comment utiliser MapBox, vous pouvez vous référer jusqu’à leur brillant tutoriel. Lorsque vous aura fini, notez bien l’identifiant ns la carte (“Map ID”), qui se présentera dessus le modèle username.k53dp4io. La page “Projects” de MapBox permet de voir toutes vos cartes et de copier directement les identifiants dans votre presse-papiers :

*

NOTE: si vous née voulez pas établir votre propre atlas personnalisée, nom de fille donnerai concéder loin une exemple ns MapBox ID.

4) Assemblage final

Nous disposons aujourdhui de alger les article nécessaires à l’assemblage de notre atlas interactive :

des données géographiques en format GeoJSON, des tuiles convoque la carte de 1891, des tuiles ou une MapBox ID convecteur la carte de 2014.

Nous afficherons une prototype dedans JSFiddle, un dinstruments permettant du rapidement aménager et tester aux code HTML, JavaScript und CSS. Familiarisez-vous avec l’interface grâce à ce tutoriel.

JSFiddle attacher quatre volets de base :

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

JSFiddle se calculé d’assembler esquive trois code et d’en dénoter le résultat tous fois que vous cliquez d’environ “Run” (en haute, à lintérieur la fermeture bleue).

HTML rang CSS

Dans cet exemple, les article HTM rang CSS sont complet simples. Nous avons uniquement avoir besoin d’une zone rectangulaire du la côté affichant la atlas et le sien commandes. Cette nous faut un genest HTML là où sera placée ns carte. Tapez hay collez cette dans les volet HTML :

Avec cette code conditions météorologiques créons un inample div identifié prendre plaisir une atlas et qui, vous l’aurez compris, contiendra les carte. Cette faut après donner un style à cette élément : d’un hauteur, une largeur et, dans certains cas vous voulez, ns bordure ou autre attributs. Ns style est contrôler par le codé CSS. Tapez ou collez ceci dans le volet CSS :

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

Si elle cliquez pour “Run” maintenant, vous ne verrez étape grand-chose (à moins que elle n’ayez intoxiqué une colorisation d’arrière-plan ou une bordure). L’on n’avons plus nécessaire d’HTML et ns CSS convectif le moment.

Ajouter MapBoxJS

Pour visualiser la atlas et la déremboursement interactive, nous ont besoin les facteurs supplémentaires et de JavaScript. J’ai prêt parlé ns Leaflet et de MapBoxJS: Leaflet orient inclus dedans MapBoxJS, donc nous nous préoccuperons uniquement ns ce dernier. MapBoxJS dorient composé de deux fichiers: une fichier JS et ns fichier CSS. Vous savoir déjà ce que fait le CSS. Ns fichier JavaScript renferme tous l’interactivité magique du notre carte. Voici esquive URL des fichiers en des questions (NB : cette ne s’agit pas du la dernière version aux MapBoxJS, mais cette fonctionnera si 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 la colonne ns gauche du JSFiddle, ouvrez les section “External Resources”. Copiez celles URL rang collez chacune d’elle à lintérieur la zonage JavaScript/CSS URI, puis cliquez pour le bouton “+”. Elle verrez donc quelque chose profitez-en cela :

*
Votre page JSFiddle cette l’ajout des leur fichiers MapBoxJS

Désormais, JSFiddle chargera celles fichiers lorsque vous cliquerez pour “Run”.

Bonjour la carte!

Et maintenant, le moment que tu attendez tous! Créons une peu aux JavaScript pour voir la carte de 1891. Écrivez ceci dans les volet JavaScript :

…et cliquez pour “Run”. Voici ce que amie devriez cf :

*
Votre première carte Web!

Grâce jusqu’à Leaflet, aménager des cartes en ligne orient aussi facile que ça.

Note: nom de fille n’entre étape ici dans les détails des API Leaflet foins MapBoxJS. Il exister des tutoriels rang des exemples convoque les deux. A les place, je vais amie donner des fragments de code, en explique brièvement cette qu’ils font. Vous allez copier, coller, cliquez sur sur “Run” rang le conséquence sera magique5. Reconnaissance tard tu découvrirez moyennant vous-même comment faire de nouveau mieux.

Combiner différent jeux ns tuiles

Vous avez vu suite la atlas est vide, sauf pour la partie associée à 1891 : cette normal. L’URL ns ce jeu aux tuiles ne contient que la carte rectifiée, et rien d’autre. Cette nous faut une jeu de tuiles supplémentaire convoque comparer auprès 2014 (je vais avantages un exemple du MapBox Map ID, au cas où vous n’auriez pas conçu le vôtre à l’étape 3). Allaient remplacer le code JS par un nouveau, récipient :

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

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

Vous remarquerez que ce code est adéquat similaire jusqu’à l’autre. Esquive différences principales sont l’attribution des données et esquive jeux aux tuiles MapBox (par les biais de la Map ID). La commandé elle-même consiste en deux lignes : une pour aménager une variable baseMaps qui supportera les tuiles (vous pouvez ajouter autant de jeux suite vous voulez) und une autre pour aménager une commande ns bascule rang l’ajouter à la carte. Ns voici en action:

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

Nous y sommes presque! cette faut aujourdhui afficher notre données. Leaflet nous faciliter le travail, puisque cest par erreur compatible avec GeoJSON. ça étape en portant en quelques lignes, maïs d’abord, supprimez les fonction du zoom map.setView(<4.598056, -74.075833>,14). Actuellement collez cette code en bas du volet JS :

Copiez ns GeoJSON viens du le fichier texte que vous avez téléchargé dans GeoJSON.io et collez-le là d’où vous lisez "paste_geojson_here_keep_quotes". Gardez bien les guillemets! les ligne devrait ressembler à ceci :

Nous ont remplacé la fonction zoom moyennant map.fitBounds(geolayer.getBounds()). Cette rend la carte plus “intelligente” : l’on ne rentrons démarche manuellement longitude, latitude rang niveau aux zoom, nous laissons Leaflet calcule la zonage occupée par tous des marqueurs avec getBounds() et ajouter cette estime à la effet fitBounds(). Voilà, la carte est maintenant zoomée convecteur montrer alger nos marqueurs. Aucas vous en ajouter de nouveaux, les limites ns la zoné s’ajusteront automatiquement!

Vous bidons également add des points de repères ou etc informations for bascule du couches. Cette faut juste établir une variable comparer à les que vous oui créée convoque les jeux de tuiles et coincés à jour le code de création aux commande :

Vous verrez quelque chose comme ceci en cliquant d’environ “Run” :

*
Votre atlas et ses données personnalisées

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

Une divers ligne important est cette contenant la fonction L.geoJson(). Celle-ci analyser toutes das entités décrites par les fichier map.geojson. Leaflet/MapBoxJS ajouter par tort des marqueurs bleus convecteur les entité points, plus vous pouvez personnaliser. L.geoJson() permet même d’ajouter ns l’interactivité du marqueurs, car pour les moment il ne se importer rien aucas vous cliquez dessus.

Animer esquive marqueurs

Nous voulons pouvoir cliquez sur sur notre points de repère et dénoter une 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 des choses à commettre :

créer une fonction qui créera et affichera ns pop-up pour chaque entité point,et révision l’appel L.geoJson() pour avantages cette fonction.

C’est cette que je faisais la effet bindPopup() ns Leaflet : dénoter une boite de texte pour une couche donnée. Ns texte peut un m balisé en HTML. Collez cette code entre tout ce que vous ont jusqu’à conjugal :

Cette d’effet showPopup()reçoit d’un entité (feature), l’élément ns GeoJSON lequel renferme toutes nos informations (une géométrie et des propriétés), rang une calque (layer), à lintérieur notre exemple, les marqueur bleu. Celles deux réglage sont traités automatiquement par la fonction L.geoJson(). ShowPopup() extrait puis les les attributs de tous entité (nom, adresse, etc.) et construction une chaîne HTML, utilisé pour aménager le pop-up.

Modifiez votre la gestion L.geoJsoncomme cette pour connecter showPopup:

…vous ajouter , onEachFeature: showPopup del geodata. Ceci indique jusqu’à Leaflet d’appliquer la fonction showPopup à tous entité GeoJSON.

Note: aucas votre GeoJSON compromettant plusieurs catégories d’entités (points, lignes, polygones…), il faut sait que la même d’effet sera appliquer à toutes. Moyennant exemple, das polygones ont des limites, maïs pas les points. Vérifiez aucas l’entité dessus laquelle vous avez cliquée a bon des limites prématuré d’utiliser la fonctionfitBounds.

Si tu chargez la atlas et cliquez pour un repère, amie verrez certains chose profitez-en cela :

*

C’est déjà complet bien, mais cette serait de nouveau mieux en affichant la photo, und en liant ns numéro du page jusqu’à l’annuaire numérisé. Cette ce que nous allons faire. Remplacez la d’effet showPopup moyennant celle-ci :

Nous avons juste dépendance une terrain sous condition : au cas où key dorient égal jusqu’à “Page” un connecté est concevait vers l’annuaire, et aucas key orient égal jusqu’à “Photo” d’un vignette est affichée, auprès une hauteur limitée jusqu’à 150 pixels (au cas à propos de quoi l’image volonté trop grande).

Voir plus: Un Jeu Sur Les Jours De La Semaine, Les Mois, Les Saisons, Jour Après Jour

Voici à quoi ressemble M. Núñez pour linstant :

*

…tout à faisaient présidentiel!

Et nous en avons fini!

Pour conclure

Il vous aura compiler celles trois fragments aux code dans une page HTML convectif publier votre nouvelle atlas quelque part. étape d’inquiétude, voici du code auprès les région nécessaires convecteur y adhésion vos CSS, HTML rang JS. Sauvegardez le tout à lintérieur un fichier .html und publiez-le :

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

J’espère que cette tutoriel vous aura été utile. N’hésitez étape à me contacter convecteur tout commenter ou question!