GEO 583 Internet Mapping and Distributed GIServices

Back Up Next

LAB THREE:  Animations + MapBox


Due day: February 15,   9:30am.

10 Points (total 100).


PART 1.  Animation Maps

horizontal rule

Download the DEM Data

horizontal rule


1. The first step for today's lab exercise is to download a 7.5 minute USGS DEM in San Diego County from the a DEM Data Archive page at UC-San Diego.  

2. Open the File Explorer on your desktop. 

3. Create a "lab-3" folder in your root directory (Z:/g583-xx). 

4. Navigate to  Y:\dem folder to pick up one region DEM file you are interest.

5. Copy the zipped DEM file into your "lab-3" folder.


7. After you copy the DEM zip file, click on the [Extract all files] under the Folder Tasks (the left side window)

Press Next Next [Finish]  to extract files into the "lab-3" folder.

8.  The next step is to use the ArcCatalog (from ARCGIS ) to convert the DEM to a ARC/INFO GRID format.  Open the [ArcCatalog] program.


First, go to the "Customize" menu --> Extensions --> Check the [V] 3D Analyst extension.


The next step is to connect ArcCatalog to our Z: data drive.   Click on [File] menu --< select "Connect Folder..." --> then choose Z: drive, press [O.K.].


9. In the middle of ArcMap icons, you will see a set of red boxes called "ArcToolbox".  (If you didn't see it, click on the RED BOX icon in the tool icons to open it.   Select the "Conversion tools" from the ArcToolbox.  Then select "To Raster" --> "DEM to Raster".  Double click on the icon (DEM to Raster) to open the tool.


10. After you open the tool, click on the Open file icon (upper one) to navigate to your DEM file "Z:\lab-3\areanames.dem"  (or Z:\lab-3\areaname\areaname.dem) and type in "Z:\lab-3\DEMToRa_areaname" as your OUTPUT raster (Note:  the OUTPUT File name should be no longer than 13 characters.)  Then press [OK] to convert the DEM. 

(If you got some error messages, you need to re-do the Download/Uncompress procedures 4-7.)



11. Next, click on the [3D Analyst Tools] --> [Conversion] --> Raster to TIN.  


Open the [Raster to TIN] Tool, select the raster input file [demtora_areaname] , output TIN:  Z:\lab-3\tin_area

Click on [OK] to create the TIN file.


11. After the conversion, close the ArctoolBox. [Tool] -- [Exit].  And use the File Explorer to check if the new grid file exist in your "lab-3" folder.


horizontal rule

Create 3D Views

horizontal rule


Now We will use ArcGIS  -- ArcScene 10.3.1 to generate 3D Views.

Open ArcScene 10.3.1 Program first.


1. Click on the "Add Data" icon (the Yellow one with the plus sign).  Navigate to the Z: drive\lab-3 folder.

2. Add the DEM and the TIN model into the ArcScene.



3. There are two ways to create a nice 3D view (use TIN or the DEM layer).  We will only teach you the DEM layer here.  You can also create the 3D view by using TIN if you are familiar with ArcScene.

4. To use the DEM layer, uncheck the TIN layer. Then open the "Property" window of the DEM layer by "Right click" on the layer name and select the [Properties..].



5. Switch the "tab" to the "Symbology".  Right click on the "Color Ramp" box and uncheck the [Graphic View].  Now the Color Ramp has switch to "TEXT view".  Select the [Elevation#1] for your DEM view.



6. Now switch to the [Base Heights] Tab and we will make the DEM layer 3D according to its value.

In the Height box, switch the select to [X] Obtain heights for layer from surface:.  Keep the original DEM value.

The original DEM value may be too "smooth" for visualization purpose.  We can exaggerate the Z value by change the "Z Unit Conversion"

--> Change the Z Unit Conversion value --> Custom --> [3]

Click [OK] at the bottom.




Now you will see the 3D view of the DEM in ArcScene.


7. The next step is to create a series of snap shots from the 3D DEM view.

To create a snap shot, Select [File] ==> Export Scene --> 2D.  (DO NOT select 3D because we are not creating KML files).



8. Change the "Save in" directory to Z: \lab-3.  Change the [Save as type] to "GIF".  The [File name] should be "view1".

After saving the first image, slightly move the 3D view, save the second image as "view2", then the third image as "view3".

Repeat the process for your animation series (probably 6 - 8 images).



After you generate these consecutive pictures, save your 3D ArcScene project in the "lab-3" folder as "3d-lastname.sxd".  Then Exit ArcScene.

horizontal rule

Create a Animated GIF picture

horizontal rule


The next step is to use a software called "MS GIF Animator" to create the animated GIF picture..

Navigate to the "Y:\Microsoft GIF Animator"  folder and double click on the GIFAnimator.exe

Click on the open icon  (the second one) and open the "view5.gif" image first. (Make sure you open the "view5.gif", not "view1.gif".



Click on the [Insert] icon (the fourth icon from left) to insert the rest of image: view4, view3, view2 and view1.

Click on the "Animation" tab and check out [Looping] and [Repeat Forever].


12. Click on the "Image" tab and change the value of "Duration" to 20 or 30 (1/100s). 

NOTE:  You need to click on EACH frame (Frame#1, Frame#2, Frame#3, Frame#4) to change the individual "Duration" time.  Otherwise, the default duration is "0" for the rest of images and your animation will become too fast.


13. After the change of animation parameters, click on the "Save as" icon (the fifth from left) and save the final GIF picture in your lab-3 folder as "finalview.gif".


14. The next step is to open your previous Webpage from last week and add this new picture.

15. Open the Microsoft Expression Web first.

16.  Make sure the Expression Web is displaying your [Web-lastname] directory on Z: drive (You can see that your web folder has different icon to indicate that the folder is a web directory. 


17. Double click on the "index.htm" to open your Web editor window.

18. Move the mouse cursor to the bottom of the web page. Then Select [Inset] -- [Picture] -- [From File] and navigate to your "lab-3" folder to insert the "finalview.gif" into you web.

19. Use the Preview Web Browser window (Press F-12 key) to see if the animated GIF works.

20. Publish your web to the student web server again. (The same procedure from the last week).


Use WinSCP.   Make sure to upload files ONLY within the "Web-Yourname" folder.


21. Now you can check if your animation picture works:


Navigate through your own folder and see your new website.



horizontal rule


Some Tips for improving your design: 

1. Make the picture background transparent (For example, your first San Diego map).  Use the picture tool under the editor window "transparent tool" (looks like a magic stick). and apply the tool into you picture.


2. RESIZE your images:

You can RESIZE your image by move the cursor around the image corners. 

Note: If you resize your pictures, sometime the quality of the picture may be reduced due to the pixels changes.  You can try the "RESAMPLE" function to adjust the picture quality.

(Note: if you can not find the resample function and the "picture toolbars",  click on the [View] menu from the Frontpage, select --> toolbar ---> select the [Picture] toolbar.  The picture toolbar will popup on the screen, you can re-arrange the location of these toolbars in Frontpage.)


horizontal rule


Part 2.  Mapbox Studio Introduction

  1. Go to and read the content in the home page.
  2. Click on "Get Started for free" and Sign up (to create your account).
  3. Type your username, email, and password.
  4. Select your role (GIS professionals or others)
  5. Got it.
  6. Click on "HOME" (left menu) to back to MapBox Studio home page.
  7. [Get Started] Mapbox Studio or click on the URL link:
bulletScroll down to "Tilesets" (This is the data layer in MapBox).
bulletClick on [New tileset]
bulletSelect a file go to the downloaded data folder (from shared Google Drive) (downloaded originally from SANDAG). Upload
bulletNow you will see a new "tileset", called "COLLEGES" is available now.
bulletThe next step is to create a style for your college map.
bulletClick on Style Menu "New style". "Dark" Create.
bulletNow the Map Studio Design Window open.
bulletClick on "+ New layer" Source select "College" in the bottom list.
bulletClick on "Create layer" .
bulletIn the Style tab, click on the "Color attributes" and select a vivid color for our college points (see image below).

bulletNow we like to add a text label on the college data points.
bulletClick on "Duplicate 1 layer" icon a new "college copy" was created.

bulletNow we can rename this new layer In the top label name, change to "college labels" (see the image below).

bulletThen click on the "Select data" tab (next to "Style").
bulletSelect "T symbol" Okay.
bulletSwitch back to "Style" click on Text field [none] select "ShortName",
bulletChange the "Color attributes" to vivid color you select.
bulletNow you can try to zoom in your map window to San Diego to preview your map.

bulletYou can also adjust the Text position in their tools.
bulletSelect "Position" Text anchor upper-left one.
bulletNow you can publish this map into MapBox.
bulletClick on the "Publish" button (Purple color).
bulletClick on "Publish" in the Popup Window. Congratulations! Your first MapBox map has been published. Click on "Share, develop & use"
bulletYour map has been published online !!
bulletYou can copy the share URL to any web page or browser to view your map.



4. What to turn in

horizontal rule



Publish your animation GIF picture on your Web page.




Publish your Mapbox Web Map on your Web page.



Use the Blackboard online forum to answer the following questions (and then Print out a Paper copy for the Instructor):


1. Compare the different design issues between the SANDAG ( Data Archive Center and NYS GIS Clearinghouse  What's the differences between their web design, data categories, download procedures, access limits, and potential users?

2. What are the differences between the GIS data archive centers and the GIS data clearinghouse? What is NSDI?

3. Use on-line search engine (Google) to find a brief explanations of the followings and one example for these technologies or applications.




Java Applets and Java Servlets




Active Server Page (ASP).




horizontal rule

Back Home Up Next