Setup Instructions
Project:
Version:
Date:
Prepared By:
FAMPO CMP Interactive Map – CartoDB Data Population
1
1/30/2015
Tienna Kim
Senior Software Engineer at Parsons Brinckerhoff
[email protected]
303-390-5882
FAMPO Congestion Management Process (CMP) map utilizes CartoDB technology for underlying
mapping and visualization features. A CartoDB subscription is required to host the map and
visualization.
The FAMPO CMP visualization uses five separate map layers. Selected CartoDB plan must allow for at
least five layers. http://docs.cartodb.com/faqs.html#how-many-layers-can-my-visualization-have
More information about CartoDB plans can be found on CartoDB’s website.
CartoDB Data Population Steps:
1. In CartoDB, create a new table for each of the shape files provided in the ‘CartoDB Tables’
section. The table names must match exactly for the visualization and css to work properly.
a. It is recommended these tables be tagged as ‘fampo_cmp’ for quick access and filtering.
b. All tables should have the privacy setting set to ‘Only people with the link’.
2. Create a new visualization with the five tables created in previous step. Refer to ‘CartoDB
Visualization’ section for layer definitions and settings. The layers must be in the same order as
specified. Drag and drop the layers to the specified order.
a. Set privacy setting to ‘Only people with the link’.
b. After the layers have been added, select the ‘Share’ option for this visualization and
copy the URL specified in the CartoDB.js application. Paste this value into the web
application’s Web.config file for the CartoDBVizLayer key in the appSettings section.
c. Additional Web.config settings:
i. Set the appropriate value for the CartoDBDomain key to match the host name
portion of the visualization URL.
ii. Obtain the API key from the main CartoDB menu. Paste this value for the
CartoDBApiKey key.
CartoDB Tables:
Shape files are located in the fampo_cmp_map.zip/CartoDB_data directory.
Table name
fampo_gwrc_boundary
fampo_corridor_speeds
fampo_vc_crash_rate
fampo_projects_points
fampo_projects_lines
Shape file to import
fampo_gwrc_boundary.zip
fampo_corridor_speeds.zip
fampo_vc_crash_rate.zip
fampo_projects_points.zip
fampo_projects_lines.zip
CartoDB Visualization:
Switch to the ‘Map View’ of the visualization to apply the custom CSS and InfoWindow settings for each
layer. Please note that some CSS styles may be applied dynamically from the FAMPO CMP Interactive
Map application. Be sure to select ‘Apply’ after each update.
Layer 1 – Study Area Boundary
Referenced Table
SQL
CSS
fampo_gwrc_boundary
SELECT * FROM fampo_gwrc_boundary
#fampo_gwrc_boundary{
line-color: #6c756c;
line-width: 6;
line-opacity: 1;
}
Layer 2 - Speeds
Referenced Table
SQL
CSS
fampo_corridor_speeds
SELECT * FROM fampo_corridor_speeds
#fampo_corridor_speeds {
line-width: 3;
line-opacity: 0.8;
}
/* Offset lines when zoomed out to minimize overlapping lines*/
/* Northbound */
#fampo_corridor_speeds[direction=1] {
line-offset: -2;
[zoom > 14] {
line-offset: 0;
}
}
/* Southbound */
#fampo_corridor_speeds[direction=3] {
line-offset: 2;
[zoom > 14] {
line-offset: 0;
}
}
/* Eastbound */
#fampo_corridor_speeds[direction=2] {
line-offset: -2;
[zoom > 14] {
line-offset: 0;
}
}
/* Westbound */
#fampo_corridor_speeds[direction=4] {
line-offset: 2;
[zoom > 14] {
line-offset: 0;
}
}
#fampo_corridor_speeds[am_catid=0] {
line-color: #9e9e9e;
}
#fampo_corridor_speeds[am_catid=1] {
line-color: #8ebd46;
}
#fampo_corridor_speeds[am_catid=2] {
line-color: #ffcc00;
}
#fampo_corridor_speeds[am_catid=3] {
line-color: #e07c2c;
}
#fampo_corridor_speeds[am_catid=4] {
line-color: #b7132a;
}
InfoWindow Width
InfoWindow Custom HTML for
Click event
350px
<style>
div.cartodb-popup { color: #606060 !important;}
div.cartodb-popup h3 {padding: 10px 0px !important; color: #606060 !important; }
div.cartodb-popup p {font-size: 12px;color: #606060 !important;}
div.cartodb-popup-content {margin-top: 0px !important;}
</style>
<div class="cartodb-popup v2">
<a href="#close" class="cartodb-popup-close-button close">x</a>
<div class="cartodb-popup-content-wrapper">
<div class="cartodb-popup-header">
<h3><b>TMC:</b> {{tmc}}</h3>
</div>
<div class="cartodb-popup-content">
<p><b>Route:</b> {{route_name}}</p>
<p><b>Segment From:</b> {{segment_fr}}</p>
<p><b>Segment To:</b> {{segment_to}}</p>
<p><b>AM Peak Average Speed: </b> {{am_peak_sp}}</p>
<p><b>PM Peak Average Speed: </b> {{pm_peak_sp}}</p>
</div>
</div>
<div class="cartodb-popup-tip-container"></div>
</div>
Layer 3 – Crash Rate and V/C Ratio
Referenced Table
SQL
CSS
InfoWindow Width
InfoWindow Custom HTML for
Click event
fampo_vc_crash_rate
SELECT * FROM fampo_vc_crash_rate
#fampo_vc_crash_rate{
polygon-opacity: 0;
line-color: #1a9850;
line-width: 3;
line-opacity: 0.8;
}
350px
<style>
div.cartodb-popup { color: #606060 !important;}
div.cartodb-popup h3 {padding: 10px 0px !important;color: #606060 !important; }
div.cartodb-popup p {font-size: 12px;color: #606060 !important;}
div.cartodb-popup-content {margin-top: 0px !important;}
</style>
<div class="cartodb-popup v2">
<a href="#close" class="cartodb-popup-close-button close">x</a>
<div class="cartodb-popup-content-wrapper">
<div class="cartodb-popup-header">
<h3><b>Route:</b> {{rte_common}}</h3>
</div>
<div class="cartodb-popup-content">
<p><b>Crash Rate:</b> {{crash_rate}}</p>
<p><b>V/C Ratio:</b> {{vc_ratio}}</p>
</div>
</div>
<div class="cartodb-popup-tip-container"></div>
</div>
Layer 4 – Programmed and Planned Improvement Projects – Point-based
The project marker image files are located in the fampo_cmp_map.zip/CartoDB_data/markers/
directory. To update the URL of the marker files, click on the ‘wizard’ tool for this layer and using the
‘Category’ option, set the Column to ‘p_type_id’ and update the image for each p_type_id value. Click
on the ‘IMG’ option and upload the marker files.
Select ‘icon_planned.png’ image for p_type_id = 2.
Select ‘icon_programmed.png’ image for p_type_id = 1.
Re-apply just the style #fampo_projects_points in the CSS window after updating the images.
Referenced Table
SQL
CSS
fampo_projects_points
SELECT * FROM fampo_projects_points
#fampo_projects_points {
marker-fill-opacity: 1;
marker-line-color: #FFF;
marker-line-width: 1.5;
marker-line-opacity: 1;
marker-placement: point;
marker-type: ellipse;
marker-width: 15;
marker-allow-overlap: true;
}
#fampo_projects_points[p_type_id=2] {
marker-file: url(https://s3.amazonaws.com/com.cartodb.usersassets.production/production/pbworld/assets/20140904222222icon_planned.png);
}
#fampo_projects_points[p_type_id=1] {
marker-file: url(https://s3.amazonaws.com/com.cartodb.usersassets.production/production/pbworld/assets/20140904222212icon_programmed.png);
}
InfoWindow Width
350px
InfoWindow Custom HTML for
Click event
<style>
div.cartodb-popup { color: #606060 !important;}
div.cartodb-popup h3 {padding: 10px 0px !important;color: #606060 !important; }
div.cartodb-popup p {font-size: 12px;color: #606060 !important;}
div.cartodb-popup-content {margin-top: 10px !important; padding: 10px 0px 0px 0px;}
</style>
<div class="cartodb-popup v2">
<a href="#close" class="cartodb-popup-close-button close">x</a>
<div class="cartodb-popup-content-wrapper">
<div class="cartodb-popup-header">
<h3>{{project}}</h3>
</div>
<div class="cartodb-popup-content">
<p><b>Locality:</b> {{locality}}</p>
<p>{{description}}</p>
</div>
</div>
<div class="cartodb-popup-tip-container"></div>
</div>
Layer 5 – Programmed and Planned Improvement Projects – Line-based
Referenced Table
SQL
CSS
fampo_projects_lines
SELECT * FROM fampo_projects_lines
#fampo_projects_lines {
line-width: 4;
line-opacity: 0.7;
}
#fampo_projects_lines[p_type_id=2] {
line-color: #b1840a;
}
#fampo_projects_lines[p_type_id=1] {
line-color: #1F78B4;
}
InfoWindow Width
350px
InfoWindow Custom HTML for
Click event
<style>
div.cartodb-popup { color: #606060 !important;}
div.cartodb-popup h3 {padding: 10px 0px !important;color: #606060 !important; }
div.cartodb-popup p {font-size: 12px;color: #606060 !important;}
div.cartodb-popup-content {margin-top: 10px !important; padding: 10px 0px 0px 0px;}
</style>
<div class="cartodb-popup v2">
<a href="#close" class="cartodb-popup-close-button close">x</a>
<div class="cartodb-popup-content-wrapper">
<div class="cartodb-popup-header">
<h3>{{project}}</h3>
</div>
<div class="cartodb-popup-content">
<p><b>Segment From:</b> {{segment_fr}}</p>
<p><b>Segment To:</b> {{segment_to}}</p>
<p>{{description}}</p>
</div>
</div>
<div class="cartodb-popup-tip-container"></div>
</div>
For questions or support, please contact Tienna Kim at Parsons Brinckerhoff ([email protected] / 303390-5882)