Putting Maps, Images and Data on the Web

Exporting Data From Track Kit and Epicollect - 41

Track Kit GPS Mapping App

Uploading a Track from Your Device to the Track Kit Website

1. Make sure you are logged into your Track Kit account on your device. Log in under Settings (iOS)

or Menu (Android).

2. On your smartphone or tablet, from the main map screen, tap the Tracks icon and select

TRACKS. ***ANDROID USERS, tap the Menu icon and select TRACKS

3. Tap on “On The Device” to ensure you are looking at the tracks on your phone/tablet.

4. Locate the track you just collected and wish to upload to the server and tap the blue cloud icon.

This will upload that track to your account on the Track-Kit.com website.

5. Once your track has been loaded, the blue cloud will turn gray.

6. To ensure your track has been uploaded, tap “On The Server.” Your track should be listed.

Exporting Data from the Track Kit Website to Your Computer

1. Open a web browser (Chrome or Firefox) and go to http://track-kit.net.

2. Log into your Track Kit account

3. Click on My Tracks. Click on the title of the track you just collected.

4. On the Track Info panel on the left side of the screen, locate Download Track. Click on the KML

link.

5. Specify a location where the track will be saved. Click on Browse… to select a drive and folder

location (this may be different on a Mac). If you have a USB flash drive, save it there. Otherwise,

save the KML to the hard drive of the computer you are using (but don’t forget the name of the file

and WHERE you saved it!).

Epicollect5 Field Form App

Uploading Field Data from Your Device to the Epicollect Website

Note: this step should have been completed after the water quality field activity on Day 1. If not, follow the

steps below.

1. Open the Epicollect5 app on your device, select the water quality project

2. Upload any unsynched data, photos, video and audio files

Exporting Data from Track Kit & Epicollect

Follow the Instructor Steps

Exporting Data From Track Kit and Epicollect - 42

Exporting Data from the Epicollect Website to Your Computer

1. Open a web browser (Chrome or Firefox) and go to http://five.epicollect.net

2. Click on Find Project and click on Search.

3. Type “Water Quality Monitoring” into search box

4. Locate the NRCA Water Quality Monitoring project. Click on the View button below the NRCA

logo.

5. From the Water Quality Monitoring project page, click View Data. Data will display in a table.

6. Click on the Download icon.

7. Under Mapping, select “Customized” from download menu.

8. Select CSV as the format. Click Download.

9. In download window, save the file to your USB flash drive or computer’s hard drive. Don’t forget

the name of the file and WHERE you saved it!

10. The Epicollect CSV file will be saved as a compressed .zip file. Locate the folder where the file is

saved and double click on it. Follow the instructions to unzip the file.

Creating a Google Map - 43

This guided activity will lead you through creating a customized Google Map using the GPS field data

collected with the Track Kit and Epicollect5 mobile apps.

Getting Started with Google Maps

Google Places is part of Google Maps. It provides a way for Google users to create, save and share a

customized a Google Map. These maps are often referred to as Google MyMaps.

Sign into Google Maps

- Open a new tab in your browser and go to Google Maps.

- If you are not already signed into your Google Account, you will see a blue Sign In icon in

the upper right hand corner. Click it and sign in with your Google password.

Google My Places

- Google My Places allows you to create and save your own Google maps. To find it in Google Maps,

click on the burger icon (three horizontal lines) in the search bar in the upper left hand corner of

Google Maps.

- In the panel that appears, click on Your Places.

- In the Your places panel, click on Maps. If you have ever

created maps in Google My Maps, you will see them listed.

Adding Field Data to Google Maps

Hands-on Activity

Creating a Google Map - 44

Create a New Map

- At the bottom of the Maps tab in the Your places panel, click on Create Map. Google will switch to

the Map Editor and create a new, Untitled map.

- Click on the words, Untitled map in the panel on the left side of

the map.

- Edit the map title and description to reflect the activities you

completed in this workshop. See example on right. Click Save.

Importing Track Kit Data to Google Maps

Your Track Kit data looks great (better) in Google Maps. Trust us. You’ll see. In this step of the exercise,

you’ll upload the KML file to Google Maps, My Places. From there you can do more edits, or share your

