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
}