Skip to content

Commit 6fd5be4

Browse files
wrobstorywrobstory
committed
Merge pull request #48 from ocefpaf/color_markers
Color markers
2 parents 6185ae2 + d19a8f4 commit 6fd5be4

14 files changed

+1945
-760
lines changed

‎README.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,17 @@ map_1.create_map(path='mthood.html')
6161

6262
[Live example](http://bl.ocks.org/wrobstory/5609718)
6363

64+
Folium supports colors and marker icon types (from bootstrap)
65+
```python
66+
map_1 = folium.Map(location=[45.372, -121.6972], zoom_start=12,tiles='Stamen Terrain')
67+
map_1.simple_marker([45.3288, -121.6625], popup='Mt. Hood Meadows',marker_icon='cloud')
68+
map_1.simple_marker([45.3311, -121.7113], popup='Timberline Lodge',marker_color='green')
69+
map_1.simple_marker([45.3300, -121.6823], popup='Some Other Location',marker_color='red',marker_icon='info-sign')
70+
map_1.create_map(path='iconTest.html')
71+
```
72+
73+
![iconTest](http://cl.ly/image/2b0l1K0v370P/icon_test.png)
74+
6475
Folium also supports circle-style markers, with custom size and color:
6576
```python
6677
map_2 = folium.Map(location=[45.5236, -122.6750], tiles='Stamen Toner',

‎examples/clustered_markers.ipynb

Lines changed: 215 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,215 @@
1+
{
2+
"metadata": {
3+
"name": "",
4+
"signature": "sha256:6dfa186feeffb3d029e244faef5cd7c75b438c815731793cb01200120c064258"
5+
},
6+
"nbformat": 3,
7+
"nbformat_minor": 0,
8+
"worksheets": [
9+
{
10+
"cells": [
11+
{
12+
"cell_type": "code",
13+
"collapsed": false,
14+
"input": [
15+
"from IPython.display import HTML\n",
16+
"import folium\n",
17+
"\n",
18+
"def inline_map(map):\n",
19+
" \"\"\"\n",
20+
" Embeds the HTML source of the map directly into the IPython notebook.\n",
21+
" \n",
22+
" This method will not work if the map depends on any files (json data). Also this uses\n",
23+
" the HTML5 srcdoc attribute, which may not be supported in all browsers.\n",
24+
" \"\"\"\n",
25+
" map._build_map()\n",
26+
" return HTML('<iframe srcdoc=\"{srcdoc}\" style=\"width: 100%; height: 510px; border: none\"></iframe>'.format(srcdoc=map.HTML.replace('\"', '&quot;')))\n",
27+
"\n",
28+
"def embed_map(map, path=\"m213map.html\"):\n",
29+
" \"\"\"\n",
30+
" Embeds a linked iframe to the map into the IPython notebook.\n",
31+
" \n",
32+
" Note: this method will not capture the source of the map into the notebook.\n",
33+
" This method should work for all maps (as long as they use relative urls).\n",
34+
" \"\"\"\n",
35+
" map.create_map(path=path)\n",
36+
" return HTML('<iframe src=\"files/{path}\" style=\"width: 100%; height: 510px; border: none\"></iframe>'.format(path=path))"
37+
],
38+
"language": "python",
39+
"metadata": {},
40+
"outputs": [],
41+
"prompt_number": 6
42+
},
43+
{
44+
"cell_type": "code",
45+
"collapsed": false,
46+
"input": [
47+
"map = folium.Map(width=500,height=500,location=[44, -73], zoom_start=4)\n",
48+
"\n",
49+
"map.simple_marker([40.67, -73.94], popup='Add <b>popup</b> text here.',marker_color='green',marker_icon='ok-sign',clustered_marker=True)\n",
50+
"map.simple_marker([44.67, -73.94], popup='Add <b>popup</b> text here.',marker_color='red',marker_icon='remove-sign',clustered_marker=True)\n",
51+
"map.simple_marker([44.67, -71.94], popup='Add <b>popup</b> text here.',clustered_marker=True)\n",
52+
"\n",
53+
"map.circle_marker([44, -71], popup='', fill_color='#ff0000', radius=5000, line_color='#ff0000')\n",
54+
"\n",
55+
"points1 = [40,-71]\n",
56+
"points2 = [42,-73]\n",
57+
"map.line([points1, points2])\n",
58+
"\n",
59+
"inline_map(map)"
60+
],
61+
"language": "python",
62+
"metadata": {},
63+
"outputs": [
64+
{
65+
"html": [
66+
"<iframe srcdoc=\"<!DOCTYPE html>\n",
67+
"<head>\n",
68+
" <meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=UTF-8&quot; />\n",
69+
" <link rel=&quot;stylesheet&quot; href=&quot;http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css&quot; />\n",
70+
" <script src=&quot;http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js&quot;></script>\n",
71+
"\n",
72+
" <script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js&quot;></script>\n",
73+
"\n",
74+
" <link rel=&quot;stylesheet&quot; href=&quot;//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css&quot;>\n",
75+
" <link rel=&quot;stylesheet&quot; href=&quot;//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css&quot;>\n",
76+
" <script src=&quot;//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js&quot;></script>\n",
77+
"\n",
78+
" <link rel=&quot;stylesheet&quot; href=&quot;//cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.0/leaflet.awesome-markers.css&quot;>\n",
79+
" <script src=&quot;//cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.0/leaflet.awesome-markers.js&quot;></script>\n",
80+
"\n",
81+
"\n",
82+
" <link rel=&quot;stylesheet&quot; href=&quot;//cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.Default.css&quot;>\n",
83+
" <link rel=&quot;stylesheet&quot; href=&quot;//cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.css&quot;>\n",
84+
" <script src=&quot;//cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/leaflet.markercluster-src.js&quot;></script>\n",
85+
" <script src=&quot;//cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/leaflet.markercluster.js&quot;></script>\n",
86+
"\n",
87+
" \n",
88+
"\n",
89+
" \n",
90+
" \n",
91+
" \n",
92+
" \n",
93+
"\n",
94+
"\n",
95+
" <style>\n",
96+
"\n",
97+
" #map {\n",
98+
" position:absolute;\n",
99+
" top:0;\n",
100+
" bottom:0;\n",
101+
" right:0;\n",
102+
" left:0;\n",
103+
" }\n",
104+
"\n",
105+
" </style>\n",
106+
"</head>\n",
107+
"\n",
108+
"<body>\n",
109+
"\n",
110+
" <div class=&quot;folium-map&quot; id=&quot;folium_9e79bd032eb94e15a717ee68977d0895&quot; style=&quot;width: 500px; height: 500px&quot;></div>\n",
111+
"\n",
112+
" <script>\n",
113+
"\n",
114+
" \n",
115+
"\n",
116+
" var map = L.map('folium_9e79bd032eb94e15a717ee68977d0895').setView([44, -73], 4);\n",
117+
"\n",
118+
" L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {\n",
119+
" maxZoom: 18,\n",
120+
" attribution: 'Map data (c) <a href=&quot;http://openstreetmap.org&quot;>OpenStreetMap</a> contributors'\n",
121+
" }).addTo(map);\n",
122+
"\n",
123+
" //cluster group\n",
124+
" var clusteredmarkers = L.markerClusterGroup();\n",
125+
" //section for adding clustered markers\n",
126+
" \n",
127+
" var marker_1_icon = L.AwesomeMarkers.icon({ icon: 'ok-sign',markerColor: 'green',prefix: 'glyphicon' });\n",
128+
" var marker_1 = L.marker([40.67, \n",
129+
"\t\t\t\t\t\t\t-73.94],\n",
130+
"\t\t\t\t\t\t\t{'icon':marker_1_icon}\n",
131+
"\t\t\t\t\t\t\t);\n",
132+
" marker_1.bindPopup(&quot;Add <b>popup</b> text here.&quot;);\n",
133+
" clusteredmarkers.addLayer(marker_1)\n",
134+
" \n",
135+
" var marker_2_icon = L.AwesomeMarkers.icon({ icon: 'remove-sign',markerColor: 'red',prefix: 'glyphicon' });\n",
136+
" var marker_2 = L.marker([44.67, \n",
137+
"\t\t\t\t\t\t\t-73.94],\n",
138+
"\t\t\t\t\t\t\t{'icon':marker_2_icon}\n",
139+
"\t\t\t\t\t\t\t);\n",
140+
" marker_2.bindPopup(&quot;Add <b>popup</b> text here.&quot;);\n",
141+
" clusteredmarkers.addLayer(marker_2)\n",
142+
" \n",
143+
" var marker_3_icon = L.AwesomeMarkers.icon({ icon: 'info-sign',markerColor: 'blue',prefix: 'glyphicon' });\n",
144+
" var marker_3 = L.marker([44.67, \n",
145+
"\t\t\t\t\t\t\t-71.94],\n",
146+
"\t\t\t\t\t\t\t{'icon':marker_3_icon}\n",
147+
"\t\t\t\t\t\t\t);\n",
148+
" marker_3.bindPopup(&quot;Add <b>popup</b> text here.&quot;);\n",
149+
" clusteredmarkers.addLayer(marker_3)\n",
150+
" \n",
151+
" //add the clustered markers to the group anyway\n",
152+
" map.addLayer(clusteredmarkers);\n",
153+
"\n",
154+
" \n",
155+
"\n",
156+
" \n",
157+
" var circle_1 = L.circle([44, -71], 5000, {\n",
158+
" color: '#ff0000',\n",
159+
" fillColor: '#ff0000',\n",
160+
" fillOpacity: 0.6\n",
161+
" });\n",
162+
" circle_1.bindPopup(&quot;&quot;);\n",
163+
" map.addLayer(circle_1)\n",
164+
" \n",
165+
"\n",
166+
" \n",
167+
" var latLngs = [ [40, -71], [42, -73], ];\n",
168+
"var line_1 = L.polyline(latLngs,{\n",
169+
"\n",
170+
"\n",
171+
"\n",
172+
"});\n",
173+
" map.addLayer(line_1);\n",
174+
" \n",
175+
"\n",
176+
" \n",
177+
"\n",
178+
" \n",
179+
"\n",
180+
" </script>\n",
181+
"\n",
182+
"</body>\" style=\"width: 100%; height: 510px; border: none\"></iframe>"
183+
],
184+
"metadata": {},
185+
"output_type": "pyout",
186+
"prompt_number": 7,
187+
"text": [
188+
"<IPython.core.display.HTML at 0x10fa29a90>"
189+
]
190+
}
191+
],
192+
"prompt_number": 7
193+
},
194+
{
195+
"cell_type": "code",
196+
"collapsed": false,
197+
"input": [],
198+
"language": "python",
199+
"metadata": {},
200+
"outputs": [],
201+
"prompt_number": 7
202+
},
203+
{
204+
"cell_type": "code",
205+
"collapsed": false,
206+
"input": [],
207+
"language": "python",
208+
"metadata": {},
209+
"outputs": []
210+
}
211+
],
212+
"metadata": {}
213+
}
214+
]
215+
}

0 commit comments

Comments
 (0)