Geospatial Visualization Tools and Techniques - XenonStack

What is Geospatial Visualization?

GeoMapping used to develop complex visualizations of large geographically related data. Maps are only the ways of visualizing data. By visualizing geospatial data, show and correlate different variables to geographical locations by layer all these variables over maps. GeoMap can be the map of any country, world, region map which has colors and values assigned to regions. Geospatial Visualization can be 2D contains latitude and longitude, and can be three dimensional also.

We create maps using abstract shapes and colors to reveal geographic patterns and tell stories about human existence. Visualize the maps by giving colors, shapes to understand geographic patterns and in the form of stories.

Follow the below process to create interactive Geospatial visualizations –

  • Data collection
  • Data processing
  • Exploration with web-based tools as map box, carto, etc.
  • To build prototypes, port visualizations into java script with tools leaflet.js, react.

Different map layers or map types use to visualize geospatial data –

Point Map

Point map can be used to plot places and locations using latitude and longitude data. It uses points or dots to locate the data.

Choropleth Map

Choropleth Map shows data in the form of the aggregate sum of geographic regions. Uses categorical or numerical data and use color scales to assign colors to data.

Cluster Map

Cluster maps represent a large number of data points using a single map. Each cluster labeled with many points grouped in this cluster.

Heat Map

Heat maps used to visualize a large amount of continuous data on a map using various color spectrums.


How Geospatial Visualization Works?

Conflict Zones

World Migration Map(2010 – 2015)

This map shows the estimated net immigration (inflows minus outflows) by origin and destination country between 2010 and 2015.

Visualize how the people are migrating, how many migrants are present, from where are they relocating.

Blue circles will show the inflows(positive net migration), red circles will show outflows(negative net migration), yellow dot or circle will represent the one thousand people. Hover over circle provides to see country net migration inflows and outflows between 2010 and 2015.

Leaflet.js

A leaflet is an open source JavaScript library for mobile-friendly interactive maps and has a vibrant and active community. The leaflet has a lot of features and plugins to support doing pretty much anything with a map.

Used by the world’s biggest websites, startups, online services with millions of users, government agencies, the biggest new media of the world.

Features –

  • Extremely lightweight, weighing just about 30 KB of JS code, it has all the features most developers ever need for online maps
  • Support displaying data in any JSON-based data format not only just GeoJSON
  • It can draw points using image-based, HTML-based, and circle markers as well as support for drawing lines and polygons and styling those features dynamically.
  • Enable interactive, infographic style visualizations.
  • GeoJSON Layers, Markers (custom markers) and Pop-ups, Pure CSS3 pop-ups and controls (easy designing and animation).

Benefits –

  • Designed with simplicity, performance, easy to use and usability in mind.
  • No external dependencies
  • Nice default design for pop-ups, markers, layers, and other map controls and tile layers are well supported.
  • Double click zoom, animated markers, events, click, mouse over.

Leaflet Plugins

  • BaseMap – Leaflet allows us to use a variety of base maps. Example – basemap formats, image display.
  • Marker Clustering – Clusters required for interactive maps where the user can see the data points grouped in a cluster. Cluster maps reduce the complexity when there are many data points in a small area on the map.
  • HeatMaps
  • Dynamic custom/data loading

Steps to make Customized visualizations in the leaflet –

  • Build a Leaflet map layer by adding a map instance with the L.map method to the mapLayer and add a tile layer from any of base map layer plugin.
  • Read data from the json file and add popups.
  • Create a new MarkerClusterGroup; it will make clusters and plot them to the map.
  • Customize the clustered markers.
  • Plot customized clusters as a background image.

Big Data Visualization

Visualize 54,000 data points on map using marker cluster  plugin.

Customization

Customize the markers by using customized CSS icons and customize clusters using background images.


How to Adopt Geospatial Data Visualization?

Steps to make Customized visualizations in the leaflet

Build Leaflet map layer by adding a map instance with the L.map method to the mapLayer and add a tile layer from any of base map layer plugin. Choose different tile layers in a leaflet by using a tile Layer method and change the type of title layer. We can set the latitude and longitude locations by setting coordinates positions.



/ *

var map = L.map('map').setView([75.47607421875, 31.13760327002129], 2);

L.tileLayer( 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png', {
attribution;,
}).addTo( map );

*/

Read data from the json file and add popups

Load and transverse the data from the JSON file and select what information shows on clicked on popup(icon) on the tool tip. The below code will display the name, city, iata/faa, ICAO(International Civil Aviation Organization), altitude and timezone on tool tips.


/*
for(var i=0; i<markers.length; i="">NAME:" +="" markers[i].name="" 'CITY:' + markers[i].city +
'
IATA/FAA:' + markers[i].iata_faa +
'
ICAO:' + markers[i].icao +
'
ALTITUDE:' + markers[i].alt +
'
TIMEZONE:' + markers[i].tz ;

var m = L.marker([markers[i].lat,markers[i].lng],{icon: addIcon} )
.bindPopup( addPopup );
addmarkerClusters.addLayer( m );
}

*/
</markers.length;>

Create a new MarkerClusterGroup, it will make clusters and plot them to the map. We can set the marker radius using below the maxclusterradius property. Customize the clustered markers. Set iconsize using iconsize property.


/*

var addmarkerClusters = L.markerClusterGroup({
markerClusterRadius: 120,
iconCreateFunction: function(cluster){
return new L.Division(html: cluster.getChildCount(),className: 'mycluster', iconSize: L.point(35,25))
}
})

*/

Plot customized clusters as a background image using an icon created by adding a background image.


/*

.mycluster{
background-image: url('pin2.png')
}

*/

The whole program shows clusters, count of icons inside one cluster shown on clusters add and clicking on the cluster will show the icons inside it.


Benefits of Using Maps in Data

Some benefits of using maps in data visualization include –

  • A greater ability to more easily understand the distribution of the organization’s presence across the city, state, or country.
  • The ability to compare the activity across several locations.
  • More intuitive Decision Making for company leaders.
  • Contextualize data in the real world.

Tools for Data Exploration

You can also read more about Data Visualization Tools in this piece of content.


Libraries for Visualizing Geospatial Data