- 3D Web Map using last labs data
Creating a Web 3D Map
Gathering your data (using last weeks outputs)
Last week you created several layers that were combined to create a 3D representation using Terrain Bender. Today we are going to use the DEM and the map you created last lab to make a 3D map that could be shared using the Internet. We will be using QGIS on the local Linux computers, the DEM layer and the map output (TIF file ) you created in ArcMap.
Either use the Linux file explorer or the file explorer and/or ArcMap on Osmotar to locate the files you created last time. In your 3D folder, you should have a DEM layer with a .tif extension as well as a DEM with a .asc.txt extension. This is the layer you either projected and clipped in Part 1b of the lab or the DEM you downloaded directly in Part 1.
You also need to find your map from last lab. You also created a texture overlay (map) at the end of Part 3 of last week’s lab. This should be .tif file you used prior to clipping it in the GIMP.
Some simple steps to create a 3D web map
Data into QGIS
Once you have found the two layers we are going to use QGIS to create a simple web based 3D map.
You can launch QGIS by clicking on “Menu” on the Linux desktop (bottom left) and type qgis (or menu –> education –> QGIS). Once it is open, you may notice it has similarities to ArcGIS (a canvas/Data Frame and Table of Contents). We are not going to to take time to learn QGIS (unfortunately), but if you are interested in an easy introductory lab to the software, try lab 1 from Geog 204. Today, we are simply using QGIS for its interface and a plugin.
To prepare your data for the 3D web map, carry out the following steps:
- Create a folder called 3dweb in your local directory
- Load your DEM into the project by Layer –> Add Layer –> Add Raster Layer –> navigate to the folder with the DEM in it –> Click OPEN
- Do the same for the output map you created last lab (Add it as a Raster Layer)
- If your map output does not cover the same extent as you DEM, perform the following steps:
- Right click on the map output layer in QGIS and remove the layer
- Open your project from last week in ArcMap
- Export your map again, but ensure you have clicked on Write GeoTIFF tags under the Format tab (as in the image below)
- Once exported reload the image into the QGIS project
Adding a Plugin and exporting your Web3D project
After you have the DEM and you map in the project, save your work in your 3DWeb folder: Project –> Save As.
Once the project is saved, add in the plugin we need by
- Plugin –> Manage and Install Plugins
- Click the Settings Tab –> activate all 3 boxes
- Click back on the All tab
- Search out qgis2threejs
- Highlight the plugin and install it (bottom right corner click install plugins)
Creating your 3Dmap
- Ensure the DEM is below the map you exported in your TOC
- Clic Web –> Qgis2threejs
- Set up your interface with the following values:
- Leave the template file at the top of the panel as 3dViewer(dat-gui).html
- Select your DEM layer for the DEM Layer
- Click on Slide the bar below the resample section all the way to the right
- Click Advanced Quad Tree
- Set the Quad tree height to 8
- Slide the Qgis2threejs panel to the right and click in the middle of the map (in QGIS) to see the coordinates to the center of the map
- Under Display select “Map Canvas Image”
- Keep the resolution at 100%
- Turn off shading
- Select your output file
- Hit Run
The map should open up automatically in a browser. Most likely it will open in Firefox. If the map is blank do the following:
- Copy the address of the file (in the address bar of Firefox)
- Open the Chromium Browser Menu –> Internet –> Chromium Browser
- Paste the address you copied from Firefox
You can play around with the values in the Qgis2threejs interface and create several maps until you are happy with your outcome. You can set the vertical exaggeration by using the World settings
The work in this lab will be an addition to the assignment from last week. As well as including your output from Terrain Bender, include a screenshot of your map in the Browser window with your word document. You can obtain a screenshot by:
Menu –> Screenshot (or shutter for making edits to the screenshot) –> select an area to grab –> select the folder and file name.