search

python-visualization / folium

Python Data. Leaflet.js Maps.
https://python-visualization.github.io/folium/
MIT License
6.86k stars 2.22k forks source link

map.create_map doesn't export correct path for href on bootstrap and markercluster #74

Closed mguerrajordao closed 9 years ago

mguerrajordao commented 9 years ago

Hello developers,

I've been starting to use foluim to produce leaflet.js maps from geographical data using python and pandas dataframe. I've noticed that when trying to use the polygon markers, and export to html via map.create_map, the 'http:' prefix is missing on the head of the html file. While trying to open the html file separately or by an iframe, the javascript does not find this urls locally (as it prepends with 'file:') on the bootstrap and markercluster (js and css files). I don't know if this is the expected behavior, but anyway is reported.

Input on python (from polygon marker example)

import folium

map_5 = folium.Map(location=[45.5236, -122.6750], zoom_start=13)
map_5.polygon_marker(location=[45.5012, -122.6655], popup='Ross Island Bridge',
                     fill_color='#132b5e', num_sides=3, radius=10)
map_5.polygon_marker(location=[45.5132, -122.6708], popup='Hawthorne Bridge',
                     fill_color='#45647d', num_sides=4, radius=10)
map_5.polygon_marker(location=[45.5275, -122.6692], popup='Steel Bridge',
                     fill_color='#769d96', num_sides=6, radius=10)
map_5.polygon_marker(location=[45.5318, -122.6745], popup='Broadway Bridge',
                     fill_color='#769d96', num_sides=8, radius=10)
map_5.create_map(path='bridges.html')

bridges.html file output header:

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

   <script src="https://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="https://rawgit.com/lvoogdt/Leaflet.awesome-markers/2.0/develop/dist/leaflet.awesome-markers.css">
   <script src="https://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="http://birdage.github.io/Leaflet.awesome-markers/dist/leaflet.awesome.rotate.css">

   <script src="https://wrobstory.github.io/leaflet-dvf/leaflet-dvf.markers.min.js"></script>

Thanks and best regards, Marcelo

mguerrajordao commented 9 years ago

And looking forward for new additions. Thank you for this project. Regards, Marcelo

ocefpaf commented 9 years ago

Hi @mguerrajordao. You need to serve the HTML, that is how folium is supposed to work. Take a look at #72

mguerrajordao commented 9 years ago

Thank you, Sorry, I haven't noticed it was a duplicated issue. I'll have a look. Congratulations for this project.

mguerrajordao commented 9 years ago

I guess my main issue was because I was also trying to use it embedded on an iframe in iPython notebook. I'll see if i can serve the HTML. Thanks

ocefpaf commented 9 years ago

Option 1:

import folium
folium.initialize_notebook()

Option 2:

from IPython.display import HTML, IFrame

def inline_map(m):
    """Takes a folium instance or a html path and load IFrame."""
    if isinstance(m, Map):
        m._build_map()
        srcdoc = m.HTML.replace('"', '&quot;')
        embed = HTML('<iframe srcdoc="{srcdoc}" '
                     'style="width: 100%; height: 500px; '
                     'border: none"></iframe>'.format(srcdoc=srcdoc))
    elif isinstance(m, str):
        embed = IFrame(m, width=750, height=500)
    return embed