[TUTO] Cartes géographiques hors-ligne

Lus0rius · December 3, 2015

Salutiii! Aujourd’hui, nouveau tuto qui sort un peu de l'habituel, mais qui résout une question parfois embêtante: comment avoir des cartes géographiques hors-ligne sur notre PC? On ne sais jamais, si vous devez passer des vacances et que vous allez dans un endroit sans connexion, cette technique peut s'avérer utile.

Donc, je vais utiliser le site d'OpenStreetMap, les logiciels OSM Tile Donwloader et Notepad++ ainsi que n'importe quel navigateur Internet ou programme permettant d'interpréter un fichier HTML.

PARTIE 1 : Téléchargement et création des fichiers de base

D'abord, il faut créer un dossier nommé "OSM" n'importe-où dans votre PC. À l'intérieur, créez deux sous-dossiers: "img" et "tiles".

Ensuite, téléchargez les images suivantes et placez-les dans "img":

Ces images serviront à définir de design de votre carte. Vous pouvez évidemment les remplacer par d'autres et personnaliser le design.

Vous pouvez également télécharger ces fichiers et les placer dans le dossier "OSM":

http://openlayers.org/api/theme/default/style.css
http://www.openlayers.org/api/OpenLayers.js
http://www.openstreetmap.org/openlayers/OpenStreetMap.js

Ces derniers serviront à interpréter et assembler la carte.

En dernier, créez un fichier avec Notepad++ et copiez ce texte:

<html>
<head>
<title>OSM Local Tiles</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<!-- bring in the OpenLayers javascript library -->
<script src="OpenLayers.js"></script>
<!-- bring in the OpenStreetMap OpenLayers layers. -->
<script src="OpenStreetMap.js"></script>

<script type="text/javascript">
// Position de départ sur la carte
var lat=47.7;
var lon=7.5;
var zoom=10;

var map; //Objet complet du type "OpenLayers.Map

//Initialisation de l'objet "map"
function init() {

map = new OpenLayers.Map ("map", {
controls:[
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.Permalink(),
new OpenLayers.Control.ScaleLine({geodesic: true}),
new OpenLayers.Control.Permalink('permalink'),
new OpenLayers.Control.MousePosition(),
new OpenLayers.Control.Attribution()],
maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
maxResolution: 156543.0339,
numZoomLevels: 19,
units: 'm',
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326")
} );

layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
layerMapnik.setOpacity(0.4);
map.addLayer(layerMapnik);

layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
layerCycleMap.setOpacity(0.4);
map.addLayer(layerCycleMap);

// Ceci est le calque utilisant les carreaux stockés localement
var newLayer = new OpenLayers.Layer.OSM("Local Tiles", "tiles/${z}/${x}/${y}.png", {numZoomLevels: 19, alpha: true, isBaseLayer: false});
map.addLayer(newLayer);
            // This is the end of the layer

     var switcherControl = new OpenLayers.Control.LayerSwitcher();
     map.addControl(switcherControl);
     switcherControl.maximizeControl();

if( ! map.getCenter() ){
var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
map.setCenter (lonLat, zoom);
}
}

</script>
</head>

<!-- body.onload is called once the page is loaded (call the 'init' function) -->
<body onload="init();">

<!-- define a DIV into which the map will appear. Make it take up the whole window -->
<div style="width:100%; height:100%" id="map"></div>

</body>

</html>

Enregistrez-le dans "OSM" avec le nom de fichier "local_tiles.htm".

Vous pouvez changer la position de départ de la carte (latitude, longitude) ainsi que le zoom par défaut (de 0 à 18):

// Position de départ sur la carte
var lat=47.7;
var lon=7.5;
var zoom=10;

PARTIE 2 : Téléchargement de la carte

Jusqu'ici, vous n'avez fait qu'instaurer le design et les fonctions de "votre mini-logiciel HTML". Maintenant, il est temps de télécharger la carte avec OSM Tile Downloader.

