Creating and Publishing simple web map using CartoDB

CLICK ON THIS TO WATCH YOUTUBE VIDEO DEMO OF THIS PROCEDURE

Today our demonstration will be using an web based mapping application CartoDB to create a simple map for web publishing. CartoDB GUI and tools are quite intuitive and easy to adapt to especially if you have following this blog site and doing some practicing along.

How do I register CartoDB?

Users can register by going to the search bar of any browser of choice and typing in ‘Register for CartoDB’. Users with existing google accounts can just go to the CartoDB and sign in with their google usernames and passwords. There is no need for downloading CartoDB because it is web based.

Creating the web map

Sign in your CartoDB user account. Click on NEW MAP (where the cursor finger is)

Capture-1

This page will open. Click on the CREATE NEW MAP button( where the cursor finger is)

Capture-2

This page will open. To Add datasets to the user account, Click Connect dataset (where the cursor finger is)

Capture-3

An array of choices of where to connect the data to is opened in the next page. For the demo, the source will be online from Google Drive (red boxed).

Capture-12

Click on CONNECT (where the cursor finger is) to connect to the Google Drive.

Capture-13

In the Google Drive, a file is selected, Click CHOOSE (see cursor finger)

Capture-14

In the next page, click CONNECT DATASET

Capture-15

Once the dataset is connected, the MAP VIEW will open and the data will be displayed on a map.

Capture-17

Click on the DATA VIEW and a summary view of the data connected will be displayed.

Capture-18

To edit the contents of the info pop up window of the point data on the map, click the infowindow tab on the lower far right side.

Capture-23

In the info window (red boxed area), different attribute values of the point features can be switched on or off to display in the info pop-up window. The result of these adjustments can be viewed by clicking the point features and viewing the info pop-up (green boxed area).

Capture-21

Also in the right hand pane, the user can add extra point features  by using the Add feature tool (See cursor finger)

Capture-24

User can move down to Change basemap (see red boxed) and change the background map

Capture-26

A window of a variety of different styles of base map will appear. Note the lower red boxed area also makes provision for custom base maps. For the demo, Nokia Hybrid Day was selected.

Capture-27

A satellite imagery background is loaded as the base map.

Capture-28

To adjust the map , Click on Options (see the cursor finger) and switch on or off items the user wants on the map display. For the demo, Search box, Share options, Zoom controls and Legends are switched on.

Capture-29

Click on Add Element > Add title item to give the map a title.

Capture-30

Default title is the name of the dataset connected to the map. For the demo, South West Mast Worksheetcsv Map. See the red boxed area for tools to edit and format the title.

Capture-31

Another useful feature in the Add Element stable is Add Image item. (see cursor finger). This is used to add online images onto the map.

Capture-32

Click on the Preview Map and see the options of viewing the map in Desktop or Mobile version.

Capture-33

Click on the Export Image (red boxed) and the Configure export options window will pop up. There the user can adjust the size of the image to be exported.

Capture-34

A view of the exported image hosted online as a map layer.

Capture-35

On the right side is the Edit button> Export layer allows the user to export the layer in GPX, GeoRSS or KML format.

Capture-36

To publish the map, Click on the SHARE button and the option to Get the link, Embed or adding maps to other applications using the URL appears. User can choose any of these options for publishing for others to view, comment and /or edit the map.

Capture-37

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s