{
"metadata": {
"name": "",
"signature": "sha256:2e8ed3220d238355be3b39f04358c0113d77cb3dbba6d29e28a9fe683b8042d9"
},
"nbformat": 3,
"nbformat_minor": 0,
"worksheets": [
{
"cells": [
{
"cell_type": "markdown",
"metadata": {},
"source": [
"[Leaflet - a JavaScript library for mobile-friendly maps](http://leafletjs.com/)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"I have a question: can you use requirejs to deal with non-AMD JavaScript files? According to http://stackoverflow.com/a/14603398/7782: maybe. Seems to be affirmed by [Requirement #9: Load any script](http://requirejs.org/docs/requirements.html#9)."
]
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"from IPython.display import HTML, display, clear_output\n",
"import uuid\n",
"\n",
"import jinja2\n",
"from jinja2 import Template\n",
"\n",
"from settings import LEAFLET_KEY\n",
"\n",
"CSS_URL = \"http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css\"\n",
"LEAFLET_JS_URL = \"http://cdn.leafletjs.com/leaflet-0.7.2/leaflet\"\n",
"\n",
"div_id = 'i' + str(uuid.uuid4())\n",
"\n",
"JS = u\"\"\"\n",
"\n",
"\"\"\"\n",
"\n",
"# demonstrates interference from .rendered_html CSS\n",
"\n",
"CSS = \"\"\"\n",
"\n",
"\"\"\"\n",
"\n",
"HTML_ = \"\"\"\n",
"\n",
"\"\"\"\n",
"\n",
"template = Template(CSS + JS + HTML_)\n",
"HTML(template.render(leaflet_js_url=LEAFLET_JS_URL,\n",
" css_url = CSS_URL,\n",
" leaflet_api_key = LEAFLET_KEY,\n",
" lat=37.8717,\n",
" long=-122.2728,\n",
" zoom=12,\n",
" div_id=div_id,\n",
" height=200\n",
" ))\n",
"\n"
],
"language": "python",
"metadata": {},
"outputs": [
{
"html": [
"\n",
"\n",
"\n",
"\n",
"\n",
""
],
"metadata": {},
"output_type": "pyout",
"prompt_number": 1,
"text": [
""
]
}
],
"prompt_number": 1
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"# will normalize.css fix this problem?\n",
"\n",
"from IPython.display import HTML, display, clear_output\n",
"import uuid\n",
"\n",
"import jinja2\n",
"from jinja2 import Template\n",
"\n",
"from settings import LEAFLET_KEY\n",
"\n",
"CSS_URL = \"http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css\"\n",
"LEAFLET_JS_URL = \"http://cdn.leafletjs.com/leaflet-0.7.2/leaflet\"\n",
"\n",
"div_id = 'i' + str(uuid.uuid4())\n",
"\n",
"JS = u\"\"\"\n",
"\n",
"\"\"\"\n",
"\n",
"# demonstrates interference from .rendered_html CSS\n",
"\n",
"CSS = \"\"\"\n",
"\n",
"\"\"\"\n",
"\n",
"HTML_ = \"\"\"\n",
"\n",
"\"\"\"\n",
"\n",
"template = Template(CSS + JS + HTML_)\n",
"HTML(template.render(leaflet_js_url=LEAFLET_JS_URL,\n",
" css_url = CSS_URL,\n",
" leaflet_api_key = LEAFLET_KEY,\n",
" lat=37.8717,\n",
" long=-122.2728,\n",
" zoom=12,\n",
" div_id=div_id,\n",
" height=200\n",
" ))\n",
"\n"
],
"language": "python",
"metadata": {},
"outputs": [
{
"html": [
"\n",
"\n",
"\n",
"\n",
"\n",
""
],
"metadata": {},
"output_type": "pyout",
"prompt_number": 2,
"text": [
""
]
}
],
"prompt_number": 2
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"import uuid\n",
"from functools import partial\n",
"\n",
"from IPython.display import HTML, display, clear_output\n",
"\n",
"import jinja2\n",
"from jinja2 import Template\n",
"\n",
"from settings import LEAFLET_KEY\n",
"\n",
"CSS_URL = \"http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css\"\n",
"LEAFLET_JS_URL = \"http://cdn.leafletjs.com/leaflet-0.7.2/leaflet\"\n",
"\n",
"\n",
"JS = u\"\"\"\n",
"\n",
"\"\"\"\n",
"\n",
"\n",
"CSS = \"\"\"\n",
"\n",
"\"\"\"\n",
"\n",
"HTML_ = \"\"\"\n",
"\n",
"\"\"\"\n",
"\n",
"template = Template(CSS + JS + HTML_)\n",
"\n",
"\n",
"def leaflet(leaflet_api_key, lat, long, zoom, height):\n",
" \n",
" div_id = 'i' + str(uuid.uuid4())\n",
" \n",
" display(HTML(template.render(leaflet_js_url=LEAFLET_JS_URL,\n",
" css_url = CSS_URL,\n",
" leaflet_api_key = leaflet_api_key,\n",
" lat=lat,\n",
" long=long,\n",
" zoom=zoom,\n",
" div_id=div_id,\n",
" height=height\n",
" )))\n",
"\n"
],
"language": "python",
"metadata": {},
"outputs": [],
"prompt_number": 3
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"leaflet(leaflet_api_key=LEAFLET_KEY, lat=37.8717, long=-122.2728, zoom=9, height=300)"
],
"language": "python",
"metadata": {},
"outputs": [
{
"html": [
"\n",
"\n",
"\n",
"\n",
"\n",
""
],
"metadata": {},
"output_type": "display_data",
"text": [
""
]
}
],
"prompt_number": 4
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"%%javascript\n",
"require([\"leaflet\"], function(leaflet) {\n",
"\n",
"var map = window._my_maps['i3c9fe247-096f-4df2-b6d7-291bb6d3b0e1']\n",
"console.log(map.getCenter());\n",
" \n",
"});"
],
"language": "python",
"metadata": {},
"outputs": [
{
"javascript": [
"require([\"leaflet\"], function(leaflet) {\n",
"\n",
"var map = window._my_maps['i3c9fe247-096f-4df2-b6d7-291bb6d3b0e1']\n",
"console.log(map.getCenter());\n",
" \n",
"});"
],
"metadata": {},
"output_type": "display_data",
"text": [
""
]
}
],
"prompt_number": 5
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"from IPython.html import widgets\n",
"from IPython.html.widgets import interact, fixed\n",
"\n",
"zoom_widget = widgets.IntSliderWidget(min=1, max=18, step=1)\n",
"zoom_widget.value = 12\n",
"\n",
"interact (leaflet, leaflet_api_key=fixed(LEAFLET_KEY), lat=fixed(37.8717), \n",
" long=fixed(-122.2728),height=fixed(500), zoom=zoom_widget)"
],
"language": "python",
"metadata": {},
"outputs": [
{
"html": [
"\n",
"\n",
"\n",
"\n",
"\n",
""
],
"metadata": {},
"output_type": "display_data",
"text": [
""
]
}
],
"prompt_number": 6
},