map in a variety of ways.

Import Your Track Kit KML

- Below your newly updated Map title and Description you will see Google has created an “Untitled

layer”. This is where you will import your Track Kit KML file.

- Below the layer name, click on the blue Import button.

- In the Choose a file to import window, be sure Upload is

selected and click on “Select a file from your computer”.

This is where you will navigate to and select the KML file you

exported from Track Kit and saved to your USB flash drive or

computer’s hard drive.

Creating a Google Map - 45

- Your Track Kit GPS data will be added to your Google Map in two layers, one containing waypoints,

and another containing your track(s). Take a minute to review the graphic below to orient yourself to

the Google My Maps interface.

The Google My Maps Interface

The image below points out important features of the Google My Maps interface. We’ll take a closer look

at some of these in the following steps of the exercise.

Formatting Waypoints in Google My Maps

- Click on the three dots in the Waypoints layer and select Rename this layer in the options that

appear. Rename the layer to better reflect the type of data the waypoints represent.

Undo/Redo Pan Add Waypoint Draw Line Add Directions Measure

Format

Waypoint

Symbols

and

Labels

Format

Track

Line

Color and

Labels

Change Base map

Options &

Open Data Table

Creating a Google Map - 46

- Click on the three dots again. This time

select Open data table. A table

displaying the waypoint information will

appear. Notice you can edit the

content of these fields. Any changes

here will also be reflected in the pop-up

window that appears when you click on

the waypoint symbol on the map.

Caution: don’t mess with the wptPhotos

field or else your images will not appear

in the pop-ups!

- Close the table.

- Click on the Individual styles link under the layer name. This will allow you to customize the

appearance of the waypoint markers on your map. You will also be able to

add labels (we’ll do that in the next step).

- Click on the arrows under Group places by and check out the options.

- For now, select Individual Styles. Hover your mouse over the name of one of your waypoints. Notice

a paint can icon appears. Click on it.

- Change the color and icon of the waypoint.

(All markers the same)

(Markers numbered in a

particular order)

(All markers unique)

(Marker symbol

determined by a data field)

Creating a Google Map - 47

There are many icon options in Google My Maps. You can even upload a custom icon.

- If you have time to spare, repeat this with the other waypoints.

Add Labels to Your Map

- Click on the Individual styles paint brush icon under the waypoint layer name again. This time look

for Set labels. Click on the arrows to specify the field you wish to use to label the features on your

map (hint: try name first). That’s all there is to it!

Waypoint Pop-Up Windows

Waypoints can also be edited from the pop-up window itself. Let’s take a look.

- Click on any of your waypoints on the map. A pop-up window will open, displaying the information you

collected (and edited in either Track Kit or Google Maps), along with the photograph collected in the

field. Tools for editing the content of the pop-up are located at the bottom of the pop-up window.

Creating a Google Map - 48

- Click on the paint can. The style tools should look familiar to you.

- Click on the pencil. This allows you to edit the content of the pop-

up. Uncheck the box next to wptPhotos. This will remove the field from

the pop-up display. It’s unnecessary and clutters the pop-up.

- Click on the camera icon. Notice you can add additional photos or

video clips. Select cancel.

- Click on the driving direction icon. This will add a new layer to your

map that will allow your map readers to navigate to the waypoint. After

you added it, remove the Driving direction layer by clicking on the

three dots to the right of the layer name and select Delete this layer.

- The garbage can does what you think it does. Don’t do it.

Bonus Google Map Functions

There are a few additional tools in Google My Maps that we don’t spend time on in this workshop. Below

is a brief description of these. If you have extra time, try them. If not, do not worry, these are for your

reference.

Add Layer

Creates a new untitled layer in the side panel. Data can be imported (KML,

CSV, GPX, XLSX) as well as georeferenced photos stored on Google Drive

or Google Photos. New markers and lines can also be added to this layer

using the add marker and draw a line tools outlined below.

Add Marker

Allows you to add markers to the map. The marker will be added to the

“active” layer. The active layer will have a blue bar along the left side of the

layer name in the side panel. Click on a layer to make it the active layer. You

can also drag markers from one layer to another. Markers can be edited to

customize the name, description and content of the pop-up. Photographs

