Black Lives Matter. Please consider donating to Black Girls Code today.

Why does my map render slowly on Dash?

Hello, I’m trying to build an interactive dashboard with maps and bar graphs. I have started with the map. I’m using geojson to plot polygons on the map using mapbox api. I’m finding that the map renders very slowly. I"m wondering what the reason for this might be?

I have attached my code here:

{
“cells”: [
{
“cell_type”: “code”,
“execution_count”: 1,
“metadata”: {
“collapsed”: true
},
“outputs”: [],
“source”: [
“# Plotly Maps Test 1\n”,
“import dash\n”,
“import dash_core_components as dcc\n”,
“import dash_html_components as html\n”,
“from dash.dependencies import Input, Output\n”,
“import plotly.graph_objs as go\n”,
“import pandas as pd\n”,
“import geopandas as gpd\n”,
“import json\n”,
“\n”
]
},
{
“cell_type”: “code”,
“execution_count”: 3,
“metadata”: {},
“outputs”: [
{
“name”: “stdout”,
“output_type”: “stream”,
“text”: [
“[43.2618685960001, 43.261812305, 43.2614551090001, 43.2612951020001, 43.2610975050001, 43.2609751100001, 43.2607397900001, 43.2597894100001, 43.2593589000001, 43.2591887, 43.2588390010001, 43.2586846660001, 43.258471409, 43.25761069, 43.2575389890001, 43.2567948050001, 43.256687302, 43.2567705010001, 43.2570731120001, 43.2571068880001, 43.2571541890001, 43.2574809970001, 43.257546291, 43.2579475960001, 43.2580032050001, 43.2583027000001, 43.258517398, 43.258601491, 43.2589463990001, 43.2589838900001, 43.2591005030001, 43.2598534050001, 43.2598254930001, 43.2594243880001, 43.2593960990001, 43.2594857980001, 43.2602477030001, 43.26070501, 43.2608215110001, 43.261565412, 43.2619687040001, 43.2626238970001, 43.262555793, 43.2625533090001, 43.2625499980001, 43.2625466980001, 43.2625419030001, 43.26253789, 43.262532407, 43.262526902, 43.262520592, 43.262513589, 43.2625066040001, 43.2622921990001, 43.2622355030001, 43.2621041080001, 43.2618685960001]\n”
]
}
],
“source”: [
“gdf = gpd.GeoDataFrame.from_file(’…/coords.geojson’)\n”,
“\n”,
“centroids = gdf.centroid\n”,
“\n”,
“with open(’…/coords.geojson’,‘r’) as infile:\n”,
" coords = json.load(infile)\n",
“\n”,
“xs=[]\n”,
“ys=[]\n”,
“for i in range(len(coords[‘features’])):\n”,
" tmp=coords[‘features’][i][‘geometry’][‘coordinates’][0]\n",
" xs.append([x[1] for x in tmp])\n",
" ys.append([y[0] for y in tmp])\n",
“\n”,
“print(xs[0])”
]
},
{
“cell_type”: “code”,
“execution_count”: 35,
“metadata”: {},
“outputs”: [
{
“data”: {
“text/plain”: [
“‘file:///Users/cherylto/Google Drive/Hamilton/Plotly/hamilton.html’”
]
},
“execution_count”: 35,
“metadata”: {},
“output_type”: “execute_result”
}
],
“source”: [
#This gets the map, no hover\n”,
“\n”,
“import plotly.offline as pyo\n”,
“import plotly.graph_objs as graph_objs\n”,
“\n”,
“accesstoken = ‘pk.eyJ1IjoiY2hlcnlsdG8iLCJhIjoiY2pmMDhybjlrMGtqZTJxcWowb3p6cjRlciJ9.xeYztQb94PNAFbC1sMqcHQ’\n”,
“\n”,
“# Load and Convert GeoJSON file\n”,
“sources=[{“type”: “FeatureCollection”, ‘features’: [feat]} for feat in coords[‘features’]]\n”,
“\n”,
“xs = gpd.GeoSeries(gdf.centroid).x\n”,
“ys = gpd.GeoSeries(gdf.centroid).y\n”,
“\n”,
“gdf[‘lats’] = ys\n”,
“gdf[‘lons’] = xs\n”,
“\n”,
“\n”,
#Graph Object\n”,
“data = graph_objs.Data([\n”,
" graph_objs.Scattermapbox(\n",
" lat=gdf[‘lats’],\n",
" lon=gdf[‘lons’],\n",
" mode=‘markers’,\n",
" marker=dict(color=’#868d99’, size = 1),\n",
" #customize this text to DA: 000000\n",
" text=[str(i) for i in gdf[‘DA’]],\n",
" )\n",
“])\n”,
“\n”,
“layout = graph_objs.Layout(\n”,
" title=‘My Map’,\n",
" height=800,\n",
" autosize=True,\n",
" hovermode=‘closest’,\n",
" mapbox=dict(\n",
" layers=[\n",
" dict(sourcetype = ‘geojson’,\n",
" source =sources[k],\n",
" below=“water”,\n",
" type = ‘fill’,\n",
" #color = sources[k],#the list of colors for each shape/layer in choropleth\n",
" color = ‘#adbdd6’,\n",
" opacity=0.5,\n",
" ) for k in range(len(sources))\n",
" ],\n",
" accesstoken= accesstoken,\n",
" bearing=0,\n",
" center=dict(\n",
" lat=43.2557,\n",
" lon=-79.8711\n",
" ),\n",
" pitch=0,\n",
" zoom=9,\n",
" style=‘light’\n",
" ),\n",
“)\n”,
“\n”,
“# py.image.save_as(fig, filename=’./map_image_exports/county_test.png’)\n”,
“# from IPython.display import Image\n”,
“# Image(’./map_image_exports/county_test.png’)\n”,
“\n”,
“fig = dict(data=data, layout=layout)\n”,
“pyo.plot(fig, filename=‘hamilton.html’)\n”
]
},
{
“cell_type”: “code”,
“execution_count”: 43,
“metadata”: {
“collapsed”: true
},
“outputs”: [
{
“data”: {
“text/plain”: [
“{‘geometry’: {‘coordinates’: [[[-79.8721650009999, 43.2618685960001],\n”,
" [-79.8719318859999, 43.261812305],\n",
" [-79.8704106959999, 43.2614551090001],\n",
" [-79.8697113859999, 43.2612951020001],\n",
" [-79.8688525919999, 43.2610975050001],\n",
" [-79.8683126989999, 43.2609751100001],\n",
" [-79.8672822119999, 43.2607397900001],\n",
" [-79.8676939839999, 43.2597894100001],\n",
" [-79.8678745099999, 43.2593589000001],\n",
" [-79.8679547129999, 43.2591887],\n",
" [-79.8681058879999, 43.2588390010001],\n",
" [-79.8681760109999, 43.2586846660001],\n",
" [-79.8682729039999, 43.258471409],\n",
" [-79.8686461049999, 43.25761069],\n",
" [-79.8686844149999, 43.2575389890001],\n",
" [-79.8690061869999, 43.2567948050001],\n",
" [-79.8690574069999, 43.256687302],\n",
" [-79.8692776019999, 43.2567705010001],\n",
" [-79.8704239069999, 43.2570731120001],\n",
" [-79.8705520879999, 43.2571068880001],\n",
" [-79.8707488859999, 43.2571541890001],\n",
" [-79.8719256069999, 43.2574809970001],\n",
" [-79.8721585129999, 43.257546291],\n",
" [-79.8735925979999, 43.2579475960001],\n",
" [-79.8737516979999, 43.2580032050001],\n",
" [-79.8749043059999, 43.2583027000001],\n",
" [-79.8756764959999, 43.258517398],\n",
" [-79.8759830049999, 43.258601491],\n",
" [-79.877183994, 43.2589463990001],\n",
" [-79.8773312139999, 43.2589838900001],\n",
" [-79.8772797999999, 43.2591005030001],\n",
" [-79.8769332939999, 43.2598534050001],\n",
" [-79.8768351969999, 43.2598254930001],\n",
" [-79.8754257009999, 43.2594243880001],\n",
" [-79.875290704, 43.2593960990001],\n",
" [-79.8752521039999, 43.2594857980001],\n",
" [-79.874905409, 43.2602477030001],\n",
" [-79.8765357059999, 43.26070501],\n",
" [-79.8764842119999, 43.2608215110001],\n",
" [-79.8761256139999, 43.261565412],\n",
" [-79.8759333119999, 43.2619687040001],\n",
" [-79.8756901179999, 43.2626238970001],\n",
" [-79.8751994889999, 43.262555793],\n",
" [-79.8751717919999, 43.2625533090001],\n",
" [-79.8751442059999, 43.2625499980001],\n",
" [-79.8751165119999, 43.2625466980001],\n",
" [-79.8750888949999, 43.2625419030001],\n",
" [-79.8750612129999, 43.26253789],\n",
" [-79.8750335999999, 43.262532407],\n",
" [-79.8750071109999, 43.262526902],\n",
" [-79.8749805169999, 43.262520592],\n",
" [-79.8749538949999, 43.262513589],\n",
" [-79.8749274079999, 43.2625066040001],\n",
" [-79.8740299989999, 43.2622921990001],\n",
" [-79.8737599139999, 43.2622355030001],\n",
" [-79.8732201879999, 43.2621041080001],\n",
" [-79.8721650009999, 43.2618685960001]]],\n",
" ‘type’: ‘Polygon’},\n",
" ‘properties’: {‘DA’: ‘35250419’},\n",
" ‘type’: ‘Feature’}"
]
},
“execution_count”: 43,
“metadata”: {},
“output_type”: “execute_result”
}
],
“source”: [
“coords[‘features’][0]”
]
},
{
“cell_type”: “code”,
“execution_count”: 51,
“metadata”: {},
“outputs”: [
{
“data”: {
“text/plain”: [
“‘file:///Users/cherylto/Google Drive/Hamilton/Plotly/county_test_drug_data.html’”
]
},
“execution_count”: 51,
“metadata”: {},
“output_type”: “execute_result”
}
],
“source”: [
“# #This gets the polygons without the map\n”,
“\n”,
“# plot_data4 = []\n”,
“# for index,row in gdf.iterrows():\n”,
“# if gdf[‘geometry’][index].type == ‘Polygon’:\n”,
“# x,y = row.geometry.exterior.xy\n”,
“# c_x,c_y = row.geometry.centroid.xy\n”,
“# elif df4[‘geometry’][index].type == ‘MultiPolygon’:\n”,
“# x = [poly.exterior.xy[0] for poly in df4[‘geometry’][index]]\n”,
“# y = [poly.exterior.xy[1] for poly in df4[‘geometry’][index]]\n”,
“# x_c = [poly.centroid.xy[0] for poly in df4[‘geometry’][index]]\n”,
“# y_c = [poly.centroid.xy[1] for poly in df4[‘geometry’][index]] \n”,
“# else: \n”,
“# print(‘stop’)\n”,
“# county_outline = dict(\n”,
“# type = ‘scatter’,\n”,
“# showlegend = False,\n”,
“# legendgroup = “shapes”,\n”,
“# line = dict(color=‘blue’, width=1),\n”,
“# x=x,\n”,
“# y=y,\n”,
“# fill=‘toself’,\n”,
“# fillcolor = ‘rgb(176,196,222)’,\n”,
“# hoverinfo=‘none’\n”,
“# )\n”,
“# hover_point = dict(\n”,
“# type = ‘scatter’,\n”,
“# showlegend = False,\n”,
“# legendgroup = “centroids”,\n”,
“# name = row.DA,\n”,
“# text = row.DA,\n”,
“# marker = dict(size=2, color=‘white’),\n”,
“# x=c_x,\n”,
“# y=c_y,\n”,
“# fill=‘toself’,\n”,
“# )\n”,
“# plot_data4.append(county_outline)\n”,
“# plot_data4.append(hover_point)\n”,
" \n",
“# fig = dict(data=plot_data4, layout=layout)\n”,
“# pyo.plot(fig, filename=‘county_test_drug_data.html’)”
]
},
{
“cell_type”: “code”,
“execution_count”: 28,
“metadata”: {},
“outputs”: [
{
“data”: {
“text/plain”: [
“-79.87209527424827”
]
},
“execution_count”: 28,
“metadata”: {},
“output_type”: “execute_result”
}
],
“source”: [
“\n”
]
},
{
“cell_type”: “code”,
“execution_count”: 29,
“metadata”: {
“collapsed”: true
},
“outputs”: [],
“source”: []
},
{
“cell_type”: “code”,
“execution_count”: null,
“metadata”: {
“collapsed”: true
},
“outputs”: [],
“source”: []
}
],
“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.3”
}
},
“nbformat”: 4,
“nbformat_minor”: 2
}