Log in to CartoDB at http://cartodb.com
When you first log in, you'll see a list of maps that you have created. At the top of the page, where it says "cornell / Your Name / Maps", click the word "Maps" and select "Your datasets".
Two datasets have been shared with you for this project. Click "2 Shared with you" to view them.
The main dataset we will be editing collaboratively is called roman_gardens. Click it to view the dataset. There are two views (with a selector at the top of the page):
- data view (as a table)
- map view (as a map)
Switch to the map view. You can use the + and - controls in the top left to zoom in an out.
A "basemap" is the context map that you see underneath the points. CartoDB has several basemaps to choose from. The default is called "Positron" -- it's a muted gray map with relatively few labels. You can always view more details by zooming in. At the local level, you may want to switch to something like "Nokia Hybrid Day" to view aerial photographs. Some ruins are clearly visible on this basemap.
We can also add our own custom basemap. To add the map tiles of the Ancient Roman world that were produced by the Pelagios Project, which states: "The transmission of the tiles to any web-mapping application is permitted under a Create-Commons 3.0 (CC-BY) licence. Attribution to the Pelagios project is required and linking to this About page is encouraged." So later on, when we make our maps public, we should be sure to credit the Pelagios project.
In CartoDB, click the Basemap selector, then click the "+" button next to "Yours", and enter the following URL:
http://pelagios.org/tilesets/imperium/{z}/{x}/{y}.png
http://dh.gu.se/tiles/imperium/{z}/{x}/{y}.png
Note that this basemap will now be listed with a name like "Custom basemap 27". (I'm hoping that there is a way to rename it, but haven't yet figured that out...) Also note that this basemap only zooms in to level 11 -- it will be blank if you try to zoom to level 12 or higher, so at that point it's best to switch back to Positron or Nokia Hybrid Day.
We can also add the Pompeii basemap from the Pompeii Bibliography and Mapping Project. Note that it covers just the area of ancient Pompeii, and only appears for zoom levels 14-19. To add the Pompeii basemap in CartodB, click the Basemap selector, then click the "+" button next to "Yours", and enter the following URL:
https://tiles1.arcgis.com/tiles/2gdL2gxYNFY2TOUb/arcgis/rest/services/PBMP_BasemapCity_WebMercator_V4/MapServer/tile/{z}/{y}/{x}
CartoDB provides several ways of visualizing the data on a map. The default is "Simple", which simply plots each point as an orange dot. But we have a column called verified, and we can color-code the points based on the value of that column:
- On the toolbar to the right of the map, click the "Wizards" icon (looks like a paintbrush)
- Select the "Category" map style (you may need to scroll right to see it)
- Set
Columnto "verified" (the name of the column)
You should then see the various values listed. If you don't like the colors you can change them by clicking the color swatch. You can also try adjusting some of the other display options.
Using the wizards lets you control many aspects of the map. But behind the scenes, it generates a code called "CartoCSS" that specifies the map styles. You can see this code by clicking the "CSS" tool (2 tools below the wizards icon). If you want to set up your map to use the exact same colors as everyone else on the project, simply copy the following CSS and paste it in (replacing whatever was already there):
// CartoCSS for displaying by verified status:
#roman_gardens{
marker-fill-opacity: 0.9;
marker-line-color: #FFF;
marker-line-width: 1;
marker-line-opacity: 1;
marker-placement: point;
marker-type: ellipse;
marker-width: 10;
marker-fill: #FF6600;
marker-allow-overlap: true;
}
#roman_gardens[verified=null] {
marker-fill: #AA44CC;
}
#roman_gardens[verified="wrong"] {
marker-fill: #BB0000;
}
#roman_gardens[verified="close"] {
marker-fill: #FFCC00;
}
#roman_gardens[verified="exact"] {
marker-fill: #229900;
}
The infowindow is the little box that pops up when you click or hover over a point. These can be configured in CartoDB to include only the fields that you think are important to see. (It's not necessary -- or recommended -- to show ALL of the columns in the data table.)
When you click a point before setting up infowindows, it will prompt you to select the fields you want to show. So click "Select fields", which opens the infowindow tool (which can also be accessed via the infowindow tool icon).
Notice that there are separate tabs for configuring the click and hover infowindows. You can click to turn on selected fields, and also drag to change their order. We can also click the </> button on the right, above the list of fields, to edit the underlying HTML code directly. For a concise view of the original place name and the Pleiades match (if any), copy and paste the following into the Click custom HTML:
<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-content">
<p>{{continent}} - {{region}} - {{n1}} - {{n2}} - {{n3}}</p>
<p>verified: {{verified}}</p>
<hr>
<p>Pleiades match: {{pleiadestitle}}</p>
<p>Pleiades location: {{pleiadeslocationprecision}}</p>
</div>
</div>
<div class="cartodb-popup-tip-container"></div>
</div>
Click the legends tool, located just below the CSS tool. Then click the </> button at the top-right of the tool to edit the underlying HTML and paste in the following:
<div class='cartodb-legend category'>
<ul>
<li>
<div class="bullet" style="background: #aa44cc"></div> null
</li>
<li>
<div class="bullet" style="background: #bb0000"></div> wrong
</li>
<li>
<div class="bullet" style="background: #ffcc00"></div> close
</li>
<li>
<div class="bullet" style="background: #229900"></div> exact
</li>
</ul>
</div>
Now that your map is set up, let's starting editing the data!
To change the location of a point, switch to the Nokia Hybrid Day basemap and zoom in far enough to see the local area around the point. Then click the point, which will open the infowindow. At the bottow of the infowindow, there are three icons: "edit data", "edit geometry", and "delete". Click the middle one ("edit geometry") and then drag to point to a new location. Then click "done" at the top of the map, which will save the change to the database.
To change the data associated with a point, click the point, and then click the "edit data" button. A form will appear, and there you can change any of the values. Note that you may need to scroll down to see the "type" and "verified" fields (they are listed in alphabetical order). Be sure to click "Save" after you make any changes!