branca experiments

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
}