Skip to content

Instantly share code, notes, and snippets.

@andy-esch

andy-esch/branca experiments.ipynb

Created June 27, 2018 19:33
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 andy-esch/5859a8557d65de70ac81bcc0ef4b98fb to your computer and use it in GitHub Desktop.
Save andy-esch/5859a8557d65de70ac81bcc0ef4b98fb to your computer and use it in GitHub Desktop.
Download ZIP
branca experiments
Display the source blob
Display the rendered blob
Raw
branca experiments.ipynb
{
"cells": [
{
"cell_type": "code",
"execution_count": 2,
"metadata": {},
"outputs": [],
"source": [
"from branca.element import Figure, Element"
]
},
{
"cell_type": "code",
"execution_count": 3,
"metadata": {},
"outputs": [],
"source": [
"f = Figure()"
]
},
{
"cell_type": "code",
"execution_count": 4,
"metadata": {},
"outputs": [
{
"data": {
"text/plain": [
"<branca.element.Element at 0x10ea1d198>"
]
},
"execution_count": 4,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"# setup head contents\n",
"f.header.add_child(Element('<title>CARTO VL + CARTOframes</title>'))\n",
"f.header.add_child(Element('<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">'))\n",
"f.header.add_child(Element('<meta charset=\"UTF-8\">'))\n",
"f.header.add_child(Element('<!-- Include CARTO VL JS -->'))\n",
"f.header.add_child(Element('<script src=\"https://cartodb.github.io/carto-vl/dist/carto-vl.js\"></script>'))\n",
"f.header.add_child(Element('<!-- Include Mapbox GL JS -->'))\n",
"f.header.add_child(Element('<script src=\"https://cartodb-libs.global.ssl.fastly.net/mapbox-gl/v0.45.0-carto1/mapbox-gl.js\"></script>'))\n",
"f.header.add_child(Element('<!-- Include Mapbox GL CSS -->'))\n",
"f.header.add_child(Element('<link href=\"https://cartodb-libs.global.ssl.fastly.net/mapbox-gl/v0.45.0-carto1/mapbox-gl.css\" rel=\"stylesheet\" />'))\n",
"f.header.add_child(Element('<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cartodb.github.io/carto-vl/examples/style.css\">'))\n",
"f.header.add_child(Element('''<style>\n",
" body {\n",
" margin: 0;\n",
" padding: 0;\n",
" }\n",
" #map {\n",
" position: absolute;\n",
" height: 100%;\n",
" width: 100%;\n",
" }\n",
" </style>'''))"
]
},
{
"cell_type": "code",
"execution_count": 5,
"metadata": {},
"outputs": [
{
"data": {
"text/plain": [
"<branca.element.Element at 0x10ea1da58>"
]
},
"execution_count": 5,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"# setup body contents\n",
"f.html.add_child(Element('<div id=\"map\"></div>'))"
]
},
{
"cell_type": "code",
"execution_count": 6,
"metadata": {},
"outputs": [
{
"data": {
"text/plain": [
"<branca.element.Element at 0x11187a860>"
]
},
"execution_count": 6,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"f.script.add_child(Element('''\n",
" const BASEMAPS = {\n",
" DarkMatter: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',\n",
" Voyager: 'https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json',\n",
" Positron: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',\n",
" };\n",
" const map = new mapboxgl.Map({\n",
" container: 'map',\n",
" style: BASEMAPS['DarkMatter'] || BASEMAPS['Voyager'],\n",
" zoom: 9,\n",
" dragRotate: false\n",
" });\n",
"\n",
" let credentials = {\"user\": \"eschbacher\", \"api_key\": \"31f8d5a6030efc139e6d8b143c3d51cc095d016f\"};\n",
" carto.setDefaultAuth({\n",
" user: credentials['user'],\n",
" apiKey: credentials['api_key'] || 'default_public'\n",
" });\n",
" var sources = [{\n",
" \"is_local\": false,\n",
" \"styling\": `@mag: $mag\n",
" @depth: $depth\n",
" width: 20\n",
" strokeWidth: 0`,\n",
" \"source\": \"SELECT * FROM all_month_3\",\n",
" \"interactivity\": {\n",
" \"event\": \"hover\",\n",
" \"header\": '<img src=\\\"https://media1.tenor.com/images/2fe585a89061ff43a1c95f065804f779/tenor.gif?itemid=5120447\\\" />'\n",
" }\n",
" },\n",
" {\n",
" \"is_local\": false,\n",
" \"styling\": `@mag: $mag\n",
" @depth: $depth\n",
" color: blue\n",
" width: 20\n",
" strokeWidth: 0`,\n",
" \"source\": \"SELECT * FROM all_month\",\n",
" \"interactivity\": {\"event\": \"hover\", \"header\": null}\n",
" }];\n",
"\n",
" map.fitBounds([[-179.9737, -65.6681], [179.97, 86.1559]], {animate: false});\n",
"\n",
" sources.forEach((elem, idx) => {\n",
" let temp_source = null;\n",
" if (elem.is_local) {\n",
" let local_json = JSON.parse(elem.source);\n",
" temp_source = new carto.source.GeoJSON(local_json);\n",
" } else {\n",
" temp_source = new carto.source.SQL(elem.source);\n",
" }\n",
" let temp = new carto.Layer(\n",
" 'layer' + idx,\n",
" temp_source,\n",
" new carto.Viz(elem['styling'])\n",
" );\n",
" var last_source = idx === 0 ? 'watername_ocean' : 'layer' + (idx - 1);\n",
" temp.addTo(map, last_source);\n",
" if (elem.interactivity) {\n",
" let interactivity = new carto.Interactivity(temp);\n",
" let tempPopup = new mapboxgl.Popup({\n",
" closeButton: false,\n",
" closeOnClick: false\n",
" });\n",
" if (elem.interactivity.event == 'click') {\n",
" setPopupsClick(tempPopup, interactivity, elem.interactivity.header);\n",
" } else if (elem.interactivity.event == 'hover') {\n",
" setPopupsHover(tempPopup, interactivity, elem.interactivity.header);\n",
" }\n",
" }\n",
" });\n",
" function setPopupsClick(tempPopup, intera, popupHeader) {\n",
" intera.off('featureHover', (event) => {\n",
" updatePopup(tempPopup, event, popupHeader)\n",
" });\n",
" intera.on('featureClick', (event) => {\n",
" updatePopup(tempPopup, event, popupHeader, popupHeader)\n",
" });\n",
" }\n",
" function setPopupsHover(tempPopup, intera, popupHeader) {\n",
" intera.off('featureClick', (event) => {\n",
" updatePopup(tempPopup, event, popupHeader)\n",
" });\n",
" intera.on('featureHover', (event) => {\n",
" updatePopup(tempPopup, event, popupHeader)\n",
" });\n",
" }\n",
" function updatePopup(layer_popup, event, popupHeader) {\n",
" if (event.features.length > 0) {\n",
" const vars = event.features[0].variables;\n",
" let popupHTML = popupHeader ? `<h1>${popupHeader}</h1>` : ``;\n",
" Object.keys(vars).forEach((varName) => {\n",
" popupHTML += `\n",
" <h3 class=\"h3\">${varName}</h3>\n",
" <p class=\"description open-sans\">${vars[varName].value}</p>\n",
" `;\n",
" });\n",
" layer_popup.setLngLat([event.coordinates.lng, event.coordinates.lat])\n",
" .setHTML(`<div>${popupHTML}</div>`);\n",
" if (!layer_popup.isOpen()) {\n",
" layer_popup.addTo(map);\n",
" }\n",
" } else {\n",
" layer_popup.remove();\n",
" }\n",
" }\n",
"'''))"
]
},
{
"cell_type": "code",
"execution_count": 8,
"metadata": {},
"outputs": [
{
"data": {
"text/html": [
"<div style=\"width:100%;\"><div style=\"position:relative;width:100%;height:0;padding-bottom:60%;\"><iframe src=\"data:text/html;charset=utf-8;base64,PCFET0NUWVBFIGh0bWw+CjxoZWFkPiAgICAKICAgIDxtZXRhIGh0dHAtZXF1aXY9ImNvbnRlbnQtdHlwZSIgY29udGVudD0idGV4dC9odG1sOyBjaGFyc2V0PVVURi04IiAvPgogICAgPHRpdGxlPkNBUlRPIFZMICsgQ0FSVE9mcmFtZXM8L3RpdGxlPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiPgogICAgPG1ldGEgY2hhcnNldD0iVVRGLTgiPgogICAgPCEtLSBJbmNsdWRlIENBUlRPIFZMIEpTIC0tPgogICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vY2FydG9kYi5naXRodWIuaW8vY2FydG8tdmwvZGlzdC9jYXJ0by12bC5qcyI+PC9zY3JpcHQ+CiAgICA8IS0tIEluY2x1ZGUgTWFwYm94IEdMIEpTIC0tPgogICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vY2FydG9kYi1saWJzLmdsb2JhbC5zc2wuZmFzdGx5Lm5ldC9tYXBib3gtZ2wvdjAuNDUuMC1jYXJ0bzEvbWFwYm94LWdsLmpzIj48L3NjcmlwdD4KICAgIDwhLS0gSW5jbHVkZSBNYXBib3ggR0wgQ1NTIC0tPgogICAgPGxpbmsgaHJlZj0iaHR0cHM6Ly9jYXJ0b2RiLWxpYnMuZ2xvYmFsLnNzbC5mYXN0bHkubmV0L21hcGJveC1nbC92MC40NS4wLWNhcnRvMS9tYXBib3gtZ2wuY3NzIiByZWw9InN0eWxlc2hlZXQiIC8+CiAgICA8bGluayByZWw9InN0eWxlc2hlZXQiIHR5cGU9InRleHQvY3NzIiBocmVmPSJodHRwczovL2NhcnRvZGIuZ2l0aHViLmlvL2NhcnRvLXZsL2V4YW1wbGVzL3N0eWxlLmNzcyI+CiAgICA8c3R5bGU+CiAgICBib2R5IHsKICAgICAgbWFyZ2luOiAwOwogICAgICBwYWRkaW5nOiAwOwogICAgfQogICAgI21hcCB7CiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTsKICAgICAgaGVpZ2h0OiAxMDAlOwogICAgICB3aWR0aDogMTAwJTsKICAgIH0KICA8L3N0eWxlPgo8L2hlYWQ+Cjxib2R5PiAgICAKICAgIDxkaXYgaWQ9Im1hcCI+PC9kaXY+CjwvYm9keT4KPHNjcmlwdD4gICAgCiAgICAKICAgIGNvbnN0IEJBU0VNQVBTID0gewogICAgICAgIERhcmtNYXR0ZXI6ICdodHRwczovL2Jhc2VtYXBzLmNhcnRvY2RuLmNvbS9nbC9kYXJrLW1hdHRlci1nbC1zdHlsZS9zdHlsZS5qc29uJywKICAgICAgICBWb3lhZ2VyOiAnaHR0cHM6Ly9iYXNlbWFwcy5jYXJ0b2Nkbi5jb20vZ2wvdm95YWdlci1nbC1zdHlsZS9zdHlsZS5qc29uJywKICAgICAgICBQb3NpdHJvbjogJ2h0dHBzOi8vYmFzZW1hcHMuY2FydG9jZG4uY29tL2dsL3Bvc2l0cm9uLWdsLXN0eWxlL3N0eWxlLmpzb24nLAogICAgfTsKICAgIGNvbnN0IG1hcCA9IG5ldyBtYXBib3hnbC5NYXAoewogICAgICBjb250YWluZXI6ICdtYXAnLAogICAgICBzdHlsZTogQkFTRU1BUFNbJ0RhcmtNYXR0ZXInXSB8fCBCQVNFTUFQU1snVm95YWdlciddLAogICAgICB6b29tOiA5LAogICAgICBkcmFnUm90YXRlOiBmYWxzZQogICAgICB9KTsKCiAgICBsZXQgY3JlZGVudGlhbHMgPSB7InVzZXIiOiAiZXNjaGJhY2hlciIsICJhcGlfa2V5IjogIjMxZjhkNWE2MDMwZWZjMTM5ZTZkOGIxNDNjM2Q1MWNjMDk1ZDAxNmYifTsKICAgIGNhcnRvLnNldERlZmF1bHRBdXRoKHsKICAgICAgdXNlcjogY3JlZGVudGlhbHNbJ3VzZXInXSwKICAgICAgYXBpS2V5OiBjcmVkZW50aWFsc1snYXBpX2tleSddIHx8ICdkZWZhdWx0X3B1YmxpYycKICAgIH0pOwogICAgdmFyIHNvdXJjZXMgPSBbewogICAgICAgICAgICAiaXNfbG9jYWwiOiBmYWxzZSwKICAgICAgICAgICAgInN0eWxpbmciOiBgQG1hZzogJG1hZwogICAgICAgICAgICBAZGVwdGg6ICRkZXB0aAogICAgICAgICAgICB3aWR0aDogMjAKICAgICAgICAgICAgc3Ryb2tlV2lkdGg6IDBgLAogICAgICAgICAgICAic291cmNlIjogIlNFTEVDVCAqIEZST00gYWxsX21vbnRoXzMiLAogICAgICAgICAgICAiaW50ZXJhY3Rpdml0eSI6IHsKICAgICAgICAgICAgICAgICJldmVudCI6ICJob3ZlciIsCiAgICAgICAgICAgICAgICAiaGVhZGVyIjogJzxpbWcgc3JjPSJodHRwczovL21lZGlhMS50ZW5vci5jb20vaW1hZ2VzLzJmZTU4NWE4OTA2MWZmNDNhMWM5NWYwNjU4MDRmNzc5L3Rlbm9yLmdpZj9pdGVtaWQ9NTEyMDQ0NyIgLz4nCiAgICAgICAgICAgICAgICB9CiAgICAgICAgICAgIH0sCiAgICAgICAgewogICAgICAgICAgICAiaXNfbG9jYWwiOiBmYWxzZSwKICAgICAgICAgICAgInN0eWxpbmciOiBgQG1hZzogJG1hZwogICAgICAgICAgICBAZGVwdGg6ICRkZXB0aAogICAgICAgICAgICBjb2xvcjogYmx1ZQogICAgICAgICAgICB3aWR0aDogMjAKICAgICAgICAgICAgc3Ryb2tlV2lkdGg6IDBgLAogICAgICAgICAgICAic291cmNlIjogIlNFTEVDVCAqIEZST00gYWxsX21vbnRoIiwKICAgICAgICAgICAgImludGVyYWN0aXZpdHkiOiB7ImV2ZW50IjogImhvdmVyIiwgImhlYWRlciI6IG51bGx9CiAgICAgICAgfV07CgogICAgbWFwLmZpdEJvdW5kcyhbWy0xNzkuOTczNywgLTY1LjY2ODFdLCBbMTc5Ljk3LCA4Ni4xNTU5XV0sIHthbmltYXRlOiBmYWxzZX0pOwoKICAgIHNvdXJjZXMuZm9yRWFjaCgoZWxlbSwgaWR4KSA9PiB7CiAgICAgIGxldCB0ZW1wX3NvdXJjZSA9IG51bGw7CiAgICAgIGlmIChlbGVtLmlzX2xvY2FsKSB7CiAgICAgICAgbGV0IGxvY2FsX2pzb24gPSBKU09OLnBhcnNlKGVsZW0uc291cmNlKTsKICAgICAgICB0ZW1wX3NvdXJjZSA9IG5ldyBjYXJ0by5zb3VyY2UuR2VvSlNPTihsb2NhbF9qc29uKTsKICAgICAgfSBlbHNlIHsKICAgICAgICB0ZW1wX3NvdXJjZSA9IG5ldyBjYXJ0by5zb3VyY2UuU1FMKGVsZW0uc291cmNlKTsKICAgICAgfQogICAgICBsZXQgdGVtcCA9IG5ldyBjYXJ0by5MYXllcigKICAgICAgICAgICdsYXllcicgKyBpZHgsCiAgICAgICAgICB0ZW1wX3NvdXJjZSwKICAgICAgICAgIG5ldyBjYXJ0by5WaXooZWxlbVsnc3R5bGluZyddKQogICAgICApOwogICAgICB2YXIgbGFzdF9zb3VyY2UgPSBpZHggPT09IDAgPyAnd2F0ZXJuYW1lX29jZWFuJyA6ICdsYXllcicgKyAoaWR4IC0gMSk7CiAgICAgIHRlbXAuYWRkVG8obWFwLCBsYXN0X3NvdXJjZSk7CiAgICAgIGlmIChlbGVtLmludGVyYWN0aXZpdHkpIHsKICAgICAgICBsZXQgaW50ZXJhY3Rpdml0eSA9IG5ldyBjYXJ0by5JbnRlcmFjdGl2aXR5KHRlbXApOwogICAgICAgIGxldCB0ZW1wUG9wdXAgPSBuZXcgbWFwYm94Z2wuUG9wdXAoewogICAgICAgICAgICAgICAgICBjbG9zZUJ1dHRvbjogZmFsc2UsCiAgICAgICAgICAgICAgICAgIGNsb3NlT25DbGljazogZmFsc2UKICAgICAgICAgICAgICAgIH0pOwogICAgICAgIGlmIChlbGVtLmludGVyYWN0aXZpdHkuZXZlbnQgPT0gJ2NsaWNrJykgewogICAgICAgICAgc2V0UG9wdXBzQ2xpY2sodGVtcFBvcHVwLCBpbnRlcmFjdGl2aXR5LCBlbGVtLmludGVyYWN0aXZpdHkuaGVhZGVyKTsKICAgICAgICB9IGVsc2UgaWYgKGVsZW0uaW50ZXJhY3Rpdml0eS5ldmVudCA9PSAnaG92ZXInKSB7CiAgICAgICAgICBzZXRQb3B1cHNIb3Zlcih0ZW1wUG9wdXAsIGludGVyYWN0aXZpdHksIGVsZW0uaW50ZXJhY3Rpdml0eS5oZWFkZXIpOwogICAgICAgIH0KICAgICAgfQogICAgfSk7CiAgICBmdW5jdGlvbiBzZXRQb3B1cHNDbGljayh0ZW1wUG9wdXAsIGludGVyYSwgcG9wdXBIZWFkZXIpIHsKICAgICAgaW50ZXJhLm9mZignZmVhdHVyZUhvdmVyJywgKGV2ZW50KSA9PiB7CiAgICAgICAgICB1cGRhdGVQb3B1cCh0ZW1wUG9wdXAsIGV2ZW50LCBwb3B1cEhlYWRlcikKICAgICAgfSk7CiAgICAgIGludGVyYS5vbignZmVhdHVyZUNsaWNrJywgKGV2ZW50KSA9PiB7CiAgICAgICAgICB1cGRhdGVQb3B1cCh0ZW1wUG9wdXAsIGV2ZW50LCBwb3B1cEhlYWRlciwgcG9wdXBIZWFkZXIpCiAgICAgIH0pOwogICAgfQogICAgZnVuY3Rpb24gc2V0UG9wdXBzSG92ZXIodGVtcFBvcHVwLCBpbnRlcmEsIHBvcHVwSGVhZGVyKSB7CiAgICAgIGludGVyYS5vZmYoJ2ZlYXR1cmVDbGljaycsIChldmVudCkgPT4gewogICAgICAgICAgdXBkYXRlUG9wdXAodGVtcFBvcHVwLCBldmVudCwgcG9wdXBIZWFkZXIpCiAgICAgIH0pOwogICAgICBpbnRlcmEub24oJ2ZlYXR1cmVIb3ZlcicsIChldmVudCkgPT4gewogICAgICAgICAgdXBkYXRlUG9wdXAodGVtcFBvcHVwLCBldmVudCwgcG9wdXBIZWFkZXIpCiAgICAgIH0pOwogICAgfQogICAgZnVuY3Rpb24gdXBkYXRlUG9wdXAobGF5ZXJfcG9wdXAsIGV2ZW50LCBwb3B1cEhlYWRlcikgewogICAgICBpZiAoZXZlbnQuZmVhdHVyZXMubGVuZ3RoID4gMCkgewogICAgICAgIGNvbnN0IHZhcnMgPSBldmVudC5mZWF0dXJlc1swXS52YXJpYWJsZXM7CiAgICAgICAgbGV0IHBvcHVwSFRNTCA9IHBvcHVwSGVhZGVyID8gYDxoMT4ke3BvcHVwSGVhZGVyfTwvaDE+YCA6IGBgOwogICAgICAgIE9iamVjdC5rZXlzKHZhcnMpLmZvckVhY2goKHZhck5hbWUpID0+IHsKICAgICAgICAgICAgcG9wdXBIVE1MICs9IGAKICAgICAgICAgICAgICAgIDxoMyBjbGFzcz0iaDMiPiR7dmFyTmFtZX08L2gzPgogICAgICAgICAgICAgICAgPHAgY2xhc3M9ImRlc2NyaXB0aW9uIG9wZW4tc2FucyI+JHt2YXJzW3Zhck5hbWVdLnZhbHVlfTwvcD4KICAgICAgICAgICAgYDsKICAgICAgICB9KTsKICAgICAgICBsYXllcl9wb3B1cC5zZXRMbmdMYXQoW2V2ZW50LmNvb3JkaW5hdGVzLmxuZywgZXZlbnQuY29vcmRpbmF0ZXMubGF0XSkKICAgICAgICAgICAgIC5zZXRIVE1MKGA8ZGl2PiR7cG9wdXBIVE1MfTwvZGl2PmApOwogICAgICAgIGlmICghbGF5ZXJfcG9wdXAuaXNPcGVuKCkpIHsKICAgICAgICAgIGxheWVyX3BvcHVwLmFkZFRvKG1hcCk7CiAgICAgICAgfQogICAgICB9IGVsc2UgewogICAgICAgIGxheWVyX3BvcHVwLnJlbW92ZSgpOwogICAgICB9CiAgICB9Cjwvc2NyaXB0Pg==\" style=\"position:absolute;width:100%;height:100%;left:0;top:0;border:none !important;\" allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe></div></div>"
],
"text/plain": [
"<branca.element.Figure at 0x10ea1d048>"
]
},
"execution_count": 8,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"f"
]
},
{
"cell_type": "code",
"execution_count": 80,
"metadata": {
"scrolled": false
},
"outputs": [
{
"name": "stdout",
"output_type": "stream",
"text": [
"<!DOCTYPE html>\n",
"<head> \n",
" <meta http-equiv=\"content-type\" content=\"text/html; charset=UTF-8\" />\n",
" <title>CARTO VL + CARTOframes</title>\n",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n",
" <meta charset=\"UTF-8\">\n",
" <!-- Include CARTO VL JS -->\n",
" <script src=\"https://cartodb.github.io/carto-vl/dist/carto-vl.js\"></script>\n",
" <!-- Include Mapbox GL JS -->\n",
" <script src=\"https://cartodb-libs.global.ssl.fastly.net/mapbox-gl/v0.45.0-carto1/mapbox-gl.js\"></script>\n",
" <!-- Include Mapbox GL CSS -->\n",
" <link href=\"https://cartodb-libs.global.ssl.fastly.net/mapbox-gl/v0.45.0-carto1/mapbox-gl.css\" rel=\"stylesheet\" />\n",
" <link rel=\"stylesheet\" type=\"text/css\" href=\"https://cartodb.github.io/carto-vl/examples/style.css\">\n",
" <style>\n",
" body {\n",
" margin: 0;\n",
" padding: 0;\n",
" }\n",
" #map {\n",
" position: absolute;\n",
" height: 100%;\n",
" width: 100%;\n",
" }\n",
" </style>\n",
"</head>\n",
"<body> \n",
" <div id=\"map\"></div>\n",
"</body>\n",
"<script> \n",
" \n",
" const BASEMAPS = {\n",
" DarkMatter: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',\n",
" Voyager: 'https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json',\n",
" Positron: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',\n",
" };\n",
" const map = new mapboxgl.Map({\n",
" container: 'map',\n",
" style: BASEMAPS['DarkMatter'] || BASEMAPS['Voyager'],\n",
" zoom: 9,\n",
" dragRotate: false\n",
" });\n",
"\n",
" let credentials = {\"user\": \"eschbacher\", \"api_key\": \"31f8d5a6030efc139e6d8b143c3d51cc095d016f\"};\n",
" carto.setDefaultAuth({\n",
" user: credentials['user'],\n",
" apiKey: credentials['api_key'] || 'default_public'\n",
" });\n",
" var sources = [{\n",
" \"is_local\": false,\n",
" \"styling\": `@mag: $mag\n",
" @depth: $depth\n",
" width: 20\n",
" strokeWidth: 0`,\n",
" \"source\": \"SELECT * FROM all_month_3\",\n",
" \"interactivity\": {\n",
" \"event\": \"hover\",\n",
" \"header\": '<img src=\"https://media1.tenor.com/images/2fe585a89061ff43a1c95f065804f779/tenor.gif?itemid=5120447\" />'\n",
" }\n",
" },\n",
" {\n",
" \"is_local\": false,\n",
" \"styling\": `@mag: $mag\n",
" @depth: $depth\n",
" color: blue\n",
" width: 20\n",
" strokeWidth: 0`,\n",
" \"source\": \"SELECT * FROM all_month\",\n",
" \"interactivity\": {\"event\": \"hover\", \"header\": null}\n",
" }];\n",
"\n",
" map.fitBounds([[-179.9737, -65.6681], [179.97, 86.1559]], {animate: false});\n",
"\n",
" sources.forEach((elem, idx) => {\n",
" let temp_source = null;\n",
" if (elem.is_local) {\n",
" let local_json = JSON.parse(elem.source);\n",
" temp_source = new carto.source.GeoJSON(local_json);\n",
" } else {\n",
" temp_source = new carto.source.SQL(elem.source);\n",
" }\n",
" let temp = new carto.Layer(\n",
" 'layer' + idx,\n",
" temp_source,\n",
" new carto.Viz(elem['styling'])\n",
" );\n",
" var last_source = idx === 0 ? 'watername_ocean' : 'layer' + (idx - 1);\n",
" temp.addTo(map, last_source);\n",
" if (elem.interactivity) {\n",
" let interactivity = new carto.Interactivity(temp);\n",
" let tempPopup = new mapboxgl.Popup({\n",
" closeButton: false,\n",
" closeOnClick: false\n",
" });\n",
" if (elem.interactivity.event == 'click') {\n",
" setPopupsClick(tempPopup, interactivity, elem.interactivity.header);\n",
" } else if (elem.interactivity.event == 'hover') {\n",
" setPopupsHover(tempPopup, interactivity, elem.interactivity.header);\n",
" }\n",
" }\n",
" });\n",
" function setPopupsClick(tempPopup, intera, popupHeader) {\n",
" intera.off('featureHover', (event) => {\n",
" updatePopup(tempPopup, event, popupHeader)\n",
" });\n",
" intera.on('featureClick', (event) => {\n",
" updatePopup(tempPopup, event, popupHeader, popupHeader)\n",
" });\n",
" }\n",
" function setPopupsHover(tempPopup, intera, popupHeader) {\n",
" intera.off('featureClick', (event) => {\n",
" updatePopup(tempPopup, event, popupHeader)\n",
" });\n",
" intera.on('featureHover', (event) => {\n",
" updatePopup(tempPopup, event, popupHeader)\n",
" });\n",
" }\n",
" function updatePopup(layer_popup, event, popupHeader) {\n",
" if (event.features.length > 0) {\n",
" const vars = event.features[0].variables;\n",
" let popupHTML = popupHeader ? `<h1>${popupHeader}</h1>` : ``;\n",
" Object.keys(vars).forEach((varName) => {\n",
" popupHTML += `\n",
" <h3 class=\"h3\">${varName}</h3>\n",
" <p class=\"description open-sans\">${vars[varName].value}</p>\n",
" `;\n",
" });\n",
" layer_popup.setLngLat([event.coordinates.lng, event.coordinates.lat])\n",
" .setHTML(`<div>${popupHTML}</div>`);\n",
" if (!layer_popup.isOpen()) {\n",
" layer_popup.addTo(map);\n",
" }\n",
" } else {\n",
" layer_popup.remove();\n",
" }\n",
" }\n",
"</script>\n"
]
}
],
"source": [
"print(f.render())"
]
},
{
"cell_type": "code",
"execution_count": 81,
"metadata": {},
"outputs": [],
"source": [
"import json"
]
},
{
"cell_type": "code",
"execution_count": 82,
"metadata": {},
"outputs": [],
"source": [
"a = {\n",
" 'name': 'andy',\n",
" 'son': 'cody',\n",
" 'spouse': 'corinne',\n",
" 'lifestory': '''\n",
" This is a really long life story.\n",
" It is all about growing up in Missouri an moving on from there.\n",
" Having a son, and living in NYC.\n",
" '''\n",
"}"
]
},
{
"cell_type": "code",
"execution_count": 55,
"metadata": {},
"outputs": [
{
"data": {
"text/plain": [
"'{\"name\": \"andy\", \"son\": \"cody\", \"spouse\": \"corinne\", \"lifestory\": \"\\\\n This is a really long life story.\\\\n It is all about growing up in Missouri an moving on from there.\\\\n Having a son, and living in NYC.\\\\n \"}'"
]
},
"execution_count": 55,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"json.dumps(a)"
]
}
],
"metadata": {
"kernelspec": {
"display_name": "Python 3",
"language": "python",
"name": "python3"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 3
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.6.5"
}
},
"nbformat": 4,
"nbformat_minor": 2
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment