Home

Broward Elected Officials CartoDB Tutorial

Broward cities

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 */

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

#cities[cityname="COUNTY REGIONAL FACILITY"] {
   polygon-fill: #DDDDDD;
}
#cities[cityname="FORT LAUDERDALE"] {
   polygon-fill: #b30000;
}
#cities[cityname="CORAL SPRINGS"] {
   polygon-fill: #084081;
}
#cities[cityname="PLANTATION"] {
   polygon-fill: #0868ac;
}
#cities[cityname="SUNRISE"] {
   polygon-fill: #2b8cbe;
}
#cities[cityname="WESTON"] {
   polygon-fill: #a8ddb5;
}
#cities[cityname="DANIA BEACH"] {
   polygon-fill: #1F78B4;
}
#cities[cityname="DAVIE"] {
   polygon-fill: #B2DF8A;
}
#cities[cityname="HOLLYWOOD"] {
   polygon-fill: #33A02C;
}
#cities[cityname="NORTH LAUDERDALE"] {
   polygon-fill: #FB9A99;
}
#cities[cityname="POMPANO BEACH"] {
   polygon-fill: #4eb3d3;
}
#cities[cityname="COCONUT CREEK"] {
   polygon-fill: #d7301f;
}
#cities[cityname="DEERFIELD BEACH"] {
   polygon-fill: #00441b;
}
#cities[cityname="TAMARAC"] {
   polygon-fill: #cc4c02;
}
#cities[cityname="MARGATE"] {
   polygon-fill: #cb181d;
}
#cities[cityname="PARKLAND"] {
   polygon-fill: #E31A1C;
}
#cities[cityname="OAKLAND PARK"] {
   polygon-fill: #addd8e;
}
#cities[cityname="LAUDERHILL"] {
   polygon-fill: #ffffcc;
}
#cities[cityname="PEMBROKE PINES"] {
   polygon-fill: #FDBF6F;
}
#cities[cityname="SOUTHWEST RANCHES"] {
   polygon-fill: #FF7F00;
}
#cities[cityname="TRIBAL LAND"] {
   polygon-fill: #CAB2D6;
}
#cities[cityname="UNINCORPORATED"] {
   polygon-fill: #6A3D9A;
}
#cities {
   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
Hover your mouse over any city on the map. The city name will display when you hover. You can enable any other column to display.

9. Adding click popup

Click the popup icon and then the "Click" tab. Select the cityname and acreage toggle buttons. Drag the cityname item above acreage to determine the order those items are displayed in the popup.
Click on any city on the map. A popup appears with the city name and the acreage.

10. Finishing up

Let others view your map by clicking "Publish" at the top right of the screen. Choose to share a link or embedding it on a website.
You can also choose to export the map by clicking "Edit" then "Export layer"
The map data can be exported to many other formats such as CSV and GeoJSON

Other Topics

Displaying map on a website

Click "Publish" at the top right of the screen. Copy the link ending with viz.json.
Create a simple web page such as creating an index.html file in your GitHub repo then creating a 'gh-pages' branch. In the index.html file of the 'gh-pages' branch or your own web page, you should have the following content:

<html>
<head>
  <title>Broward Elected Officials</title>
  <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
  <script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
  <style>
    html, body, #map {width:100%; height:100%; padding: 0; margin: 0;}
  </style>
</head>
<body>
  <div id='map'></div>
  <script>
    cartodb.createVis('map', 'https://codeforftl.cartodb.com/api/v2/viz/4b423d54-658a-11e5-9994-0ec6f7c8b2b9/viz.json');
  </script>
</body>
</html>

Replace the '...viz.json' link above with your copied link. Open the web page in a browser and you'll see the map.
For an example, look at https://codeforftl.org/BrowardElectedOfficials and view the source code.

Merging cities table with elected officials dataset

View all your datasets by clicking the top "Map" menu and selecting "Your datasets"
Import the "Elected Officials" dataset by clicking "New Dataset" then pasting in the URL for the dataset such as https://github.com/qtrandev/BrowardElectedOfficials/master/ElectedOfficials.txt
Click "Submit" then "Connect Dataset" to import. The "electedofficials" dataset now appears.
Click the original "cities" dataset you have been working with to begin the merge process
Click the "Edit" menu at the top right of the screen, then click "Merge with dataset..."
Choose "Column join" since both datasets have matching "cityname" columns
Select to merge with the "electedofficials" dataset. Select "cityname" columns from both datasets and click "Next Step"
Uncheck the "cityname" column on the "electedofficials" dataset since we don't want to duplicate the column in the merged dataset. Click "Merge Datasets" to merge.
A new dataset is created. You'll have to start all over to create a new map by clicking "Visualize". Choose to create a new map when prompted.
You can style the new map like before. Note that the dataset has a new name so any CSS style code should use that name.