ZeeMaps

Tutorial: ZeeMaps

Introduction

zeemaps
Created by the Silicon Valley-based company Zee Source, ZeeMaps is great for mapping lists. You can import address lists in industry-standard .csv [comma separated value] format. ZeeMaps will geocode the address and place the locations on a Google map. Each map marker contains information you’ve pre-formatted and identified in your .csv file and can include website links, photos and YouTube videos. After you’ve added all the information you want, you’ll have a map that can be easily published onto a webpage or blog.

How To Create A ZeeMap

Here’s a map created in ZeeMaps:

Map Sample

The markers here were generated from data in a Comma Separated Value (CSV) Excel file. We’ll show you how to create a CSV file, but first start your own map by signing into ZeeMaps.

At the ZeeMaps homepage, click ‘Sign-In/Register.’

Sign-In

Sign in with your email and password, or click ‘Not Registered’ if this is your first time using ZeeMaps. Once you’ve clicked ‘Register’ or ‘Sign-In,’ ZeeMaps will take you to the maps you own or have recently visited.

Maps_Visited

From here, click on the ZeeMaps icon at the top of the page to get a blank map.

Maps_Visited_Circle

After you click that button, you’ll find you’re back at the ZeeMaps homepage where you can click ‘Create Map.’

As soon as you click ‘Create,’ a ‘Create A New Map’ bubble pops up.

Give your map a name and a starting location. You can also set an administrative password to your map. Click ‘Create.’ A new blank map will appear with the name you’ve given it at the top.

Large_Scale_Map

There’s no data on it yet, but it if you entered a starting location, it should be zoomed into that place on the map. To get data, go to Excel. Next, we’ll show you how to get an Excel file ready to import.

Format Your Excel CSV File

In Excel, start a new file for the data you want to import into your new map. You can see a sample Excel CSV file we used for this tutorial called ‘Ted Talks’ here.

There are five required fields you need in your Excel file.

Required Fields

They are location-based: name, street, city, state and country. It’s also recommended you include a field called ‘Color’ along with a color for each entry.

Colors

That’s how ZeeMaps knows which color to use for its map markers. ZeeMaps current color options are black, blue, brown, burgundy, cloud, forest, fuscia, green, grey, lavender, light blue, light green, light purple, light yellow, maize, mold, olive, orange, purple, red, red dust, sky, spring, sunset, teal, tree, white and yellow.

If you have additional information, including photos or videos that you want to show up in each map entry, you should include them in your Excel file.

Required_Fields_2

Here are the photo-specific fields:

If you want to include a photo for a map marker, you’ll need to give ZeeMaps a URL telling it where the photos are. All photos must be on a server, and not simply on your desktop. In your Excel file, make sure to include fields called ‘Photourl,’ ‘PhotoWidth,’ and ‘PhotoHeight,’ and that they are named as single words. Otherwise ZeeMaps may not recognize them. Note the width and height fields:

Excel_Photo_1

Base your photo sizes on whether your images are horizontal or vertical. If you don’t adjust photo sizes now they will appear distorted in your map. For horizontal images, a good standard is ‘250’ for ‘PhotoWidth’ and ‘200’ for ‘PhotoHeight.’ For vertical images, a good standard is ‘200’ for ‘PhotoWidth’ and ‘250’ for ‘PhotoHeight.’

Here are your video-specific fields:

Excel_Photo_3

To include a video with your entry, create fields named ‘YouTube,’ ‘VideoWidth’ and ‘VideoHeight,’ and make sure they are named as single words. Again, pay attention to your video width and height:

Excel_Photo_4

To make sure your video images are not distorted, use the standard ‘250’ for ‘VideoWidth’ and ‘200’ for ‘VideoHeight.’

Here’s what a map entry will look like after your import if you’ve included a video and photo.

Info_Bubble_4 There is more formatting you can do on this “info bubble” later. But now let’s go back to the Excel file so we can finish formatting the file and it can be imported into your map.

A word about how to get a YouTube Video ID number correctly inputted onto your spreadsheet:

Start at the YouTube website and search for your video. Once you’ve found it, click ‘Share’ under the video you want to use.

youtube_1

Then, copy and paste the characters after the ‘=’ sign into your CSV file. The YouTube number for this video is eleven characters, yzOcvlNn8lw. Now that you know how to get a YouTube video ID number, enter it into your Excel file.

You may want to include other fields, like ‘Notes’ in each of your info bubbles.

Excel_Fields_1

If you want the ‘Notes’ field to appear, you need to go back to your map, and tell ZeeMaps to include that additional field.

Customize_Fields

Go back to your blank map,

1. Click the ‘Customizations’ menu;

2. Click ‘Marker Fields';

In the ‘Entry fields’ window that pops up, manually type in ‘Notes’ or any other field you want to appear in your map entry.

notes

Click ‘Submit.’

When you’re happy with the fields in your Excel file, you’re ready to import. Remember to make sure it’s saved as a ‘CSV’ and not a regular ‘Excel’ file.

Import Your CSV File

Here’s our blank, named map.
Sample_Map_Large

