Skip to content

Instantly share code, notes, and snippets.

@wrobstory

wrobstory/README.md

Last active December 23, 2017 10:41
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save wrobstory/5609747 to your computer and use it in GitHub Desktop.
Save wrobstory/5609747 to your computer and use it in GitHub Desktop.
Download ZIP
Folium Circle Markers
Raw
README.md

A Leaflet.js map created with Folium- click on the marker to see the popup text. This map was generated with the following Python code:

map_2 = folium.Map(location=[45.5236, -122.6750], tiles='Stamen Toner',
                   zoom_start=13)
map_2.simple_marker(location=[45.5244, -122.6699], popup='The Waterfront')
map_2.circle_marker(location=[45.5215, -122.6261], radius=500,
                    popup='Laurelhurst Park', line_color='#3186cc',
                    fill_color='#3186cc')
map_2.create_map(path='portland.html')
Raw
circle_marker.py
import folium
map_2 = folium.Map(location=[45.5236, -122.6750], tiles='Stamen Toner',
zoom_start=13)
map_2.simple_marker(location=[45.5244, -122.6699], popup='The Waterfront')
map_2.circle_marker(location=[45.5215, -122.6261], radius=500,
popup='Laurelhurst Park', line_color='#3186cc',
fill_color='#3186cc')
map_2.create_map(path='portland.html')
Raw
index.html
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>
<style>
#map {
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
}
</style>
</head>
<body>
<div id="map" style="width: 960px; height: 500px"></div>
<script>
var map = L.map('map').setView([45.5236, -122.675], 13);
L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.jpg', {
maxZoom: 18,
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.'
}).addTo(map);
var marker_1 = L.marker([45.5244, -122.6699]);
marker_1.bindPopup("The Waterfront");
map.addLayer(marker_1)
var circle_1 = L.circle([45.5215, -122.6261], 500, {
color: '#3186cc',
fillColor: '#3186cc',
fillOpacity: 0.6
});
circle_1.bindPopup("Laurelhurst Park");
map.addLayer(circle_1)
</script>
</body>
@kenmaready
Copy link

Do you need to set a parameter in CircleMarker of fill=True for this to show the fill_color in the current version of folium?

@wipsy
Copy link

wipsy commented Dec 23, 2017

Thanks a lot !
NB : in my version of Folium, I have to call :

            folium.CircleMarker(location=[45.5215, -122.6261], radius=500,
                    popup='Laurelhurst Park', line_color='#3186cc',
                    fill_color='#3186cc', fill=True).add_to(map_2)

instead of:

map_2.circle_marker(location=[45.5215, -122.6261], radius=500,
                    popup='Laurelhurst Park', line_color='#3186cc',
                    fill_color='#3186cc')

and yes, I do need to set fill to True as the dafault seems to be false

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment