Skip to content

Instantly share code, notes, and snippets.

@PBrockmann

PBrockmann/jupyter_javascript-leaflet.ipynb

Last active January 26, 2018 16:51
Show Gist options
  • Save PBrockmann/90e1e395a737b22776cdba9eceb9fe91 to your computer and use it in GitHub Desktop.
Save PBrockmann/90e1e395a737b22776cdba9eceb9fe91 to your computer and use it in GitHub Desktop.
Download ZIP
jupyter python notebook with leaflet
Display the source blob
Display the rendered blob
Raw
jupyter_javascript-leaflet.ipynb
{
"cells": [
{
"cell_type": "code",
"execution_count": 1,
"metadata": {},
"outputs": [
{
"data": {
"application/javascript": [
"\n",
"require.config({\n",
" paths: {\n",
" jquery: '//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery',\n",
" leaflet: '//cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet'\n",
" }\n",
"});\n",
"\n",
"element.append('<style>.leaflet-tile { border: 2px solid red;}</style>');\n",
"element.append('<style>.rendered_html :link { text-decoration: none; }</style>');\n",
"element.append('<link href=\"http://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css\" rel=\"stylesheet\"/>');\n",
"element.append('<div id=\"map\" style=\"width: 600px; height: 400px; border: 1px solid black;\"></div>');\n",
"\n",
"require(['jquery', 'leaflet'], function(jquery, L){\n",
" \n",
"var crs = L.CRS.EPSG4326;\n",
"\n",
"var frontiers = L.tileLayer.wms('http://www.globalcarbonatlas.org:8080/geoserver/GCA/wms', {\n",
" layers: 'GCA:GCA_frontiersCountryAndRegions',\n",
" format: 'image/png',\n",
" crs: crs,\n",
" transparent: true\n",
"});\n",
" \n",
"var map = L.map('map', {\n",
" layers: [frontiers],\n",
" crs: crs,\n",
" center: [0, -40],\n",
" zoom: 1,\n",
" attributionControl: false\n",
"});\n",
"\n",
"$('#map').resizable();\n",
" \n",
"//===============================================\n",
"$('#map').on('resizestop', function() {\n",
" map.invalidateSize(true);\n",
"});\n",
"\n",
"\n",
"}); "
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"%%javascript\n",
"\n",
"require.config({\n",
" paths: {\n",
" jquery: '//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery',\n",
" leaflet: '//cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet'\n",
" }\n",
"});\n",
"\n",
"element.append('<style>.leaflet-tile { border: 2px solid red;}</style>');\n",
"element.append('<style>.rendered_html :link { text-decoration: none; }</style>');\n",
"element.append('<link href=\"http://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css\" rel=\"stylesheet\"/>');\n",
"element.append('<div id=\"map\" style=\"width: 600px; height: 400px; border: 1px solid black;\"></div>');\n",
"\n",
"require(['jquery', 'leaflet'], function(jquery, L){\n",
" \n",
"var crs = L.CRS.EPSG4326;\n",
"\n",
"var frontiers = L.tileLayer.wms('http://www.globalcarbonatlas.org:8080/geoserver/GCA/wms', {\n",
" layers: 'GCA:GCA_frontiersCountryAndRegions',\n",
" format: 'image/png',\n",
" crs: crs,\n",
" transparent: true\n",
"});\n",
" \n",
"var map = L.map('map', {\n",
" layers: [frontiers],\n",
" crs: crs,\n",
" center: [0, -40],\n",
" zoom: 1,\n",
" attributionControl: false\n",
"});\n",
"\n",
"$('#map').resizable();\n",
" \n",
"//===============================================\n",
"$('#map').on('resizestop', function() {\n",
" map.invalidateSize(true);\n",
"});\n",
"\n",
"\n",
"}); "
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": []
}
],
"metadata": {
"kernelspec": {
"display_name": "Python 2",
"language": "python",
"name": "python2"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 2
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython2",
"version": "2.7.14"
}
},
"nbformat": 4,
"nbformat_minor": 2
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment