Customizing Qgis2threejs Code

I have received a few e-mails about customizing the output from the cool Qgis2threejs plugin, created by Minoru Akagi.  The QGIS plugin allows for the creation of a 3D map that can be placed in a website or run off your computer's web browser, without having to install any additional software.

The plugin has been improved and enhanced since my original post on Manhattan and follow-up post.  The best part is that the code is well annotated and easy to follow, so you do not need to be a coding expert to make some neat and fun changes!

In this post, I open up a few of the different file types, edit a few values, and show the results.  I will also briefly talk about some of the plugins newer options, including labels!  What mapper does not love to be able to add labels...and labels for 3D!  Neat stuff!!

Saving the Plugin's Output

At the bottom of the plugin, you will see a white box that allows you to browse to a location to store the output.  Selecting a location, several files will be output instead of being stored in a temporary folder.

Results are easy to export to a folder destination of your choosing.

Starting view: Before changing the code

Starting view from the plugin (before any changes to code)

HTML File:  Camera and Controls

First, I will edit the starting position of the camera.  The three values for the camera.position.set are X,Y, and Z values.

Original:

 var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);

  camera.position.set(0, -100, 100);

Changed to:

 var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);

  camera.position.set(0, 0, 75);

Result from changing the camera position - now overhead view and close-up.

Qgis2threejs.css: Changing the starting background gradient

Many websites will tell you the color codes to build a new color gradient.  Here, I changed the nice default blue gradient to a burnt orange sky.

Original:

#webgl { background: linear-gradient(to bottom, #98c8f6 0%,#cbebff 40%,#f0f9ff 100%); }

Changed to:

#webgl { background: linear-gradient(to bottom, #FF350D 0%,#FF8B3D 40%,#EFBBAE 100%); }

Changing the starting background color is easy to do too!

Within QGIS and the plugin, there are a few basic background options as well, such as making it a solid color.

Additional new features

A number of improvements have been made to the plugin, which is also easier to use.  You can add multiple types of GIS files.  You can also label attributes on your 3D map, although there is a cost to performance.  Labeling lots of features will grind your map to a halt.

Labels can be added now, in this case roof heights

An Introduction to Leaflet, Part III: Comparing Heatmap Plugins

A great advantage and disadvantage of free and open source GIS (FOSS GIS) is the variety of options out there.  In this post, we will take a look at four different heatmap plugins for Leaflet.  If you want to skip to the final product, visit: http://webmapexamples.net/leaflet/heatmap/heatcompare.html
to see the final comparison.

We will take a look at four different plugins listed on Leaflet's plugin page:

• Heatmap.js
• HeatCanvas
• Leaflet-div-heatmap
• WebGL Heatmap

Screenshot of the comparison site: http://webmapexamples.net/leaflet/heatmap/heatcompare.html

Data
I used QGIS to generate 500 random points within the state of New Hampshire.

Each plugin references point data and intensity/weight values in slightly different way.  For the three plugins I got to work, here are how points should be formatted.

• Heatmap.js: [{lat: , lng: , count: },...
• HeatCanvas: [0,0, 1] point at 0,0 with count 1
• Leaflet-div-heatmap: [{lat: , long: , value: },...
• WebGL Heatmap: N/A

Overall Impressions

Performance: Heatmap.js was fastest. (Although I did not have a chance to use WebGL Heatmap.  HeatCanvas was slowest rendering.

Ease of Use: Heatmap.js was the clear winner! Leaflet-div-heatmap required more knowledge of JavaScript and I ended up editing the actual plugin code.  WebGL required understanding that!

Documentation: Heatmap.js and HeatCanvas were good.  For Heatmap js be sure to visit the website separate from github.  Leaflet-div-heatmap had poor documentation.

Other considerations: I couldn't quite get the WebGL plugin to work - when adding point data. However, I was able to get a demo working and be able to interactively change density using my mouse with another *.html file.  However, WebGL does boast performance for large datasets, so I may return to it a later date.  The Leaflet-div-heatmap uses sort of collect events/morph feature, so it is different from the rest, be sure to zoom in on the map.  This will become clearer when you try it... Also don't forget to check out each plugin and their array of options!

Heatmap Comparison webpage:
http://webmapexamples.net/leaflet/heatmap/heatcompare.html

See also:
Leaflet.heat
SimpleHeat
Leanpub: Leaflet Tips and Tricks
A related post in Stackoverflow

An Introduction to OpenLayers 3, Part I

OpenLayers is a JavaScript library for creating interactive maps on the web. Basically, these libraries are referenced to help facilitate the development process, providing a basic foundation and advanced features.  I will devote several posts to OpenLayers 3 (OL3) which is currently in its beta release.

This first post will demonstrate some of the basic code and functionality of OpenLayers, and why you should consider using it.  Later posts will cover topics that build logically on one another and include moving and copying files to a web host, symbology, and allowing for user interaction (and feedback) with a map.  Lastly, we'll look at incorporating other free and open source GIS software, such as GeoServer.

OL3 will improve on its predecessors with a more streamlined code, better templates, and documentation. For a brief history of OpenLayers, head over to Wikipedia.  OpenLayers can handle a wide range of map-related files and extensions.  It is client side (I will talk more about this in later posts).

OL3 will improve on OL2.

Loading a Basemap
A logical starting point is loading a basemap, which many maps and map apps utilize.  One of the earliest decisions you may face:  ow much of the user's screen a map should take up.  For the web version, visit: http://webmapexamples.net/OSMBasemap.html.  Feel free to zoom and pan.  Other open basemaps, for example Stamen maps, can also be loaded. A screenshot appears below:

As seen in Mozilla's Firefox web browser

You can download the code with comments in a text file here or html file, which you can experiment with after downloading to your desktop.

A different sized map is at: http://webmapexamples.net/OSMBasemapv2.html.  A simple change to the height of the style was made and is highlighted in red.

  <style>
      .map {
        height: 350px;
        width: 100%;
        }
    </style>

Initially, OL3's learning curve remains fairly steep.  However, coding appears to be much more efficient than OL2 and gets easier over time.  Advanced functionality can be easily added, a definite bonus!  An early OpenLayers 3 workshop is available here (note: try reloading the page).  Tutorials, examples, and documentation are still being produced.  Looking ahead, at least two books will be published to assist you:

• OpenLayers 3: A Beginner's Guide
• The Book of OpenLayers 3

Next time, I will write about moving and copying OL3's libraries. to a web hosting service and getting them on the web! I will also talk about key additional steps and importing common layer files such as KML files.

More 3D Maps and Tips Using QGIS2threejs

After last week's popular post, here are few more maps and tips using the QGIS2threejs plugin.

The Maps

1. 3D Chloropleth Map of Crime Counts by Police Beats in Chicago, 2013
2. Visualization of Mt. Rainier, Seattle
3. Groundwater Depths in Three Counties in Nevada

Data sources and references:
Open Data Chicago
Chicago: Official Police Maps (CLEARMAP)
National Map Viewer
Nevada Bureau of Mines and Geology

When viewing the maps, if a black box appears instead of a basemap, try refreshing/reloading your browser and the basemap should display properly.

The Tips

3D Chloropleth Map:  Here is a trick to create a 3D chloropleth map on a flat surface.  The plugin won't run without a digital elevation model (or DEM) raster, but you can 'trick' it into using a flat raster.

• Updated(12/9/2015): The plugin now allows users to select a flat surface/no DEM used
• Take the raster calculator and exponentiate/raise all cell values to the power of 0 (rastervariable^0). The resulting raster will be flat with a value of 1.  Alternatively, multiply by zero.  (You may also have to symbolize null values as well.)
• Classify and symbolize the polygons using your desired color scheme--before using the plugin
• In addition, I changed the color of the raster file in QGIS to match the background in the *.html file (#ccccff). 
• I added HTML code for a basic legend using frames (90% for the map, 10% for the legend)

Basic HTML code sourcing the two frames.  The "Chicago" frame was generated from QGIS.
The "Legend" frame was a simple piece of code directed to a JPG of the Legend.

Screenshot of the final map and legend.

Mt Rainier:  Instead of using a web service, I download imagery and used the Build Virtual Raster in QGIS.   I used a detailed DEM and imagery from the USGS's National Map Viewer.  You can download files from USGS by using a bounding box, for example.  I used a vertical exaggeration of 1.1 in the plugin.  Click the screenshot below to enlarge a comparison of between Google Earth and the plugin's version of Mt. Rainier.

Left: Google Earth, Right: Plugin result using files from USGS

3D Groundwater Depths / Underground:  Using point data with depths, you can either select a negative multiplier in the plugin or create a new variable and multiply your depths by -1.

If your depths are positive values, select a negative multiplier in the plugin.

An overhead and underground view of the map.
The orange boundary represents three counties of interest.

3D Visualization of Manhattan using QGIS Plugin

GIS Blogger Anita Graser, aka Underdark, has created a nice visualization using the QGIS2threejs plugin, including an interactive web-based version.  I won't repeat the instructions listed on her blog, but I will make a few suggestions as I go along. Her eloquent map features buildings extruded (constant height), trees, and some elevation changes. Feeling inspired, I thought I would give it a quick try.

If you just want to see the visualization, visit: http://webmapexamples.net/3DExample/Cityscape.html

Note: You will need Firefox, Chrome, or Internet Explorer 11--basically a Web-GL capable browser to view the visualizations.

WebGL is an API that allows for 3D visualizations to be displayed in a web browser without additional plugins. So, users won't need to install anything to view your product.  The threejs plugin is a JavaScript library that helps to keep everything neat and tidy.  For examples of threejs projects, check out this website: http://threejs.org/ which is filled with examples of featured projects.  Believe it or not, the projects you will see below consist of five files that take up less than 5 megabytes of storage.

Tip #1: Using a shapefile or digitizing a boundary for an extent can help to speed the project along and keep the look of your map consistent.  In QGIS, you can do this using the AutoTrace plugin.

For the project, I focused on Manhattan from Central Park down to just below times square.

Below is what the project looks like in QGIS.  I left the bound on to show the project area.  I used a building footprint shapefile that contained height from New York City's Open Data Portal.  Please note: This file is large ~ 180 MB.  In addition, there is a basemap from Open Street Map using the QGIS plugin, and a DEM.  You can also add other point, polygon, or line features to your 3D map.  I have chosen to stay with just buildings.  I color-coded the buildings based on height for effect (redder is taller).  Click on any of the screenshots to magnify them.

Project area and files 

Running the plugin is rather quick.  The result is five files exported to a folder of your choosing.  The contents of the folder can be placed into the root or public directory of web hosting service to publish to the web!  Of course, you can also double-click the resulting *.html file to open it on your desktop--please note some broswers may try to block you from opening it.  So right-click, and choose open with a friendly browser like Chrome or Firefox.

Tip #2:  I created a new variable to half the building heights.  Otherwise, the tall buildings of NYC barely fit in the web browser and makes viewing awkward and challenging.

You can view the visualization at: http://webmapexamples.net/3DExample/Cityscape.html

When you first open the html file, the view will be oriented the same way you have the files in QGIS.  If you have not used 3D viewers before, you can navigate using the left and right mouse buttons and wheel to  pan, rotate, and zoom.  Try not to make sudden moves with the mouse because it is easy to get disoriented. Refreshing the web page will send you back to the starting view.

3D Visualization of Manhattan.  Redder buildings are taller.

As you zoom and pan, you can bring areas into closer view.  Here looking down 7th Avenue in NYC.

A closer look: From Central Park down 7th Avenue

Lastly, an overhead view of Times Square...

Can you see where the ball is dropped on New Year's...One Times Square?

Overall, the plugin was fast and easy to use.  Not only can it be used for creating cityscapes...You could also visualize chloropleth maps in 3D, for example.  Performance in browser was smooth.  I saw memory usage similar to what Underdark reported, around 1.6 GB of RAM.  This is reduced if you do not constantly hold down any of the mouse buttons--occasionally releasing as you view.

Update #1: If the basemap is not loading, and you see a black rectangle, reload/refresh your browser once or twice and it should appear!

Update #2: Forgot to mention: Since almost 2 GB of RAM is used--this prevents viewing the maps on a mobile device, since most mobile devices don't have or max out at 2 GB.  I have gotten them to load in Android after a long time, but you won't be able to manipulate them (zoom, pan, rotate,etc.)