Dans le champ "Download to...", indiquez la destination du fichier (ici votre sous-dossier "tiles"). Dans l'onglet "Lat-Long", vous pouvez sélectionner la portion de carte à télécharger en maintenant la touche "Shift". Cochez à droite le(s) niveau(x) de zoom que vous voulez acquérir. Attention, vérifiez le nombres de tiles, car 500 tiles prennent d'une à trois minutes, selon les serveurs.

Vous pouvez aussi faire cette opération via "X-Y coords" si vous connaissez le nom des images d'extrémité (http://otile2.mqcdn.com/tiles/1.0.0/osm/niveau de zoom/coord X/coord Y.png). Mais l'opération décrite ci-dessus est plus simple.

L'onglet "Settings" est aussi utile si vous voulez télécharger une carte depuis un autre serveur. Voici quelques exemples de cartes complètes et utiles (les fonctions "Pause for" et "Every", programment un temps de pause dans le téléchargement, je ne sais pas trop à quoi ça sert):

Server name: Adress:

OpenStreetMap http://a.tile.openstreetmap.org/
Carte cyclable http://b.tile.thunderforest.com/cycle/
Transport http://b.tile.thunderforest.com/transport/
Humanitaire http://b.tile.openstreetmap.fr/hot/
OpenTopoMap http://opentopomap.org/

Bon, une fois que tout est prêt, vous pouvez cliquer sur le bouton... "Download", évidemment!

Attention, ne quittez pas ce tuto, ce n'est pas encore fini! Il manque une chose pour que ça marche! :unsure: Le logiciel télécharge les fichiers dans un sous-dossier du nom du serveur: déplacez tout ce qui y est compris directement dans le sous-dossier "tiles".

Voilà, vous pouvez maintenant ouvrir le fichier "local_tiles.htm" avec un navigateur (même sans connexion! ) et vous devriez obtenir ceci (+1 à celui qui trouve le département sans Google ):

Donc, c'est tout pour ce petit tuto sur une solution pratique et (plus ou moins) rapide pour disposer de cartes hors-ligne. J'ai glané quelques informations sur le Wiki d'OpenStreetMap, mais elles dataient d'il y a 5 ans, je les ai mises à jour avec mes quelques découvertes. N'hésitez pas à dire ce que vous en pensez et s'il y a des problèmes, j'essaierai de voir ce qu'il ne va pas.

Edited December 3, 2015 by azaz_0913

Simulateur · December 3, 2015

J'ai fait un essai par curiosité : impossible de télécharger quoi que ce soit (« le délai d'attente de l'opération a expiré », ce quel que soit le serveur).

Lus0rius · December 4, 2015

J'ai fait un essai par curiosité : impossible de télécharger quoi que ce soit (« le délai d'attente de l'opération a expiré », ce quel que soit le serveur).

Vérifie que tu as bien écris l'adresse du serveur et ne choisis pas une zone trop grande... Moi, en tous cas, je n'ai pas eu de problème majeur (à part quelques tiles qui on été oubliées au téléchargement).

Peut-être que le temps de pause est aussi important dans ce cas-là...

Edited December 4, 2015 by azaz_0913

Simulateur · December 4, 2015

Pas grave, c'était comme je l'ai dit juste par curiosité. J'ai choisi plusieurs tailles de zones, les fichiers ad hoc sont bien listés tout en bas, tous suivis du message d'erreur...

Lus0rius · December 4, 2015

Rectification: à l'heure actuelle j'ai ce problème mais uniquement sur quelques tiles. Vérifie dans le dossier "tiles/Nom du serveur" si tu as quand-même quelques tiles et retélécharge séparément celles qui te manquent.

Sign In

Who's Online 19 Members, 2 Anonymous, 516 Guests (See full list)

Recently Browsing 0 members

[TUTO] Cartes géographiques hors-ligne

Recommended Posts

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Browse

Activity