Je suivais juste ce tutoriel sur Folium - une bibliothèque Python qui crée des cartes Web. Le didacticiel indique qu'une carte Web peut être créée avec seulement ces trois lignes de code Python:

import folium
map_osm = folium.Map(location=[45.5236, -122.6750])
map_osm.create_map(path='osm.html')

Voici à quoi devrait ressembler osm.html selon le tutoriel.

Cependant, le fichier osm.html apparaît comme une simple page Web vierge sur mes navigateurs.

Voici le code source de mon fichier osm.html si cela aide:

<!DOCTYPE html>
<head>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
   <script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>

   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

   <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
   <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
   <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

   <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

   <link rel="stylesheet" href="//rawgit.com/lvoogdt/Leaflet.awesome-markers/2.0/develop/dist/leaflet.awesome-markers.css">
   <script src="//rawgithub.com/lvoogdt/Leaflet.awesome-markers/2.0/develop/dist/leaflet.awesome-markers.js"></script>


   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.Default.css">
   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.css">
   <script src="//cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/leaflet.markercluster-src.js"></script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/leaflet.markercluster.js"></script>

   <link rel="stylesheet" href="//birdage.github.io/Leaflet.awesome-markers/dist/leaflet.awesome.rotate.css">






   <style>

      html, body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }

      #map {
        position:absolute;
        top:0;
        bottom:0;
        right:0;
        left:0;
      }

   </style>
</head>

<body>

   <div class="folium-map" id="folium_62f4bc18e7a1444b908b0413335a38b1" style="width: 960px; height: 500px"></div>

   <script>



      var base_tile = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          maxZoom: 18,
          minZoom: 1,
          attribution: 'Map data (c) <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
      });

      var baseLayer = {
        "Base Layer": base_tile
      };

      /*
      addition of the wms layers
      */



      /*
      addition of the tile layers
      */


      /*
      list of layers to be added
      */
      var layer_list = {

      };

      /*
      Bounding box.
      */
      var southWest = L.latLng(-90, -180),
          northEast = L.latLng(90, 180),
          bounds = L.latLngBounds(southWest, northEast);

      /*
      Creates the map and adds the selected layers
      */
      var map = L.map('folium_62f4bc18e7a1444b908b0413335a38b1', {
                                       center:[20, 40],
                                       zoom: 10,
                                       maxBounds: bounds,
                                       layers: [base_tile]
                                     });

      L.control.layers(baseLayer, layer_list).addTo(map);

      //cluster group
      var clusteredmarkers = L.markerClusterGroup();
      //section for adding clustered markers

      //add the clustered markers to the group anyway
      map.addLayer(clusteredmarkers);













   </script>

</body>
3
multigoodverse 18 juil. 2015 à 18:56

2 réponses

Meilleure réponse

Dans le code HTML que vous avez publié, toutes les balises <link> et <script> utilisent URL relatives au protocole.

Si le navigateur affiche cette page actuelle via HTTPS, il demandera cet élément avec le protocole HTTPS, sinon il le demandera généralement avec HTTP.

Bien sûr, si vous visualisez le fichier localement, il essaiera de demander le fichier avec le protocole file://.

Je pense que vous avez vu le fichier localement, donc le navigateur a essayé de trouver les fichiers script / CSS inexistants sur votre ordinateur. Il suffit d'ajouter http: avant que tous les liens ne fonctionnent.

2
approxiblue 18 juil. 2015 à 16:30

Les fichiers html créés par folium sont conçus pour être visualisés via le protocole http. Comme user880772 a répondu, ils ne fonctionneront pas si vous ouvrez le fichier directement dans votre navigateur (méthode file://) à moins que vous ne changiez manuellement toutes les URL relatives en URL précédées de http://.

Pour procéder en visualisant le fichier via http (sans avoir à modifier le html): dans un terminal, dans le répertoire contenant le fichier html, exécutez:

# Python 2.x
python -m SimpleHTTPServer

Ou

# Python 3.x
python -m http.server

Ensuite, visitez http://localhost:8000/ dans votre navigateur et accédez au fichier html créé par folium.

Voir https://github.com/mrdoob/three. js / wiki / How-to-run-things-local pour plus d'informations.

2
foghorn 23 juil. 2015 à 18:35