Thursday, October 20, 2016

How to Add 3D Buildings to a Map

Mapbox has now added an example of 3d buildings to the Mapbox GL JS documentation. The Display Buildings in 3D example map provides you with all the code you need to use extrusions to display 3d buildings in a Mapbox GL map.

One thing missing from the example map is the light properties that control the lighting of the 3D buildings: light color, intensity, position, and anchor. These light properties are easy to add to the 'Display Buildings in 3D' example map by simply adding -

map.setLight({color: "#6ef", intensity: 0.5, position: [1.15, 135, 45]});

to the map.on function.

If you want to learn more about these light properties then you might also want to have a look at the Mapbox Blog post Shading and lighting 3D features in Mapbox GL JS.

I've also created an example map of 3d buildings in Mapbox GL. In my map I've added the option to navigate the map with game-like controls. This enables you to fly around the map and 3d buildings using your forward and left & right keyboard keys. I've also used the light properties of the 3d buildings to simulate the dropping of bombs on the map. If you press your keyboard down button the building light property flashes to simulate a bomb going off on the map.

Mapping Human Colonies on Mars

Recently National Geographic has started using Leaflet.js to provide interactive versions of the beautiful supplemental posters issued with each months National Geographic magazine. The September poster, exploring life in the Pacific Ocean off British Columbia, is available to view in the British Columbia Supplement.

The October print edition of the National Geographic includes a double sided poster about Colonizing Mars. The art side of the poster depicts a possible human colony on the red planet. It explains some of the technical difficulties which would be faced in establishing a Mars colony and shows what such a colony might look like.

The map side of the poster is a new map of Mars based on imagery and data from NASA's most recent missions to the planet. If you are interested in maps of Mars you might also enjoy National Geographic's article on the history of mapping the planet, What Mars Maps Got Right (and Wrong) Through Time.

If you want to create your own interactive map from an illustration, photo or other still image then you might find Zoomable Images with Leaflet helpful. This tutorial explains how you can use GDAL2Tiles and MapTiler to render map tiles from an image. If you have a Zoomify account Showing Zoomify Images with Leaflet explains how you can create an interactive Leaflet map from your Zoomify images.

Wednesday, October 19, 2016

Redlining Maps

The Home Owners' Loan Corporation (HOLC) was a government-sponsored corporation created as part of President Franklin D. Roosevelt's New Deal. Its purpose was to refinance home mortgages, which were in default, in order to help prevent foreclosures.

The HOLC is often cited as starting the practice of mortgage redlining. Redlining is the process of denying services to residents of certain areas based on the racial composition of those areas. The term comes from the maps, created by the HOLC, which marked in red the areas where the banks would not invest. The result of these maps was that residents in the more affluent and largely white neighborhoods were far more likely to receive financing under the New Deal. Residents in the poorer and black communities were deemed more of a financial risk and so were less likely to receive financial support.

You can explore examples of redlining maps from across the United States on the Mapping Inequality website. Using the Mapping Equality map you can zoom in on locations to view HOLC maps created for a number of American cities. When you view one of the historical maps the map sidebar provides details on the local population and the percentage of the city which was redlined on the HOLC map of the city.

Tuesday, October 18, 2016

3D Buildings in the Sun

Mapbox has created another great demo showcasing the new 3d buildings feature available in Mapbox GL. This new map demonstrates how you can use shading & lighting with 3d buildings to create depth and reflect different lighting conditions.

The extrusion lighting demo map in Shading and lighting 3D features in Mapbox GL JS includes three controls. These controls allow you to change the colors of the 3d buildings, the lighting intensity and the light direction.

Using the light direction and the light intensity options you can see how you could create a map which reflects the lighting conditions during the course of a day. You can use light direction to ensure that the light on the map mirrors the light direction from the sun during different times of the day. You can then change the light intensity to reflect the rising and falling of light during sunrise and sunset.

Another great demonstration of Mapbox's 3d buildings can be seen in Robert White's Vancouver Zoning Map.

Mapping Fracking Demands on Water

Over 350 billion gallons of water are used in hydraulic fracturing in the United States. Unfortunately over half of the wells hydraulically fractured in the last five years are in areas of high or extremely high water stress, including water basins in Texas, Colorado, Oklahoma and California.

Ceres has released an interactive map to show the locations of hydraulic fracturing well locations and the related water risk trends where these wells are located. The Competition for Water in US Shale Energy Development map provides an overview of overall water stress throughout the United States. The locations of fracked wells are also shown on the map. It is therefore easy to use the map to see where hydraulic fracturing is taking place in areas of high water stress.

