Home

Broward Elected Officials CartoDB Tutorial

Contents

1. Creating a CartoDB account

2. Downloading the data

3. Creating a new CartoDB map

4. Uploading the data

5. Viewing the map

6. Use default visualizations

7. Changing the styles

8. Adding hover popup

9. Adding click popup

10. Finishing up

Steps

1. Creating a CartoDB account

• Go to https://cartodb.com
• Find and click the "Sign Up" button
• The easiest option is to sign up with your Google account
• Once you have signed in, you will see the dashboard without any created maps

2. Downloading the data

• Go to http://gis.broward.org/GISData.htm
• Click on the "City Boundaries" link to download the zip file
• Alternatively, the zip file can be downloaded directly at http://gis.broward.org/GISData/Zipfiles/cities.zip or from here.
• The zip file contains shapefiles for the city boundaries. It doesn't have to be unzipped, but the contents in it are:

3. Creating a new CartoDB map

• On the CartoDB dashboard, click "New Map"
• Choose to "Connect dataset", then ensure "Data file" is selected, then click "Browse"

4. Uploading the data

• Select the zip file downloaded earlier
• Click "Connect Dataset" to upload the zip file. It is optional to "Let CartoDB automatically guess the data type and content".
• Wait a minute for the dataset to be uploaded. Once finished the dashboard will show the created map

5. Viewing the map

• Click on the map to view it. An initial map is shown.
• Click on the "Data View" tab to see the raw data of each city

6. Use default visualizations

• Go back to the "Map View" and click the "wizards" menu
• Select "Category" from the options and "cityname" as the "Column"
• Click on an empty area to hide the wizards menu then click to zoom out the map to show Broward county

7. Changing the styles

• Click on the "CSS" icon to open the CartoCSS editor. As we can see, default styles have been created by the Category wizard based on the "cityname".
• Replace the content with your own styles. For example, use the following styles. Note that '#cities9999' could be replaced by the actual dataset name if that is not the default 'cities' name.

/** category visualization */

#cities9999 {
   polygon-opacity: 0.7;
   line-color: #FFF;
   line-width: 0.5;
   line-opacity: 1;
}

#cities9999[cityname="COUNTY REGIONAL FACILITY"] {
   polygon-fill: #DDDDDD;
}
#cities9999[cityname="FORT LAUDERDALE"] {
   polygon-fill: #b30000;
}
#cities9999[cityname="CORAL SPRINGS"] {
   polygon-fill: #084081;
}
#cities9999[cityname="PLANTATION"] {
   polygon-fill: #0868ac;
}
#cities9999[cityname="SUNRISE"] {
   polygon-fill: #2b8cbe;
}
#cities9999[cityname="WESTON"] {
   polygon-fill: #a8ddb5;
}
#cities9999[cityname="DANIA BEACH"] {
   polygon-fill: #1F78B4;
}
#cities9999[cityname="DAVIE"] {
   polygon-fill: #B2DF8A;
}
#cities9999[cityname="HOLLYWOOD"] {
   polygon-fill: #33A02C;
}
#cities9999[cityname="NORTH LAUDERDALE"] {
   polygon-fill: #FB9A99;
}
#cities9999[cityname="POMPANO BEACH"] {
   polygon-fill: #4eb3d3;
}
#cities9999[cityname="COCONUT CREEK"] {
   polygon-fill: #d7301f;
}
#cities9999[cityname="DEERFIELD BEACH"] {
   polygon-fill: #00441b;
}
#cities9999[cityname="TAMARAC"] {
   polygon-fill: #cc4c02;
}
#cities9999[cityname="MARGATE"] {
   polygon-fill: #cb181d;
}
#cities9999[cityname="PARKLAND"] {
   polygon-fill: #E31A1C;
}
#cities9999[cityname="OAKLAND PARK"] {
   polygon-fill: #addd8e;
}
#cities9999[cityname="LAUDERHILL"] {
   polygon-fill: #ffffcc;
}
#cities9999[cityname="PEMBROKE PINES"] {
   polygon-fill: #FDBF6F;
}
#cities9999[cityname="SOUTHWEST RANCHES"] {
   polygon-fill: #FF7F00;
}
#cities9999[cityname="TRIBAL LAND"] {
   polygon-fill: #CAB2D6;
}
#cities9999[cityname="UNINCORPORATED"] {
   polygon-fill: #6A3D9A;
}
#cities9999 {
   polygon-fill: #5CA2D1;
}

• Click "Apply style" and see the map change colors based on the styles

8. Adding hover popup

• Click the popup icon to open the infowindow menu, then click the "Hover" tab
• In the hover tab, click the cityname toggle button
  

9. Adding click popup

10. Finishing up