Skip to content

Color markers #48

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Sep 28, 2014
Merged

Color markers #48

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
442f427
update to template and marker to allow for colored markers using http…
Jul 9, 2014
b353d1b
Update README.md
birdage Jul 9, 2014
684544a
move to web refs
Jul 9, 2014
f62b62d
add ipython notebook example
Jul 9, 2014
8f092e6
fix the circle markers
Jul 17, 2014
e76af1f
very simple test for clustered markers
Jul 17, 2014
801d91c
added a cluster marker group, and simple markers can be added to the …
Jul 17, 2014
741ea04
add sample notebook
Jul 17, 2014
26f9668
adds wms,tile support
Aug 18, 2014
d19a8f4
add example wms/tile notebook
Aug 18, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,17 @@ map_1.create_map(path='mthood.html')

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

Folium supports colors and marker icon types (from bootstrap)
```python
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',marker_icon='cloud')
map_1.simple_marker([45.3311, -121.7113], popup='Timberline Lodge',marker_color='green')
map_1.simple_marker([45.3300, -121.6823], popup='Some Other Location',marker_color='red',marker_icon='info-sign')
map_1.create_map(path='iconTest.html')
```

![iconTest](http://cl.ly/image/2b0l1K0v370P/icon_test.png)

Folium also supports circle-style markers, with custom size and color:
```python
map_2 = folium.Map(location=[45.5236, -122.6750], tiles='Stamen Toner',
Expand Down
215 changes: 215 additions & 0 deletions examples/clustered_markers.ipynb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,215 @@
{
"metadata": {
"name": "",
"signature": "sha256:6dfa186feeffb3d029e244faef5cd7c75b438c815731793cb01200120c064258"
},
"nbformat": 3,
"nbformat_minor": 0,
"worksheets": [
{
"cells": [
{
"cell_type": "code",
"collapsed": false,
"input": [
"from IPython.display import HTML\n",
"import folium\n",
"\n",
"def inline_map(map):\n",
" \"\"\"\n",
" Embeds the HTML source of the map directly into the IPython notebook.\n",
" \n",
" This method will not work if the map depends on any files (json data). Also this uses\n",
" the HTML5 srcdoc attribute, which may not be supported in all browsers.\n",
" \"\"\"\n",
" map._build_map()\n",
" return HTML('<iframe srcdoc=\"{srcdoc}\" style=\"width: 100%; height: 510px; border: none\"></iframe>'.format(srcdoc=map.HTML.replace('\"', '&quot;')))\n",
"\n",
"def embed_map(map, path=\"m213map.html\"):\n",
" \"\"\"\n",
" Embeds a linked iframe to the map into the IPython notebook.\n",
" \n",
" Note: this method will not capture the source of the map into the notebook.\n",
" This method should work for all maps (as long as they use relative urls).\n",
" \"\"\"\n",
" map.create_map(path=path)\n",
" return HTML('<iframe src=\"files/{path}\" style=\"width: 100%; height: 510px; border: none\"></iframe>'.format(path=path))"
],
"language": "python",
"metadata": {},
"outputs": [],
"prompt_number": 6
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"map = folium.Map(width=500,height=500,location=[44, -73], zoom_start=4)\n",
"\n",
"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",
"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",
"map.simple_marker([44.67, -71.94], popup='Add <b>popup</b> text here.',clustered_marker=True)\n",
"\n",
"map.circle_marker([44, -71], popup='', fill_color='#ff0000', radius=5000, line_color='#ff0000')\n",
"\n",
"points1 = [40,-71]\n",
"points2 = [42,-73]\n",
"map.line([points1, points2])\n",
"\n",
"inline_map(map)"
],
"language": "python",
"metadata": {},
"outputs": [
{
"html": [
"<iframe srcdoc=\"<!DOCTYPE html>\n",
"<head>\n",
" <meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=UTF-8&quot; />\n",
" <link rel=&quot;stylesheet&quot; href=&quot;http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css&quot; />\n",
" <script src=&quot;http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js&quot;></script>\n",
"\n",
" <script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js&quot;></script>\n",
"\n",
" <link rel=&quot;stylesheet&quot; href=&quot;//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css&quot;>\n",
" <link rel=&quot;stylesheet&quot; href=&quot;//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css&quot;>\n",
" <script src=&quot;//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js&quot;></script>\n",
"\n",
" <link rel=&quot;stylesheet&quot; href=&quot;//cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.0/leaflet.awesome-markers.css&quot;>\n",
" <script src=&quot;//cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.0/leaflet.awesome-markers.js&quot;></script>\n",
"\n",
"\n",
" <link rel=&quot;stylesheet&quot; href=&quot;//cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.Default.css&quot;>\n",
" <link rel=&quot;stylesheet&quot; href=&quot;//cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.css&quot;>\n",
" <script src=&quot;//cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/leaflet.markercluster-src.js&quot;></script>\n",
" <script src=&quot;//cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/leaflet.markercluster.js&quot;></script>\n",
"\n",
" \n",
"\n",
" \n",
" \n",
" \n",
" \n",
"\n",
"\n",
" <style>\n",
"\n",
" #map {\n",
" position:absolute;\n",
" top:0;\n",
" bottom:0;\n",
" right:0;\n",
" left:0;\n",
" }\n",
"\n",
" </style>\n",
"</head>\n",
"\n",
"<body>\n",
"\n",
" <div class=&quot;folium-map&quot; id=&quot;folium_9e79bd032eb94e15a717ee68977d0895&quot; style=&quot;width: 500px; height: 500px&quot;></div>\n",
"\n",
" <script>\n",
"\n",
" \n",
"\n",
" var map = L.map('folium_9e79bd032eb94e15a717ee68977d0895').setView([44, -73], 4);\n",
"\n",
" L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {\n",
" maxZoom: 18,\n",
" attribution: 'Map data (c) <a href=&quot;http://openstreetmap.org&quot;>OpenStreetMap</a> contributors'\n",
" }).addTo(map);\n",
"\n",
" //cluster group\n",
" var clusteredmarkers = L.markerClusterGroup();\n",
" //section for adding clustered markers\n",
" \n",
" var marker_1_icon = L.AwesomeMarkers.icon({ icon: 'ok-sign',markerColor: 'green',prefix: 'glyphicon' });\n",
" var marker_1 = L.marker([40.67, \n",
"\t\t\t\t\t\t\t-73.94],\n",
"\t\t\t\t\t\t\t{'icon':marker_1_icon}\n",
"\t\t\t\t\t\t\t);\n",
" marker_1.bindPopup(&quot;Add <b>popup</b> text here.&quot;);\n",
" clusteredmarkers.addLayer(marker_1)\n",
" \n",
" var marker_2_icon = L.AwesomeMarkers.icon({ icon: 'remove-sign',markerColor: 'red',prefix: 'glyphicon' });\n",
" var marker_2 = L.marker([44.67, \n",
"\t\t\t\t\t\t\t-73.94],\n",
"\t\t\t\t\t\t\t{'icon':marker_2_icon}\n",
"\t\t\t\t\t\t\t);\n",
" marker_2.bindPopup(&quot;Add <b>popup</b> text here.&quot;);\n",
" clusteredmarkers.addLayer(marker_2)\n",
" \n",
" var marker_3_icon = L.AwesomeMarkers.icon({ icon: 'info-sign',markerColor: 'blue',prefix: 'glyphicon' });\n",
" var marker_3 = L.marker([44.67, \n",
"\t\t\t\t\t\t\t-71.94],\n",
"\t\t\t\t\t\t\t{'icon':marker_3_icon}\n",
"\t\t\t\t\t\t\t);\n",
" marker_3.bindPopup(&quot;Add <b>popup</b> text here.&quot;);\n",
" clusteredmarkers.addLayer(marker_3)\n",
" \n",
" //add the clustered markers to the group anyway\n",
" map.addLayer(clusteredmarkers);\n",
"\n",
" \n",
"\n",
" \n",
" var circle_1 = L.circle([44, -71], 5000, {\n",
" color: '#ff0000',\n",
" fillColor: '#ff0000',\n",
" fillOpacity: 0.6\n",
" });\n",
" circle_1.bindPopup(&quot;&quot;);\n",
" map.addLayer(circle_1)\n",
" \n",
"\n",
" \n",
" var latLngs = [ [40, -71], [42, -73], ];\n",
"var line_1 = L.polyline(latLngs,{\n",
"\n",
"\n",
"\n",
"});\n",
" map.addLayer(line_1);\n",
" \n",
"\n",
" \n",
"\n",
" \n",
"\n",
" </script>\n",
"\n",
"</body>\" style=\"width: 100%; height: 510px; border: none\"></iframe>"
],
"metadata": {},
"output_type": "pyout",
"prompt_number": 7,
"text": [
"<IPython.core.display.HTML at 0x10fa29a90>"
]
}
],
"prompt_number": 7
},
{
"cell_type": "code",
"collapsed": false,
"input": [],
"language": "python",
"metadata": {},
"outputs": [],
"prompt_number": 7
},
{
"cell_type": "code",
"collapsed": false,
"input": [],
"language": "python",
"metadata": {},
"outputs": []
}
],
"metadata": {}
}
]
}
Loading