The map also shows the outlines of major water basins in the United States. If you click on the water basin outlines on the map you can view the total number of fracked wells using the basin for water and the percentage of wells operating in areas of high and extreme water stress. For example 99% of fracking wells using the California water basin are operating in an area of high and extreme water stress.

Mapping NATO's Global Operations

The North Atlantic Treaty Organization (NATO) was set up after World War II as an alliance of European and North American countries. Its aim was to safeguard the member countries by agreeing to a policy of mutual defense.

NATO has released a new interactive map to help explain how the organization functions and how and where it operates around the world. NATO on the Map allows you to view which countries belong to the alliance, which countries it works in partnership with and its influence on global peacekeeping.

The map allows you to view the locations of NATO's civilian headquarters, military commands and headquarters around the world. It also shows examples of where NATO has sought to "project stability in its neighbourhood and beyond." A 'Security Challenges' layer shows some of the present global threats to peace and security that NATO and its partners currently faces across the globe.

The map includes two main map views a Google Maps aerial view and a Cesium powered 3D view.

Monday, October 17, 2016

Vancouver's 3D Building Zones

Last week Mapbox revealed their new extrusion properties for data layers in Mapbox GL JS. These new extrusion properties allow you to create 3d buildings (extruding buildings by their number of floors) or other 3d data visualizations on a map using your own data layers.

Robert White has already used Mapbox's new 3d buildings option to create the impressive Vancouver Zoning Map. Robert's map not only has 3d buildings but also uses data styling to color those buildings and other map features to show Vancouver's distinct city zones.

Using the map you can explore how & where Vancouver uses zoning within the city. You can also see how this zoning has an effect on the building heights in Vancouver's neighborhoods.

If you want to see how you can create your own building height map then you might want to have a look at my How to Create a Building Height Map tutorial. Mapbox has yet to create a good tutorial for creating 3d buildings with Mapbox GL JS. However you can have a look at the demo map provided in their blog post, 3D Features in Mapbox GL JS, to see how the new extrusion properties work.

Freestyle Downhill Water Mapping

Andy Woodruff has invented a kind of hydrodynamics physics engine for interactive maps. It allows him to create an animated map which visualizes water drainage flow for any location on Earth.

In the Rain on the Terrain Andy tries to answer the question of where water would flow if you poured it over the terrain at any location on the planet. His solution is essentially to use elevation data to find the lowest adjacent location for any given location. Drop some water at this location and it will find the path of least resistance and move to the adjacent location with this lowest elevation.

Repeat this process and you can plot a long path of the least resistance, moving downhill. If you then animate a polyline along this path you can create a map of flowing rivers. Andy's map allows you to visualize the animated flow map of drainage for any location on Earth (based on his simple algorithm). The map also includes some quick links to zoom the map to a number of locations with interesting terrain.

Saturday, October 15, 2016

The Great Global Treasure Hunt

You can now create your own Treasure Map games on Google Maps. Map Channels has released a new simple to use platform which you can use to create your own treasure hunt map games.

Treasure Maps helps you easily set-up a treasure hunt game with Google Maps and Google Street View. You just need to add a few locations (and a few clues to find the locations) and you can then share your treasure hunt game with anyone that you want.

Before creating your own treasure hunt you might want to play some of the games already made with Treasure Maps. For example, the Tour of London treasure map requires you to find and locate 15 famous landmarks in the English capital. Your task is to follow the clues to find each location on the map. A large circle on the map shows you the current search area. As you get closer to the correct location on the map the circle gets smaller, narrowing down the area you need to search and helping you in your quest to find the correct location.

If you create your own treasure hunt game with Treasure Maps you can share the link to the game with your friends or you can embed the game in your own website or blog.

Friday, October 14, 2016

The Tron Map of the World

Mapzen has released a new futuristic map style called Tron 2.0. The map features a host of animated features and glowing polylines so Mapzen warn that it could push your computer to its limits (although it seems to work fine on my ancient laptop).

The visual style of Tron 2.0 relies on neon colors and primary shapes. This is perhaps most apparent in the animated ocean polygons and the glowing, pulsating coastlines. The extruded building footprints are particularly futuristic in style, especially if you zoom in and out (as in the animated GIF above).

There are a lot of other features in Mapzen's Tron 2.0 (check out the animated runway lights at airports). So, if nothing else, you should have a lot of fun exploring the world in Tron 2.0.