and YouTube videos can be embedded in a marker.

Draw a Line

Allows you to add a line or enclosed shape to the map. Can be a point to

point line, or enclosed polygon. The feature will be added to the “active”

layer. Custom driving/walking/biking routes can also be created using this

tool. They will be displayed in a new layer in the side panel.

Add Directions

Allows user to generate driving/walking/biking directions using a point to

point address search. The result will be displayed in a new layer in the side

panel.

Measure

Allows user to measure distance (ft/miles) and area (acres/sq mi) on the

map.

Print Map

Option to print map to jpg or pdf. Click on next to the map name and

select Print map.

Export to KML

Export entire map or select layers to KML or KMZ file. Click on next to the

map name to access.

Creating a Google Map - 49

Saving Your Map

Did you notice you haven’t had to click a Save Map button yet? That’s because your Google My Map is

automatically saved in your Google Drive. Nice!

Adding Epicollect Field Form Data to Google Maps

You should have previously downloaded project data from the Epicollect5 website. This step of the

activity will show you how to import an Epicollect CSV file into a Google Map.

A Note about Working with Comma Separated Values (.CSV) Data

Comma separated values (.CSV) files allow data to be saved in a table structured format within a text file.

The file contains the tabular data separated by commas. Each line of the file is a data record. Each record

consists of one or more fields, separated by commas. The CSV file you just downloaded can be opened

in a text editor or in as a spreadsheet in Excel. It can also be imported into a number of other programs –

including Google Maps!

Pro Tip: For this exercise, we will import the .CSV file directly into Google Maps. However, it may be

handy to know that the file can be edited in Excel BEFORE you import it into Google Maps. You may

want to try this in the future (i.e. when you have more time). That’s because editing .CSV tables in Google

Maps is somewhat restricted. You’ll see this in a minute.

.CSV in a text

editor

(Notepad)

.CSV in Excel

Creating a Google Map - 50

Import Your Epicollect CSV File into Google Maps

Note: if you closed your Google Map, open a tab in your browser and return to Google Maps>My Places

and select your NRCA CTP map.

- Click Add layer. A new “untitled layer” will be added to your Google

Map.

- Click Import under Untitled layer.

- In the Choose a file to import window, click on “Select a file from your computer”. Browse to the

location where you previously saved and extracted your Epicollect .CSV file. By default, the extracted

folder will be the same name as the Epicollect form. The CSV file will be in the folder and titled form-

1_stream-assessment.csv. Select the file and click Open.

Before Google Maps can add the layer to the map, it will need to know which fields in the spreadsheet

contain the geographic coordinates of your form data, as well as what field will be used as the pop-up

title. We’ll specify that next.

- In the “Choose columns to position your placemarks”,

check the box next to “lat_Location” and click the radio

button next to Latitude.

- Next, check the box below it, “long_Location” and click

the radio button next to Longitude.

- Click Continue.

- In the “Choose a column to title your markers” (title for

the placemarks), select the radio button next to “stream_name”. This will give a simple title to each

of your placemarks based on the stream name.

- Click Finish. Once the import is complete, you should see the locations of the form entries on the

map.

Creating a Google Map - 51

Customizing Your Google Map

Your form data will be added to your map using a uniform style. We can customize how the data appears.

Let’s take a look.

- Click on Uniform Style under the layer name.

- Change the Group places by to “stream_shape” and change Set labels to “land_use”. Close style

window by clicking the x in the upper left. This will color our points based on the type of stream shape

and switch the labels of each point to their surrounding land use type.

- If you’d like to change the color of any of the classes, hover over the waypoint class name and click

on the paint can icon that appears to select different colors/icons.

Creating a Google Map - 52

Format the Pop-up Window

- Click on a marker on the map. The pop-up window will open. Notice the field names and values

come directly from the EpiCollect5 table.

- Notice there is a web link to the photographs you took in the

pop-up. Try clicking on one. You should see the photo open in

a new tab of your browser. This is helpful, but maybe not

entirely ideal. Let’s add those photos directly into the pop-up

window instead.

- Return to your map. Click on the point again, if

necessary, to view the pop-up window. Click on the

pencil icon to edit the contents of the pop-up.