To import data from your Excel file, go to the ‘Additions’ menu:

Import_CSV

1. Click on the ‘Additions’ menu tab on the upper left-hand corner of the map;

2. Click on the ‘Upload CSV file’ button.

An ‘Import CSV’ window will pop up:

Import_1

1. Browse your computer and select the CSV file you want to import;

2. Enter your email address so ZeeMaps knows where to send you a link to your new map;

3. ‘Click Submit.’

Before your data is imported, ZeeMaps will do its best at corresponding the CSV fields to its map fields, and then will have you match your fields.
Import_2
If the field you want is not showing up, you may need to go back to ‘Customizations,’ ‘Markers Fields’ menu to add additional fields in ZeeMaps. You may also need to return to the CSV file to make sure you named your field headings properly. When everything looks like it matches, hit ‘Submit.’ This window indicates your fields are matched and ZeeMaps is processing the data:

import_scheduled

For small maps, you can wait about a minute and refresh your map. To refresh your map,

1. Go to the ‘View’ menu;

2. Click ‘Refresh.’

Refresh_New

For maps with large amounts of data, refreshing may not be enough. You may have to go to your email and click on the link ZeeMaps sends you to get to your map.

Email_Me

Click on the link, and you should get your map, with data markers.

Mapped_Images

Here’s the map we saw at the beginning of the tutorial. Note that the colors included in the CSV file came through. Next we’ll learn how to edit the look and data in the map markers.

View And Edit Your Map Marker Data

This section deals with how to view and edit map marker data.

Click on any marker to see the data from your Excel file that’s now in the map entry.

Mapped_Images_1

After you click a map point location, an info bubble will pop up. You can close it on the upper-right hand corner when you’ve reviewed it. For now, we’ll leave it open and look at its parts:

Import_1_1

After the automated import, the format of the bubble data–the name, address, YouTube video, photo, notes–doesn’t  look that great, especially the ‘Notes’ text scrunched on the side of the bubble. To fix that, we’ll close the bubble in the upper-right hand corner.

Back at your map, the ‘Customizations’ menu is where you can change how your info bubble looks.

Customize_Info_Bubble

1. Go to the ‘Customizations’ menu in the upper left-hand corner of your map;

2. Click ‘Info Bubble.’

An “Information bubble” window pops up. You can adjust the size of the bubble here and what is included in the bubble.

Info_detail

You should adjust your photo and video width and height to correspond with the photo and video width and height entered in your exported CSV file. Here, we’re going to put the video below the text by clicking the box at the bottom of the window.

info_bubble_detail

When these adjustments have been made, click ‘Submit.’

Back on the map, your info bubble should reflect the changes in the display in your bubble. As you can see below, ours looks much cleaner now. We’re also going to edit the actual information of one of our bubbles, by clicking on the blue-highlighted name of the marker entry we want to change.

changing_info_bubble

A bubble called “Change Entry” will pop up. Here you can make changes to the ‘Location,’ ‘Details,’ ‘Media,’ or ‘Link’ tabs. You can also change the color of your marker here.

change_entry

In the ‘Details’ tab you can add or change details about your marker.

detail_change

You can also change your photo URL in the ‘Media’ tab of the ‘Change Entry’ window.

media

When you’ve edited everything and you feel happy with the marker, hit ‘Submit’ and you’ll return to your map.

Click on a map marker, and you should see your changes have been added.

details_1

If your photo or video still look distorted, or you want to add a new video or photo, you can do that in the ‘Media’ tab of the pop-up ‘Change Entry’ window. From time to time, you may have to refresh your map to reflect changes. You can do that on the upper left-hand corner of the map, by clicking ‘View,’ and ‘Refresh.’

Refresh_New

After you’ve edited your map markers, you may want to customize the size and image that stands for each marker. You can do that in the ‘Customizations’ menu at the upper-lefthand corner of your map:

1. Go to the ‘Customizations’ menu in the upper left-hand corner of your map;

2. Click ‘Map Icons.’

Here’s the ‘Marker Icons’ window that pops up:

customize_markers

Here you can change your marker sizes. You can also upload your own map markers, including images at a URL, by clicking ‘Browse.’ (Just be sure the photos are on a server.) When you’re satisfied, click ‘Submit.’

Publish Your Map

Once you’re happy with your map, you can publish it onto the web.

final_map

To publish your map, go to the upper left-hand corner of your map.

Print_Map

1. Click ‘Print or Share;’

2. Click ‘Publish.’

You can see there are also options here to email, create a link and share your map in other formats here. After clicking ‘Publish,’ a ‘Publish Map’ window will pop up.

publish_map_link

There are lots of options for how you can publish your map. Make a selection, and copy the code that appears. This is the code you’ll embed in your blog post or in your CMS.

About this Tutorial

Abbie Fentress Swanson wrote this tutorial, with help from Jerry Monti and Shilanda Woolridge.

Republishing Policy

This content may not be republished in print or digital form without express written permission from KDMC. Please see our Content Redistribution Policy at kdmc.berkeley.edu/license.