106739135
Page 1 of 14
WEB MAPPING WORKSHOP
This workshop will provide a high level overview of web-based GIS resources, from SimplyMap.com
(which allows you to assemble, visualize and export spatial datasets) to creating a simple web-map
using your own data. This workshop assumes completion of the preceding Introduction to
Geographic Information Systems and ArcGIS for Spatial Analysis workshop, or a basic familiarity
with the ArcMap/ArcGIS interface.
SIMPLYMAP.COM
MAKING A MAP
1. In Internet Explorer or Firefox, go to
SimplyMap.com and create an account
using your @yale.edu email address.
2. Click on the “I Want to…” Button at the
top left of the screen and Select: “Make a
Map.”
3. Click on the X in the corner of the
Tutorial Bubble to dismiss it!
SELECT A VARIABLE TO MAP
4. Click through the until you get to Variables>Census Data>In 2010 Geographies>People
and
Households>Income>H
H Income>
5. Find the Household Inc.,
Median ($) variable,
Hover over the Action
button and select “Use
this Variable”
The Yale Map Collection
Stacey Maples – GIS Specialist
At Sterling Memorial Library
203-432-8269 / stacey.maples@yale.edu
130 Wall Street, Room 707
guides.library.yale.edu/GIS
106739135
Page 2 of 14
SELECT A LOCATION TO MAP
6. Click on the Locations button and:
1. Find location by: “Cities”
2. Select State: “Connecticut”
Enter city name: “New
Haven, CT”
3. USE THIS LOCATION
CHANGE THE GEOGRAPHIC BOUNDARY LEVEL
7. Click on the “View Data As:” dropdown, in the Map
Legend at the upper right corner of the map display, and
Select: “Block Groups.”
ADJUST THE SYMBOLOGY
8. Now click on the Edit Legend link at the bottom right corner
of the Map Legend.
9. Change the Color Scheme for the current Map View. Note the
other available options for changing the symbology of the
Block Groups.
APPLY A SELECTION MASK TO THE MAP
10. Click on the Display Options button and Select: “Apply
Selection Mask.”
The Yale Map Collection
Stacey Maples – GIS Specialist
At Sterling Memorial Library
203-432-8269 / stacey.maples@yale.edu
130 Wall Street, Room 707
guides.library.yale.edu/GIS
106739135
Page 3 of 14
EXPORT THE MAP TO GIF
11. Click on the ACTIONS Button and Select:
Actions>Export Map As>GIF Image.
12. Type some descriptive text into the Text Area box
and change the Font Size to 24.
13. Click on “Add text area.”
14. Change the Export to:
option to “File.”
15. Click on the Save button and
Select Save when prompted.
The Yale Map Collection
Stacey Maples – GIS Specialist
At Sterling Memorial Library
203-432-8269 / stacey.maples@yale.edu
130 Wall Street, Room 707
guides.library.yale.edu/GIS
106739135
Page 4 of 14
PREPARING GIS DATA USING SIMPLYMAP
DOWNLOADING THE BOUNDARY DATA
1. From the Actions button Select:
>Actions>Export Shapefiles.
2. Select “Block Goups” as the
Geographic Unit.
3. Select “Connecticut” as the Area.
4. Click on Save and select the “Save As”
option when prompted. Save the
shapefile.zip to the Data folder in the
workshop directory.
CREATING THE VARIABLES TABLE
5. Click on the “I Want To…” button
and Select “View and Compare
Data for a Location.”
6. Click on the X in the corner of
the Tutorial Bubble to dismiss
it!
SELECT THE LOCATION
7. Click on the Locations Tab.
8. Click on the “Recent” Link
9. Select the “Use this Location”
option from the Actions button
that appears next to New Haven,
CT.
The Yale Map Collection
Stacey Maples – GIS Specialist
At Sterling Memorial Library
203-432-8269 / stacey.maples@yale.edu
130 Wall Street, Room 707
guides.library.yale.edu/GIS
106739135
Page 5 of 14
SELECT A SET OF VARIABLES
10. Click on the Variables tab and Select a few (3-5) Variables from the Census Data>In 2010
Geographies Folders.
11. When finished adding variables, click on the X to close the Variables Panel.
SELECT THE GEOGRAPHIC BOUNDARY LEVEL
12. At the top of the resulting table view, change the “Analyze data by:” option to “Block
Groups.”
EXPORTING THE TABLE
13. From the Actions Button, Select Download Table>DBF and save to the Data folder of the
workshop directory, when prompted.
JOINING THE ATTRIBUTE TABLE TO THE BOUNDARY FILE USING
ARCMAP
1. Browse to the folder where you saved the shapefile.zip and report.zip files you
downloaded from
SimplyMap.com.
2. Extract both zip files to
the folder they are in
(right-click on each and
select “Extract All..”).
3. Browse to the folder
where you extracted
the report.zip, find the
columns.txt file and open it.
4. Note the name of the field that contains the
‘blockgroup_fips’ value (in the image above, it is
The Yale Map Collection
Stacey Maples – GIS Specialist
At Sterling Memorial Library
203-432-8269 / stacey.maples@yale.edu
130 Wall Street, Room 707
guides.library.yale.edu/GIS
106739135
Page 6 of 14
‘VALUE5’)
5. Open ArcMap, and save the empty Map Document to the Web_Mapping folder as
Census.mxd.
6. Once you save the MXD document to the
Web_Mapping folder, you should see your Data
folder at the top of the Catalog window. Expand
the Data\Connecticut folder.
7. Drag and drop the blockgroups shapefile into
the Data Frame.
8. Drag and drop the report table into the Date
Frame
JOINING THE ATTRIBUTE DATA TO THE BOUNDARY
DATA
9. In the Table of Contents,
right-click on the
blockgroups layer and
Select: Joins & Relates>Join.
10. Use the “Join attributes from
a table” option, with the
following parameters:
1) BLKGRP_ID
2) report
3) VALUE5 (Note that it
is simply ‘5’ in the
example).
11. Use the “Keep only matching
records” option.
12. Click OK to apply the Join.
Because you checked the option to “Keep only matching records” all of the block groups outside
New Haven, CT will be suppressed.
The Yale Map Collection
Stacey Maples – GIS Specialist
At Sterling Memorial Library
203-432-8269 / stacey.maples@yale.edu
130 Wall Street, Room 707
guides.library.yale.edu/GIS
106739135
Page 7 of 14
SOCIALEXPLORER.COM
CREATING A MAP USING HISTORIC CENSUS DATA IN SOCIALEXPLORER.COM
1. In your browser, go to www.socialexplorer.com and click on the Maps tab.
2. Select the “Census 1790 – 2010” section to launch the mapping application.
3. Click on the Find Tool
and enter “New
Orleans, LA” as your Find: Search Term. Click
OK.
The Yale Map Collection
Stacey Maples – GIS Specialist
At Sterling Memorial Library
203-432-8269 / stacey.maples@yale.edu
130 Wall Street, Room 707
guides.library.yale.edu/GIS
106739135
Page 8 of 14
4. Click the “remove this point of interest” link in the Marker Bubble.
5. Change the first “Choose a map:” option to
‘1820 Census’
6. Click in the first “click here to save current
map” slide to save the view you have created.
7. Change the “Choose a map:” option to ‘1830
Census’
8. Click in the second slide to save the current
view.
9. Repeat the previous steps until you have created a slideshow that shows Population
Density from 1820 to 1920.
10. Click on the Animation Option button to turn on
animation, then click the Play Button.
EXPORTING TO POWERPOINT
(Pop-ups must be enabled for this step)
11. Once the slideshow has finished, go to File>Export to
PowerPoint.
12. Give your PowerPoint a meaningful name and click Save.
13. When prompted, save the PPT file to the Web_Mapping
Workshop Folder.
The Yale Map Collection
Stacey Maples – GIS Specialist
At Sterling Memorial Library
203-432-8269 / stacey.maples@yale.edu
130 Wall Street, Room 707
guides.library.yale.edu/GIS
106739135
Page 9 of 14
CREATING A WEB “SLIPPY
MAP” WITH YOUR OWN DATA
UPLOADING YOUR DATA TO
GEOCOMMONS.COM
1. Go to www.geocommons.com and
login using your account info.
2. Click on the Upload Data Button
at the top of the page.
3. Click on the “Upload Files from your
computer” link.
4. Click Add File and Browse to the
Web_Mapping\Data folder and select the
Clown_States Shapefile files (all of them),
and click Open.
5. Wait for the GeoCommons Upload to
complete and Click on the Next
Button.
6. On the next screen, wait for the
GeoCommons Processing to complete
and Click the Next Step button.
7. On the next screen Click to select the
Option to “Use the existing
geographic data in the file you
uploaded.”
8. Click Continue on the “Review Your
Geodata” page.
The Yale Map Collection
Stacey Maples – GIS Specialist
At Sterling Memorial Library
203-432-8269 / stacey.maples@yale.edu
130 Wall Street, Room 707
guides.library.yale.edu/GIS
106739135
Page 10 of 14
9. Add some tags and other
descriptive information
for your data and Click on
the Save button.
10. You should be taken to a
page with an overview of
your data, including
statistics generated from
the attribute table.
MAPPING YOUR UPLOADED
DATA
1. Click on the Map Data
button at the top of the
Dataset Overview Page.
2. Click on the Color Tab, on the left side of the Style Panel in
the resulting Map View.
3. Click on the “Themed” Option and Select the ‘ClownCount’
Attribute using the Attribute Select Button
4. Experiment with the options available for:
1. Type
2. Colors
3. Classes
5. Click Done to commit the changes and close the Styles
Panel.
6. Click Save, in the upper right corner of the Map Window.
The Yale Map Collection
Stacey Maples – GIS Specialist
At Sterling Memorial Library
203-432-8269 / stacey.maples@yale.edu
130 Wall Street, Room 707
guides.library.yale.edu/GIS
106739135
Page 11 of 14
INSERTING THE EMBED CODE
FOR YOUR WEBMAP
7. Click on the About button at
the top of the GeoCommons
Map Window.
8. Notice all of the options for
sharing your map.
9. Click on the “Embed this
map in your website” button.
10. Highlight the iFrame embed code
and Copy it using Ctrl-C of rightclick and Copy.
11. Browse to the WebMapping\HTML
folder and right-click the
webmap.html file. Select Edit with
Notepad++ (or Open with… and
open it with Notepad, if you don’t have Notepad++).
12. Paste the iFrame embed code into the html file, between the <body> </body> tags, like so:
13. Save the change to your webmap.html file and close the editor.
The Yale Map Collection
Stacey Maples – GIS Specialist
At Sterling Memorial Library
203-432-8269 / stacey.maples@yale.edu
130 Wall Street, Room 707
guides.library.yale.edu/GIS
106739135
Page 12 of 14
USING YOUR PANTHEON SPACE FOR WEB PUBLISHING
This section of the tutorial assumes that you have set your Pantheon public_html folder up and
enabled it for serving web pages. To access the Pantheon Setup Tool, go here:
http://www.yale.edu/its/stc/pantheon/webpublish.html
LOGGING INTO YOUR PANTHEON WEB FOLDER
1. Go to http://www.jscape.com/products/file-transfer-clients/anyclient/anyclient-webservice/ and approve all Java requests for the site.
2. Click on the Connect Button at the bottom of the app.
3. Use the following settings to
Login to your Pantheon Web
Account:
a. Host: eli.yale.edu
b. Username: NETID
c. Password: leave
blank
d. Protocol: SFTP/SSH
e. Local Directory:
C:\temp
f. Remote Directory:
leave blank
g. Check the “Prompt
for Password” option.
4. Click on the Connect Button to connect to your Pantheon Server Account, and enter your
Yale Password when prompted.
The Yale Map Collection
Stacey Maples – GIS Specialist
At Sterling Memorial Library
203-432-8269 / stacey.maples@yale.edu
130 Wall Street, Room 707
guides.library.yale.edu/GIS
106739135
Page 13 of 14
UPLOADING YOUR HTML FILE TO PANTHEON
5. Once you are logged in, you should see the public_html directory (along with any other
directories you have added to your Pantheon folder). Double-click on the public_html
directory to browse into it.
6. In the Local System panel, Browse to the C:\temp\Web_Mapping\HTML folder on your
local drive.
7. In the Remote System panel, make sure you are looking at your public_html folder’s
contents.
8. Click once on the webmap.html file to highlight it in the Local System panel.
9. Click on the Upload Button
to upload the webmap.html file to your public_html
folder on your Pantheon web server.
10. Disconnect and Close the AnyClient page.
11. Browse to http://pantheon.yale.edu/~YourNetID/webmap.html
12. Enjoy the awesomeness of your new Web Mapping App!
The Yale Map Collection
Stacey Maples – GIS Specialist
At Sterling Memorial Library
203-432-8269 / stacey.maples@yale.edu
130 Wall Street, Room 707
guides.library.yale.edu/GIS
106739135
Page 14 of 14
The Yale Map Collection
Stacey Maples – GIS Specialist
At Sterling Memorial Library
203-432-8269 / stacey.maples@yale.edu
130 Wall Street, Room 707
guides.library.yale.edu/GIS