- With your mouse, select the entire text string in the

“Shape_Photo” field. Pro tip: double-click on the text in

the box to select all.

- With the text string selected, right-click and copy it.

- Click on the camera icon at the bottom of the pop-up.

- In the “Choose an image or a video” window that appears, click on Image URL at the top of the

window. Right-click and paste in the image URL. The photo should appear. Click Select.

Creating a Google Map - 53

- Once the window closes, you should see the image embedded at the

top of the pop-up window. If you like uncheck the box next to

“Shape_Photo”. This will hide the ugly photo URL text in the pop-

up.

- Click Save to save the changes you made to the pop-up.

- If you’re feeling adventurous, repeat the process with the photo

URL in the “Land_Use_Photo” field. Be sure to click the Save button

at the bottom of the pop-up each time you make a change.

- If you’re feeling REALLY adventurous (and you have time to spare),

go ahead and add photos to the pop-ups for other points using the

process you just learned.

Clean Up Your Map

Now that you’re a pro at editing and customizing a Google Map, use your new skills to clean up your map.

Some suggestions:

 Update the layer name

 Add other layers. Hint: you can add TO a layer (ie: add more waypoints) using the edit tool or

import more data by using the Add layer button.

 Change the marker style

 Format the pop-ups further

o Note that you can uncheck the box next to the name of a field in the pop-up. This will hide

it so that it will not show. It may be helpful to do this for some of the fields that are not

necessary to display in the pop-up. Don’t hide the photo link fields until AFTER you are

done embedding photographs (or else you will not have access to the URL).

Sharing Your Google Map

Now that you have collected GPS data and created a beautiful custom map, let’s learn how to share it

with the world.

- Click on the Share link in the side panel. It’s the one with the + sign growing out of a human head.

- A Share settings window will open. Notice it provides a link that you can use to share your map with

others. This can be copied and pasted into an email, or linked to on a website. You can also share

the link directly from this window via Gmail, Google+, Facebook or Twitter. Don’t share anything just

yet, we have a few more settings to get to.

Creating a Google Map - 54

- Access to your map will be set to “Private” by default –

only you will have access and you will not be able to

share it using a link. You can change this setting under

the “Who has access” section of the Sharing settings

window. You can share your map with specific people,

anyone with a link, or with the Public (anyone). Those

who you share it with do not need to have a Google sign-

in to access it. For now, set the link sharing to “On –

Public on the Web”. Be sure the “access” is specified to

“can view” not “can edit”. We don’t intend to collaborate

on this map (but you COULD if you wanted to).

- Back in the Sharing settings window, notice that you

can invite people to view and/or edit the map via email.

You also have the opportunity to “prevent editors from

changing access and adding new contributors”. That may

be a handy check box in the future. You can click on the

Learn more link to learn more about file sharing.

- Click Done to close the Sharing settings window.

Next, let’s preview what your shared map will look like. Click

on the Preview link in the side panel. It’s the one with the

eyeball.

- Your map will open in a new browser tab in “view-only”

mode. This is what your map readers will experience

when you share your map with them. Take a minute to click around.

Notice that all of the properties of your map will be retained – the base map and zoom scale that you set

will carry-over, as well as the status of the layers in your side panel. If they were “turned on” (checked) in

your My Map, they will be visible on your shared map. If they were unchecked, they will appear in the

layer list, but will not appear on the map until the user checks the box.

Creating a Google Map - 55

- If you wish to change anything about the map, you can click on the EDIT link to return to the Google

My Maps editor.

- If you are satisfied and ready to share your map, click on the SHARE link. Click Share via email. An

email message will be composed and will include a link to your map. Send it to someone (or yourself).

Alternatively, if you use social media, you can try sharing your new map using any of the social media

links provided.

- Click on the SHARE link again. This time select,

Embed on my site. A window will open providing

HTML source code that can be copied/pasted into

the source code for your webpage. This will embed

the map directly on your site. Cool.

If you want to see what this looks like, visit

http://s.uconn.edu/gmembed

Congratulations! You have completed this exercise. If you finished before everyone else, go back and

poke around some more. If you want to read more about Google My Maps, visit the My Maps Help.

https://support.google.com/mymaps