web-dev-qa-db-fra.com

Carte HTML hors ligne avec des tuiles locales via Leaflet

Existe-t-il un moyen d'afficher une carte pour une zone donnée complètement hors ligne en utilisant HTML et JavaScript? Je recherche une solution adaptée aux mobiles (compatible avec Cordova).

htmlmapsleafletofflinetiles
10
Kozuch

Il existe une solution élégante à ce problème dans cet article de blog . J'en ai compilé un exemple de code complet. Voici les étapes:

1. Créer des tuiles de carte

  • télécharger Mobile Atlas Creator
  • créer un nouvel atlas au format OSMdroid Zip
  • faire une sélection de carte et de zoom, ajouter votre sélection à l'atlas
  • cliquez sur "Créer un atlas"
  • décompressez le fichier atlas
  • vos tuiles ont ce format: {nom_atlas}/{z}/{x}/{y} .png ({z} signifie "zoom" )

2. Configurer HTML et JavaScript

  • copiez votre dossier atlas sur votre racine HTML
  • téléchargez leaflet.js et leaflet.css et copiez-les dans la racine html
  • créez index.html avec le code ci-dessous
    • ajustez les coordonnées de départ et zoomez sur la ligne où var mymap est défini
    • changez atlasName en votre nom de dossier, définissez votre maxZoom souhaité

3. Vous êtes prêt! Profitez-en!

  • exécutez index.html dans votre navigateur
<!DOCTYPE html> 
<html> 
        <head> 
                <title>Leaflet offline map</title>
                <link rel="stylesheet" charset="utf-8" href="leaflet.css" />
        <script type="text/javascript" charset="utf-8" src="leaflet.js"></script>
                <script>
                        function onLoad() {

                                var mymap = L.map('mapid').setView([50.08748, 14.42132], 16);

                                L.tileLayer('atlasName/{z}/{x}/{y}.png',
                                {    maxZoom: 16  }).addTo(mymap);
                        }
                </script> 
        </head>
        <body onload="onLoad();"> 
                <div id="mapid" style="height: 500px;"></div>
        </body>
</html>
19
Kozuch

vous devez faire ces étapes une par une

  1. Téléchargez le fichier mbtiles de la zone spécifique à partir de https://openmaptiles.org/
  2. établir le serveur de carte par Docker
  3. implémentez les pages Web par Leaflet.js et utilisez l'adresse IP du serveur de carte dans vos codes.
1
nassim taghipour