Simple HTML / Javascript page generated by Python displays as blank
I was just following a tutorial about Folium - a Python library that makes web maps. The tutorial states that a webmap can only be created with these three lines of Python code:
import folium
map_osm = folium.Map(location=[45.5236, -122.6750])
map_osm.create_map(path='osm.html')
This is how osm.html should look like according to the tutorial.
However, the osm.html file appears as just a blank web page in my browsers.
Here is the source code for my osm.html file, if that helps:
<!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>
source to share
In the posted HTML, all tags <link>
and <script>
use relative protocol URLs.
If the browser is viewing this current page over HTTPS, it will request this asset with the HTTPS protocol, otherwise it will usually request it using HTTP.
Of course, if you are viewing the file locally, try requesting the log file
file://
.
I think you viewed the file locally, so the browser tried to find nonexistent script / CSS files on your computer. Just adding http:
before all links work.
source to share
The html files generated by folium are meant to be viewed over the http protocol. As user880772 answered, they won't work if you open the file directly in the browser (method file://
) unless you manually change all the relative urls in the urls added with http://
.
To continue browsing the file via http (without having to edit the html): in the terminal, in the directory containing the html file, run:
# Python 2.x
python -m SimpleHTTPServer
or
# Python 3.x
python -m http.server
Then go to http://localhost:8000/
your browser and navigate to the html file created by folium.
See https://github.com/mrdoob/three.js/wiki/How-to-run-things-locally for details .
source to share