From regional DHS to leaflet .ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {
    "collapsed": true
   },
   "source": [
    "#  <span style=\"color:#3386cd; font-size:28px\">Mapping DHS with leaflet </span>\n",
    "\n",
    "*Version 2.0 March 10th, 2017*\n",
    "#### &#9733;<i>Etienne David - Data Scientist :) &#9733;</i>\n",
    "---\n",
    "\n",
    "## From country to regional area ! - Applied to Sahel Area\n",
    "\n",
    "Originally from Dr. Thomas Roca, AFD Data Officer \n",
    "\n",
    "The Demographic Health Surveys (DHS) are household surveys covering most of developping countries (and more) in the areas of population, health, and nutrition. These surveys are supported by <a href=\"https://www.usaid.gov/\" target=\"_blank\">USAID</a> and the <a href=\"https://www.census.gov/\" target=\"_blank\"> U.S. Census Bureau</a> (Kudos!)\n",
    "More information about DHS: http://dhsprogram.com/\n",
    "\n",
    "This script uses geolocated dataset to map DHS Data at the subnational level using <a href=\"http://leafletjs.com/\" target=\"_blank\">leaflet</a>.\n",
    "More information about geotagged DHS data: http://spatialdata.dhsprogram.com/home/\n",
    "\n",
    "\n",
    "\n",
    "![](http://spatialdata.dhsprogram.com/global/images/logo.png)\n",
    "\n",
    "---\n",
    "\n",
    "Packages used: fiona, json"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### First we need to get the shapefile without indicator\n",
    "\n",
    "When you download geoJSON from DHS, if the indicator doesn't exist at subnational level, their services won't provide you the shapefile... First we download shapefiles with... Employment characteristics (which is available at subnational level at least)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "import fiona\n",
    "import json \n",
    "from string import Template\n",
    "from IPython.display import HTML\n",
    "import csv\n",
    "import numpy as np\n",
    "from string import Template\n",
    "\n",
    "\n",
    "folder_sub1='sahel'\n",
    "folder_nat = 'chad'\n",
    "folder_sub = folder_sub1 +'/shps/'\n",
    "folder_nat = folder_nat +'/shps/'\n",
    "\n",
    "file_name_sub='sdr_subnational_data'\n",
    "file_name_nat = 'sdr_national_data'\n",
    "\n",
    "title_web = ' Carte du Sahel'\n",
    "title = title_web.replace(\" \",\"\")\n",
    "nomdimension = 'Dimension emploi'\n",
    "\n",
    "\n",
    "\n",
    "\n",
    "#We use fiona package to convert the shapefile into json\n",
    "with fiona.open(folder_sub+file_name_sub+'.shp') as source:\n",
    "    records_subnat = list(source)\n",
    "\n",
    "with fiona.open(folder_nat+file_name_nat+'.shp') as source:\n",
    "    records_nat = list(source)\n",
    "\n",
    "records = records_nat + records_subnat \n",
    "\n",
    "geojson = {\"type\": \"FeatureCollection\",\"features\": records}\n",
    "\n",
    "with open(title+\".json\", \"w\") as f:\n",
    "    f.write(json.dumps(geojson))\n",
    "    f = open(title+\".json\",'r')\n",
    "\n",
    "    filedata = f.read()\n",
    "\n",
    "    f.close()\n",
    "    \n",
    "    \n",
    "filename= title +'.json'\n",
    "json_data=open(filename).read()\n",
    "data = json.loads(json_data)\n",
    "\n",
    "\n",
    "\n",
    "vars()['json']=[]\n",
    "    \n",
    "    #loop over features lenght\n",
    "for features in range (len(data[\"features\"])-1):  \n",
    "        content=data[\"features\"][features]    \n",
    "        vars()['json'].append(content)\n",
    "        \n",
    "        #write extra info used in leaflet\n",
    "        string='{\"type\": \"FeatureCollection\", \"features\":'+ str(vars()['json']) + '}'\n",
    "        #we replace None by string None\n",
    "        string=string.replace('None', '\"None\"')\n",
    "        #some information are coded using single quote, we replace the single quote by double\n",
    "        string=string.replace(\"'\",'\"')\n",
    "        #Save as json to be able to play with it in Python\n",
    "        with open(title+\".json\", \"w\") as f: f.write(string)\n",
    "        \n",
    "        #Save as js to map them with leaflet\n",
    "        string='var statesData ='+string\n",
    "        with open(title+\".js\", \"w\") as f: f.write(string)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 2. List missing values + get min/max"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 15,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "isolist=['AL','AO','AM','AZ','BD','BJ','BO','BT','BR','BF','BU','KH','CM','CF','TD','CO','KM','CG','CD','CI','DR','EC','EG','ES','ER','ET','GA','GH','GU','GN','GY','HT','HN','IA','ID','JO','KK','KE','KY','LS','LB','MD','MW','MV','ML','MR','MX','MB','MA','MZ','NM','NP','NC','NI','NG','PK','PY','PE','PH','RW','ST','SN','SL','ZA','LK','SD','SZ','TJ','TZ','TH','GM','TL','TG','TT','TN','TR','TM','UG','UA','UZ','VN','YE','ZM','ZW']\n",
    "# We use the indicators dictionnary that contains: the indicator code (e.g. i7C3CB1) the definition and \n",
    "# arbitrary min and max we set to define the range\n",
    "\n",
    "file = open(folder_sub1+'/field_names.csv', \"rt\")\n",
    "ind_dict ={}\n",
    "spamreader = csv.reader(file)\n",
    "#skip first line\n",
    "next(spamreader)\n",
    "for row in spamreader:\n",
    "    ind_dict[row[0]]=row[1]\n",
    "\n",
    "\n",
    "Indicator_list= list(ind_dict.keys())\n",
    "#create en empty list to host the missing values list\n",
    "string=[]\n",
    "string1=[]\n",
    "\n",
    "\n",
    "data0 = data\n",
    "\n",
    "dict_min ={key: None for key in Indicator_list}\n",
    "dict_max={key: None for key in Indicator_list}\n",
    "pays = []\n",
    "\n",
    "    \n",
    "#loop over dictionnary values\n",
    "for code,info_ind in ind_dict.items():\n",
    "  \n",
    "   \n",
    "    definition=info_ind.replace(\",\",\" \")\n",
    "        \n",
    "    #Read the features\n",
    "    for features in range (0,len(data0[\"features\"])-1):\n",
    "        try:\n",
    "            Region=data0[\"features\"][features][\"properties\"][\"DHSREGEN\"]\n",
    "            nb = data0[\"features\"][features][\"properties\"][code]\n",
    "            iso = data0[\"features\"][features][\"properties\"][\"ISO\"]\n",
    "        except:\n",
    "            Region=data0[\"features\"][features][\"properties\"][\"NAME\"]\n",
    "            nb = data0[\"features\"][features][\"properties\"][code]\n",
    "            iso = data0[\"features\"][features][\"properties\"][\"CC\"]\n",
    "    \n",
    "        \n",
    "  \n",
    "        if nb ==9999 :\n",
    "            #Append the list of indicators\n",
    "            string.append(iso+','+Region+','+code+','+definition +',no data\\n')\n",
    "        else:\n",
    "            string1.append(iso+','+Region+','+code+','+definition+',' +str(nb) + '\\n')\n",
    "\n",
    "            if dict_max[code] is None:\n",
    "                dict_max[code] = nb\n",
    "            elif dict_min[code] is None:\n",
    "                dict_min[code] = nb\n",
    "            elif(nb > dict_max[code]):\n",
    "                dict_max[code] = nb\n",
    "            elif (nb < dict_min[code]):\n",
    "                dict_min[code] = nb\n",
    "                \n",
    "        if iso not in pays:\n",
    "            pays.append(iso)\n",
    "                \n",
    "            \n",
    "      \n",
    "            \n",
    "            \n",
    "                \n",
    "# Finally Write the missing values list into a csv file \n",
    "with open('missing.csv', \"w\") as f: f.write(''.join(map(str,string)))\n",
    "with open('indicator.csv', \"w\") as f: f.write(''.join(map(str,string1)))\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Create Maps"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "-4.03833\n",
      "12.2383\n",
      "17.5707\n",
      "21.0079\n",
      "13.51\n"
     ]
    }
   ],
   "source": [
    "\n",
    "\n",
    "\n",
    "# We created a GPS dictionnary to store: the gps location of the capital city to center the map so as the zoom level\n",
    "gps_dict={\"AL\":\"ALB,41.1533,20.1683,7\", \"AO\":\"AGO,-11.2027,17.8739,5\", \"AM\":\"ARM,40.0691,45.0382,7\", \"AZ\":\"AZE,40.1431,47.5769,7\",\\\n",
    "          \"BD\":\"BGD,23.685,90.3563,7\", \"BJ\":\"BEN,9.30769,2.31583,6\", \"BO\":\"BOL,-16.2902,-63.5887,5\", \"BT\":\"BTN,27.5142,90.4336,8\",\\\n",
    "          \"BR\":\"BRA,-14.235,-51.9253,4\", \"BF\":\"BFA,12.2383,-1.56159,6\", \"BU\":\"null,-32.87,26.12,6\", \"KH\":\"KHM,12.5657,104.991, 7\",\\\n",
    "          \"CM\":\"CMR,7.36972,12.3547, 5\", \"CF\":\"CAF,6.61111,20.9394,6\", \"TD\":\"TCD,15.4542,18.7322,5\", \"CO\":\"COL,4.57087,-74.2973,5\",\\\n",
    "          \"KM\":\"COM,-11.875,43.8722,8\", \"CG\":\"COG,-0.228021,15.8277,6\", \"CD\":\"COD,-4.03833,21.7587,5\", \"CI\":\"CIV,7.53999,-5.54708,6\",\\\n",
    "          \"DR\":\"null,-32.87,26.12,7\", \"EC\":\"ECU,-1.83124,-78.1834,6\", \"EG\":\"EGY,26.8206,30.8025,5\", \"ES\":\"ESP,40.4637,-3.74922,6\",\\\n",
    "          \"ER\":\"ERI,15.1794,39.7823,7\", \"ET\":\"ETH,9.145,40.4897,5\", \"GA\":\"GAB,-0.803689,11.6094,6\", \"GH\":\"GHA,7.94653,-1.02319,6\",\\\n",
    "          \"GU\":\"GUM,13.4443,144.794,9\", \"GN\":\"GIN,9.94559,-9.69664,6\", \"GY\":\"GUY,4.86042,-58.9302,6\", \"HT\":\"HTI,18.9712,-72.2852,8\",\\\n",
    "          \"HN\":\"HND,15.2,-86.2419,7\", \"IA\":\"null,-32.87,26.12,7\", \"ID\":\"IDN,-0.789275,113.921,4\", \"JO\":\"JOR,30.5852,36.2384,7\",\\\n",
    "          \"KK\":\"null,-32.87,26.12,7\", \"KE\":\"KEN,-0.023559,37.9062,6\", \"KY\":\"CYM,19.5135,-80.567,9\", \"LS\":\"LSO,-29.61,28.2336,8\",\\\n",
    "          \"LB\":\"LBN,33.8547,35.8623,8\", \"MD\":\"MDA,47.4116,28.3699,7\", \"MW\":\"MWI,-13.2543,34.3015,6\", \"MV\":\"MDV,3.20278,73.2207,7\",\\\n",
    "          \"ML\":\"MLI,17.5707,-3.99617,5\", \"MR\":\"MRT,21.0079,-10.9408,5\", \"MX\":\"MEX,23.6345,-102.553,5\", \"MB\":\"null,-32.87,26.12,7\",\\\n",
    "          \"MA\":\"MAR,31.7917,-7.09262,5\", \"MZ\":\"MOZ,-18.6657,35.5296,5\", \"NE\": \"NER, 13.51, 2.12, 5\", \"NM\":\"null,-32.87,26.12,7\", \"NP\":\"NPL,28.3949,84.124,7\",\\\n",
    "          \"NC\":\"NCL,-20.9043,165.618,7\", \"NI\":\"NIC,12.8654,-85.2072,7\", \"NG\":\"NGA,9.082,8.67528,6\", \"PK\":\"PAK,30.3753,69.3451,5\",\\\n",
    "          \"PY\":\"PRY,-23.4425,-58.4438,6\", \"PE\":\"PER,-9.18997,-75.0152,5\", \"PH\":\"PHL,12.8797,121.774,5\", \"RW\":\"RWA,-1.94028,29.8739,8\",\\\n",
    "          \"ST\":\"STP,0.18636,6.61308,8\", \"SN\":\"SEN,14.4974,-14.4524,7\", \"SL\":\"SLE,8.46056,-11.7799,7\", \"ZA\":\"ZAF,-30.5595,22.9375,5\",\\\n",
    "          \"LK\":\"LKA,7.87305,80.7718,7\", \"SD\":\"SDN,12.8628,30.2176,5\", \"SZ\":\"SWZ,-26.5225,31.4659,8\", \"TJ\":\"TJK,38.861,71.2761,6\",\\\n",
    "          \"TZ\":\"TZA,-6.36903,34.8888,5\", \"TH\":\"THA,15.87,100.993,5\", \"GM\":\"GMB,13.4432,-15.3101,8\", \"TL\":\"TLS,-8.87422,125.728,8\",\\\n",
    "          \"TG\":\"TGO,8.61954,0.824782,7\", \"TT\":\"TTO,10.6918,-61.2225,8\", \"TN\":\"TUN,33.8869,9.5375,6\", \"TR\":\"TUR,38.9637,35.2433,6\",\\\n",
    "          \"TM\":\"TKM,38.9697,59.5563,7\", \"UG\":\"UGA,1.37333,32.2903,7\", \"UA\":\"UKR,48.3794,31.1656,6\", \"UZ\":\"UZB,41.3775,64.5853,6\",\\\n",
    "          \"VN\":\"VNM,14.0583,108.277,6\", \"YE\":\"YEM,15.5527,48.5164,6\", \"ZM\":\"ZMB,-13.1339,27.8493,6\", \"ZW\":\"ZWE,-19.0154,29.1549,6\"}\n",
    "\n",
    "#We get the center of countries\n",
    "\n",
    "bary =np.array([0,0])\n",
    "zoomlevel = 10\n",
    "for i in pays:\n",
    "    t = gps_dict[i]\n",
    "    \n",
    "    item = t.split(',')\n",
    "    print(float(item[1]))\n",
    "    bary[0] += float(item[1])\n",
    "    bary[1] += float(item[2])\n",
    "    zoomlevel = min(zoomlevel, float(item[3]))\n",
    "\n",
    "bary = bary /len(pays)\n",
    "\n",
    "Longitude=item[1]\n",
    "Latitude=item[2]\n",
    "\n",
    "\n",
    "\n",
    "#=====================================================================================================================\n",
    "#                                         ! Done\n",
    "#====================================================================================================================="
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 17,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "['CMECMRCIMR', 'CMECMRCU5M', 'EMEMPLMDKM', 'EMEMPLMEMC', 'EMEMPLMENC', 'EMEMPLMN12', 'EMEMPLMNUM', 'EMEMPLMTOT', 'EMEMPLMUNW', 'EMEMPLWDKM', 'EMEMPLWEMC', 'EMEMPLWENC', 'EMEMPLWN12', 'EMEMPLWNUM', 'EMEMPLWTOT', 'EMEMPLWUNW', 'EMOCCPWCLR', 'EMOCCPWDOM', 'EMOCCPWMNS', 'EMOCCPWMNU', 'EMOCCPWPRO', 'EMOCCPWSAL', 'FEFRTRWTFR', 'FPCUSMWANY', 'FPCUSMWMOD', 'FPNADMWPDM', 'FPNADMWUNT', 'MAAAFMWM2B', 'SXAAFSWM2B']\n",
      "{'CMECMRCIMR': 'Probability of dying before the first birthday (in the ten years preceding the survey [five years for Total]) per 1,000 live births', 'CMECMRCU5M': 'Probability of dying before the fifth birthday (in the ten years preceding the survey [five years for Total]) per 1,000 live births', 'EMEMPLMDKM': \"Percentage of men with 'don't know' or missing information on whether they worked in the last 12 months\", 'EMEMPLMEMC': 'Percentage of men who worked in the 12 months preceding the survey and are working currently', 'EMEMPLMENC': 'Percentage of men who worked in the 12 months preceding the survey, but are not working currently', 'EMEMPLMN12': 'Percentage of men who did no work in the 12 months preceding the survey', 'EMEMPLMNUM': 'Number of men aged 15-49(54,59)', 'EMEMPLMTOT': 'Percentage of men: Total', 'EMEMPLMUNW': 'Number of men aged 15-49(54,59) (unweighted)', 'EMEMPLWDKM': \"Percentage of women with 'don't know' or missing information on whether they worked in the last 12 months\", 'EMEMPLWEMC': 'Percentage of women who worked in the 12 months preceding the survey and are working currently', 'EMEMPLWENC': 'Percentage of women who worked in the 12 months preceding the survey, but are not working currently', 'EMEMPLWN12': 'Percentage of women who did no work in the 12 months preceding the survey', 'EMEMPLWNUM': 'Number of women aged 15-49', 'EMEMPLWTOT': 'Percentage of women: Total', 'EMEMPLWUNW': 'Number of women aged 15-49 (unweighted)', 'EMOCCPWCLR': 'Percentage of women employed in the 12 months before the survey whose occupation is clerical', 'EMOCCPWDOM': 'Percentage of women employed in the 12 months before the survey whose occupation is household & domestic', 'EMOCCPWMNS': 'Percentage of women employed in the 12 months before the survey whose occupation is skilled manual', 'EMOCCPWMNU': 'Percentage of women employed in the 12 months before the survey whose occupation is unskilled manual', 'EMOCCPWPRO': 'Percentage of women employed in the 12 months before the survey whose occupation is professional, technical, managerial', 'EMOCCPWSAL': 'Percentage of women employed in the 12 months before the survey whose occupation is sales, services', 'FEFRTRWTFR': 'Total fertility rate for the three years preceding the survey for age group 15-49 expressed per woman', 'FPCUSMWANY': 'Percentage of currently married or in union women currently using any method of contraception', 'FPCUSMWMOD': 'Percentage of currently married or in union women currently using any modern method of contraception', 'FPNADMWPDM': 'Percentage of demand for family planning satisfied by modern methods is calculated as the number of currently married women using modern methods of family planning divided by the number of currently married women with demand for family planning (either with unmet need or currently using any family planning)', 'FPNADMWUNT': 'Percentage of currently married or in union women with an unmet need for family planning', 'MAAAFMWM2B': 'Median age at first marriage or union in years among women age 25-49', 'SXAAFSWM2B': 'Median age at first sexual intercourse in years among women age 25-49'}\n"
     ]
    }
   ],
   "source": [
    "#OKKKKK Now we have to define one style per indicator ! Let's Do it ! \n",
    "text = ''\n",
    "baseMaps =''\n",
    "dict_Maps =''\n",
    "mapon =''\n",
    "variables = ''\n",
    "\n",
    "\n",
    "Indicator_list= list(ind_dict.keys())\n",
    "print(Indicator_list)\n",
    "print(ind_dict)\n",
    "\n",
    "\n",
    "for indicator in Indicator_list:\n",
    "    # save indicator definition\n",
    "    definition=ind_dict[indicator]\n",
    "\n",
    "    baseMaps += '\"'+definition+'\":'+indicator+\",\"\n",
    "    dict_Maps += '\"'+definition+'\":\"'+indicator+'\",'\n",
    "    min_ind= dict_min[indicator]\n",
    "    max_ind= dict_max[indicator]\n",
    "    #Set color range\n",
    "    ind_scale=(max_ind-min_ind)/8\n",
    "    cat0=0\n",
    "    for val in range(1,7+1):\n",
    "        vars()['cat'+str(val)]=round(ind_scale+vars()['cat'+str(val-1)])\n",
    "\n",
    "    Input = {'definition': definition.replace(\"'\",\"\"), 'indicator': indicator, 'cat1':cat1, 'cat2':cat2, 'cat3':cat3,'cat4':cat4,'cat5':cat5,'cat6':cat6, 'cat7':cat7 }   \n",
    "    if not variables:\n",
    "        variables = Template('var $indicator = L.geoJson(statesData, {style: style$indicator, onEachFeature: onEachFeature$indicator}).addTo(map);').safe_substitute(Input)\n",
    "    else:\n",
    "        \n",
    "        variables = variables + Template('''\n",
    "            var $indicator = L.geoJson(statesData, {style: style$indicator, onEachFeature: onEachFeature$indicator});\n",
    "        ''').safe_substitute(Input)\n",
    "    texto = '''\n",
    "                    function resetHighlight$indicator(e) {\n",
    "            \n",
    "                $indicator.resetStyle(e.target);\n",
    "                info.update();\n",
    "            }\n",
    "            \n",
    "            function onEachFeature$indicator(feature, layer) {\n",
    "                layer.on({\n",
    "                    mouseover: highlightFeature,\n",
    "                    mouseout: resetHighlight$indicator,\n",
    "                    click: zoomToFeature\n",
    "                });\n",
    "            }\n",
    "                function getColor$indicator(d) {\n",
    "                            return d==9999 ? '#EEEEEE' :\n",
    "                                   d > $cat7 ? '#1a334c' :\n",
    "                                   d > $cat6  ? '#084594' :\n",
    "                                   d > $cat5  ? '#2171b5' :\n",
    "                                   d > $cat4  ? '#4292c6' :\n",
    "                                   d > $cat3   ? '#6baed6' :\n",
    "                                   d > $cat2   ? '#9ecae1' :\n",
    "                                   d > $cat1   ? '#c6dbef' :\n",
    "                                              '#eff3ff';\n",
    "                        }\n",
    "\n",
    "                        function style$indicator(feature) {\n",
    "                            return {\n",
    "                                weight: 2,\n",
    "                                opacity: 1,\n",
    "                                color: 'white',\n",
    "                                dashArray: '3',\n",
    "                                fillOpacity: 0.7,\n",
    "                                fillColor: getColor$indicator(feature.properties.$indicator)\n",
    "                            };\n",
    "                        }\n",
    "                        \n",
    "                        \n",
    "                 var legend$indicator = L.control({position: 'bottomright'});\n",
    "\n",
    "                        legend$indicator.onAdd = function (map) {\n",
    "\n",
    "                            var div = L.DomUtil.create('div', 'info legend'),\n",
    "                                grades = [$cat1,$cat2,$cat3,$cat4,$cat5,$cat6,$cat7],\n",
    "                                labels = [],\n",
    "                                from, to;\n",
    "\n",
    "                            for (var i = 0; i < grades.length; i++) {\n",
    "                                from = grades[i];\n",
    "                                to = grades[i + 1];\n",
    "\n",
    "                                labels.push(\n",
    "                                    '<i style=\"background:' + getColor$indicator(from + 1) + '\"></i> ' +\n",
    "                                    from + (to ? '&ndash;' + to : '+'));\n",
    "                            }\n",
    "\n",
    "                            div.innerHTML = labels.join('<br>');\n",
    "                            return div;\n",
    "                        };\n",
    "                        \n",
    "                        '''\n",
    "    \n",
    "    file_content = Template(texto).safe_substitute(Input)\n",
    "        \n",
    "    text +='\\n'+file_content\n",
    "    \n",
    "    if not mapon:\n",
    "        temp = '''\n",
    "        map.on('baselayerchange', function (eventLayer) {\n",
    "        doc = eventLayer.name;\n",
    "        indicator = dict_Maps[eventLayer.name];\n",
    "        if (eventLayer.name === '$definition') {\n",
    "        map.removeControl(currentLegend );\n",
    "        currentLegend = legend$indicator;\n",
    "        legend$indicator.addTo(map);\n",
    "        }\n",
    "        '''\n",
    "        mapon = Template(temp).safe_substitute(Input)\n",
    "    else:\n",
    "        mapon += Template(''' \n",
    "            else if  (eventLayer.name === '$definition') {\n",
    "        map.removeControl(currentLegend );\n",
    "        currentLegend = legend$indicator;\n",
    "        legend$indicator.addTo(map);\n",
    "    }''').safe_substitute(Input)\n",
    "\n",
    "#.addTo(map);\n",
    "\n",
    "mapon= mapon+'})'\n",
    "baseMaps = '{' + baseMaps[:-1] + '}'\n",
    "dict_Maps = '{' + dict_Maps[:-1] + '}'\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "\n",
    "Input = {'givemeatitle':title_web, 'Namedimension': nomdimension,'filenamejs': \"sahel.js\", 'Longitude': Longitude, 'Latitude':Latitude, 'zoomlevel':zoomlevel, 'indicator':Indicator_list[0], 'definition': ind_dict[Indicator_list[0]].replace(\"'\",\"\")}   \n",
    "\n",
    "\n",
    "\n",
    "\n",
    "header = '''\n",
    "                  <!DOCTYPE html>\n",
    "            <html><head>\n",
    "                    <title>$givemeatitle</title>\n",
    "                    <meta charset=\"utf-8\" />\n",
    "                    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n",
    "                    <link rel=\"stylesheet\" href=\"https://npmcdn.com/leaflet@1.0.0-rc.3/dist/leaflet.css\" />\n",
    "                    <style>\n",
    "                        #map {\n",
    "                            width: 1080px;\n",
    "                            height: 960px;\n",
    "                        }\n",
    "\n",
    "                        .info {\n",
    "                            padding: 6px 8px;\n",
    "                            font: 14px/16px Arial, Helvetica, sans-serif;\n",
    "                            background: white;\n",
    "                            background: rgba(255,255,255,0.8);\n",
    "                            box-shadow: 0 0 15px rgba(0,0,0,0.2);\n",
    "                            border-radius: 5px;\n",
    "                        }\n",
    "                        .info h4 {\n",
    "                            margin: 0 0 5px;\n",
    "                            color: #777;\n",
    "                        }\n",
    "\n",
    "                        .legend {\n",
    "                            text-align: left;\n",
    "                            line-height: 18px;\n",
    "                            color: #555;\n",
    "                        }\n",
    "                        .legend i {\n",
    "                            width: 18px;\n",
    "                            height: 18px;\n",
    "                            float: left;\n",
    "                            margin-right: 8px;\n",
    "                            opacity: 0.7;\n",
    "                        }\n",
    "                    </style>\n",
    "                </head>\n",
    "                \n",
    "                <body>\n",
    "                    <div id=\"map\"></div>\n",
    "\n",
    "                    <script src=\"https://npmcdn.com/leaflet@1.0.0-rc.3/dist/leaflet.js\"></script>\n",
    "\n",
    "                    <script type=\"text/javascript\" src=\"$filenamejs\"></script>\n",
    "                    <script type=\"text/javascript\">\n",
    "\n",
    "                        var map = L.map('map').setView([$Longitude,$Latitude], $zoomlevel);\n",
    "\n",
    "                        L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw',\n",
    "                            {maxZoom: 18,\n",
    "                            attribution: 'Map data &copy; <a href=\"http://openstreetmap.org\">OpenStreetMap</a> contributors, ' +\n",
    "                                '<a href=\"http://creativecommons.org/licenses/by-sa/2.0/\">CC-BY-SA</a>, ' +\n",
    "                                'Dataviz from <a href=\"https://twitter.com/Thomas_Roca\">@Thomas_Roca </a> with Python',\n",
    "                            id: 'mapbox.light'\n",
    "                        }).addTo(map);\n",
    "                        \n",
    "                                    var info = L.control();\n",
    "\n",
    "            info.onAdd = function (map) {\n",
    "                this._div = L.DomUtil.create('div', 'info');\n",
    "                this.update();\n",
    "                return this._div;\n",
    "            };\n",
    "\n",
    "            info.update = function (props) {\n",
    "                if(props){\n",
    "                if (props[indicator] === 9999) {\n",
    "                var t = 'Missing Value';\n",
    "                } else {\n",
    "                var t = props[indicator];\n",
    "                }\n",
    "                if(props.DHSREGEN){\n",
    "                this._div.innerHTML = (props ?\n",
    "               '<h3>'+props.CNTRYNAMEE+'</h3>' +\n",
    "                '<span style=\"color:#336DA9\"><b>'+doc+': '+\n",
    "                '<span style=\"color:black\">' + t + '</b><br>'+\n",
    "                'Survey Region: <b>' + props.DHSREGEN + '</b><br>' +\n",
    "                'Survey Year: <b> '+props.SVYYEAR + '</b><br>' +\n",
    "                '</b> <i>Source: <b>DHS program</i></b></a>'\n",
    "                : '<b>$Namedimension</b>');\n",
    "                } else {\n",
    "                     this._div.innerHTML = (props ?\n",
    "               '<h3>'+props.NAME+'</h3>' +\n",
    "                '<span style=\"color:#336DA9\"><b>'+doc+': '+\n",
    "                '<span style=\"color:black\">' + t+ '</b><br>' +\n",
    "                'Survey Region: <b>' + props.NAME + '</b><br>' +\n",
    "                'Survey Year: <b> '+props.Survey + '</b><br>' +\n",
    "                '</b> <i>Source: <b>DHS program</i></b></a>'\n",
    "                : '<b>$Namedimension</b>');\n",
    "                \n",
    "                \n",
    "                }\n",
    "                }\n",
    "            };\n",
    "        \n",
    "\n",
    "            info.addTo(map);\n",
    "                    \n",
    "\n",
    "                       map.attributionControl.addAttribution('Data &copy; <a href=\"http://spatialdata.dhsprogram.com/\" target=\"_blank\">DHS Spatial Data Repository</a>');\n",
    "                       \n",
    "                '''\n",
    "highlight = '''\n",
    "\n",
    "            function highlightFeature(e) {\n",
    "                var layer = e.target;\n",
    "\n",
    "                layer.setStyle({\n",
    "                    weight: 5,\n",
    "                    color: '#666',\n",
    "                    dashArray: '',\n",
    "                    fillOpacity: 0.7\n",
    "                });\n",
    "\n",
    "                if (!L.Browser.ie && !L.Browser.opera) {\n",
    "                    layer.bringToFront();\n",
    "                }\n",
    "\n",
    "                info.update(layer.feature.properties);\n",
    "            }\n",
    "\n",
    "\n",
    "\n",
    "\n",
    "            function zoomToFeature(e) {\n",
    "                map.fitBounds(e.target.getBounds());\n",
    "            }\n",
    "\n",
    "       \n",
    "'''\n",
    "overlay = '''\n",
    "var overlayMaps ={}\n",
    "    \n",
    "    L.control.layers(baseMaps, overlayMaps, {\n",
    "    collapsed:true,\n",
    "    position:'bottomleft'\n",
    "}).addTo(map);\n",
    "legend$indicator.addTo(map);\n",
    "currentLegend = legend$indicator;\n",
    "var doc = '$definition';\n",
    "var indicator = '$indicator';\n",
    "\n",
    "\n",
    "\n",
    "\n",
    "''' \n",
    "\n",
    "header = Template(header).safe_substitute(Input)\n",
    "highlight = Template(highlight).safe_substitute(Input)\n",
    "\n",
    "overlay = Template(overlay).safe_substitute(Input)\n",
    "\n",
    "html = header + variables + text + highlight + 'var baseMaps = '+baseMaps+'; var dict_Maps = '+dict_Maps+';'+ overlay + mapon +     '''\n",
    "                </script>\n",
    "            </body>\n",
    "            </html> '''"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "#open an handle\n",
    "f = open(title+\".html\",'w')\n",
    "#write the content within the handle\n",
    "file_content = Template(html).safe_substitute(Input)\n",
    "f.write(file_content)\n",
    "f.close()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "anaconda-cloud": {},
  "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.0"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}