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

#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://qtrandev.github.io/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://raw.githubusercontent.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"
  

Possible future topics:

• Using custom CSS to embed images in popups
• Creating custom points and polygons on a map
• Advanced embedded of the map on web pages using CartoDB.js