EzDevInfo.com

folium

Python Data. Leaflet.js Maps.

Simple HTML/Javascript page created by Python shows as blank

I was just following this tutorial about Folium - a Python library that makes web maps. The tutorial states that a web map can be created with only 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 the osm.html should look like according to the tutorial.

However, the osm.html file is showing up as just a blank webpage on my browsers.

Here is the source code of my osm.html file if that helps:

<!DOCTYPE html>
<head>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
   <link rel="stylesheet" rel='nofollow' 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" rel='nofollow' href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
   <link rel="stylesheet" rel='nofollow' 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 rel='nofollow' href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

   <link rel="stylesheet" rel='nofollow' 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" rel='nofollow' href="//cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.Default.css">
   <link rel="stylesheet" rel='nofollow' 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" rel='nofollow' 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 rel='nofollow' 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: (StackOverflow)

Deleting a marker from folium map

I am making an application in which I have a stream of locations which I need to mark on a map. I show only a particular number of markers on the map, so I need to replace a few of the old markers with new markers.

I am using folium.simple_marker() to mark the locations.

Is there a function to delete a specific marker?

import folium
map_1 = folium.Map(location=[latitude,longtitude], zoom_start=9,)
for location in locations:
   map_1.simple_marker([location.lat,location.longt], popup='')
map_1.create_map(path='map.html')

Source: (StackOverflow)

Advertisements

Folium map in iPython not displaying map. Throws error: 'Uncaught ReferenceError: L is not defined'

Attempting to display a basic map in iPython using folium leaflet library. Recent install of iPython through Anaconda with Folium installed with Pip. Confirmed everything is up to date

ran this code in iPython

import folium
map = folium.Map(location=[48, -102], zoom_start=3)
map.create_map('map.html')
map

I receive a blank frame. I checked the console on the html. I receive a number of Failed to load resource: net::ERR_FILE_NOT_FOUND tracing back to an Uncaught ReferenceError: L is not defined. I checked the html document and found the leaflet reference looks like this:

    src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js">

I assume the issue is with the relative link but I have no found information in the folium docs to resolve this issue.

Thanks ya'll for the help. I look forward to paying it forward.


Source: (StackOverflow)

How to render the map of a specific country using Folium

I want to render the map of a particular country (say, India) on a webpage powered by Python. Is it possible to do this using Folium?


Source: (StackOverflow)

Marking multiple locations on a static map using folium

I am trying to mark a list of locations on map using folium. Right now,I am marking a first location and refreshing the map after marking a new location,so that I can see the newly marked locations on the map. Is there a way where I can just pop the new marker without refreshing the whole map?

import folium
from selenium import webdriver
map_1 = folium.Map(location=[1,1], zoom_start=1,)
map_1.simple_marker([1,1],popup='')
map_1.create_map(path='marklocations.html')
driver = webdriver.Firefox()
driver.get("file:") #Path to the file marklocations.html
locations = [[0,0],[30,76],[24,73]]

for location in locations:
    print location
    map_1.simple_marker([location[0],location[1]], popup='')
    map_1.create_map(path='marklocations.html')
    driver.refresh()

Source: (StackOverflow)

Best practice when using folium on django

I'm building an app with django ,which is going display a map of the top voted items.

I'm not an experienced web developed and i wonder where and when and where should build them map. (this line for example --> )

map_osm.create_map(path='osm.html')

Right now i placed in my views.py, and it's building the map each time a user view it, the question is - wouldn't it create too much overhead computation for the server?

I thought about updating it aslo every x votes,or keep a model that will manage it.

what is the best practice in this kind of situation?


Source: (StackOverflow)

Python with Folium: How can I embed a webpage in the popup?

I'm working on a simple implementation of Python Folium with simple markers based on this page.

import folium
map_1 = folium.Map(location=[45.372, -121.6972], zoom_start=12,
                   tiles='Stamen Terrain')
map_1.simple_marker([45.3288, -121.6625], popup='Mt. Hood Meadows')
map_1.simple_marker([45.3311, -121.7113], popup='Timberline Lodge')
map_1.create_map(path='mthood.html')

I can include HTML in the popup, but I'd like to embed a webpage. Here is my mock-up.

enter image description here

Is it possible?


Source: (StackOverflow)