
{
"cell_type": "heading",
"level": 1,
"metadata": {},
"source": [
"Doing more with a map"
]
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"%%javascript\n",
"console.log(IPython.notebook.get_cells());"
],
"language": "python",
"metadata": {},
"outputs": [
{
"javascript": [
"console.log(IPython.notebook.get_cells());"
],
"metadata": {},
"output_type": "display_data",
"text": [
""
]
}
],
"prompt_number": 7
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"%%javascript\n",
"require([\"leaflet\"], function(leaflet) {\n",
"\n",
" console.log(L.version);\n",
"\n",
" // attempt to find maps in the window object -- not successful.\n",
" var mapObjects = [];\n",
" for(var key in window) {\n",
" var value = window[key];\n",
" if (value instanceof L.Map) {\n",
" // foo instance found in the global scope, named by key\n",
" mapObjects.push(value)\n",
" }\n",
" }\n",
"\n",
" console.log(mapObjects);\n",
" \n",
"});"
],
"language": "python",
"metadata": {},
"outputs": [
{
"javascript": [
"require([\"leaflet\"], function(leaflet) {\n",
"\n",
" console.log(L.version);\n",
"\n",
" // attempt to find maps in the window object -- not successful.\n",
" var mapObjects = [];\n",
" for(var key in window) {\n",
" var value = window[key];\n",
" if (value instanceof L.Map) {\n",
" // foo instance found in the global scope, named by key\n",
" mapObjects.push(value)\n",
" }\n",
" }\n",
"\n",
" console.log(mapObjects);\n",
" \n",
"});"
],
"metadata": {},
"output_type": "display_data",
"text": [
""
]
}
],
"prompt_number": 8
},
{
"cell_type": "code",
"collapsed": false,
"input": [],
"language": "python",
"metadata": {},
"outputs": [],
"prompt_number": 8
}
],
"metadata": {}
}
]
}