# Using JavaScript to Create Geospatial and Advanced Maps

Geospatial Information Systems (GIS) is an area of cartography and information technology concerned with the storage, manipulation, analysis, and presentation of geographic and spatial data. You are probably most familiar with GIS services that produce dynamic, two-dimensional tile maps which have been prominent on the web since the days of MapQuest.

Until recently, developing geospatial apps beyond a 2D map required a comprehensive GIS service such as ArcGIS, Nokia Here, or Google Maps. While these APIs are powerful, they are also expensive, onerous to learn, and lock the map developer to a single solution. Fortunately, there are now a wealth of useful, open source JavaScript tools for handling advanced cartography and geospatial analysis.

In this article, I’ll examine how to implement GIS techniques with JavaScript and HTML, focusing on lightweight tools for specific tasks. Many of the tools I’ll cover are based on services such as Mapbox, CloudMade, and MapZen, but these are all modular libraries that can be added as packages to Node.js or used for analysis in a web browser.

Note: The CodePen examples embedded in this post are best viewed on CodePen directly.

## Geometry & 3D

### Distance and Measurement

It is especially useful to have small, focused libraries that perform distance measurement, and conversion operations, such as finding the area of a geo-fence or converting miles to kilometers. The following libraries work with GeoJSON formatted objects representing geographic space.

• Geolib provides distance (and estimated time) calculations between two latitude-latitude coordinates. A handy feature of Geolib is order by distance, which sorts a list or array by distance. The library also supports elevation.
• Turf.js, which is described in the next section, also provides a distance function to calculate the great-circle distance between two points. Additionally, Turf.js calculates area, distance along a path, and the midpoint between points.
• Sylvester is a library for geometry, vector, and matrix math in JavaScript. This library is helpful when basic measurement of lines and planes is not enough.

### 3D

While the above libraries work well for 2D projections of geography, three-dimensional GIS is an exciting and expansive field—which is natural because we live 3D space. Fortunately, WebGL and the HTML5 canvas have also opened up new 3D techniques for web developers.

Here’s an example of how to display GeoJSON Features on a 3D object:

See the Pen 3D Map Sphere using Three.js by SitePoint (@SitePoint) on CodePen.

You can also check out Byron Houwen’s article on WebGL and JavaScript, which shows how to create a terrain map of earth with Three.js

## Geo Features & Points

Much of the work in GIS involves dealing with points, shapes, symbols, and other features. The most basic task is to add a shape or point features to a map. The well-established Leaflet library and newcomer Turf.js make this much easier and allow users to work with feature collections.

• Leaflet is simply the best option for working with the display of points, symbols, and all types of features on web and mobile devices. The library supports rectangles, circles, polygons, points, custom markers, and a wide variety of layers. It performs quickly and handles a variety of formats. The library also has a rich ecosystem of third-party plug-ins.
• Turf.js is a library from Mapbox for geospatial analysis. One of the great things about Turf.js is that you can create a collection of features and then spatially analyze, modify (geoprocess), and simplify them, before using Leaflet to present the data. Like Geolib, Turf.js will calculate the path length, feature center, points inside a feature.
• Simple Map D3 creates choropleths and other symbology by simply defining a GeoJSON object and data attribute.

The following is an example of using Turf.js to calculate the population density of all counties in the state of California and then displaying the results as a Leaflet choropleth map.

See the Pen Population Density by County by SitePoint (@SitePoint) on CodePen.

A key concept in Turf.js is a collection of geographic features, such as polygons. These feature are typically GeoJSON features that you want to analyze, manipulate, or display on a map. You start with a GeoJSON object with an array of county features. Then, create a collection from this object:

``collection = turf.featurecollection(counties.features);``

With this collection you can perform many useful operations. You can transform one or more collections with joins, intersections, interpolation, and exclusion. You can calculate descriptive statistics, classifications, and sample distributions.

In the case of population density, you can calculate the natural breaks (Jenks optimization) or quantile classifications for population density:

``breaks = turf.jenks(collection, "pop_density", 8);``

The population density (population divided by area) value was calculated and stored as a property of each county, but the operation works for any feature property.

### Working with Points

Points are a special type of geographic feature representing a latitude-longitude coordinate (and associated data). These features are frequently used in web applications, e.g. to display a set of nearby businesses on a map.

Turf.js provides a number of different operations for points, including finding the centroid point in a feature and creating a rectangle or polygon that encompasses all points. You can also calculate statistics from points, such as the average based on a data value for each point.

There are also extensions for Leaflet.js that help when dealing with a large number of points:

• Marker Cluster for Leaflet is great for visualizing the results from Turf, or a collection of points that is large. The library itself handles hundreds of points, but there are plugins like Marker Cluster and Mask Canvas for handling hundreds of thousands of points.
• Heat for Leaflet creates a dynamic heat map from point data. It even works for datasets with thousands of points.

## Geocoding & Routing

Routing, geocoding, and reverse geocoding locations requires an online service, such as Google or Nokia Here, but recent libraries have made the implementation easier. There are also suitable open source alternatives.

The HTML5 Geolocation API provides a simple method of getting a device’s GPS location (with user permission):

``````navigator.geolocation.getCurrentPosition(function(result){
// do something with result.coords
);``````

Location-aware web applications can use Turf.js spatial analysis methods for advanced techniques such as geofencing a location inside or outside of a map feature. For instance, you can take the result from the above example and use the turf.inside method to see if that coordinate is within the boundaries of a given neighborhood.

• GeoSeach is a Leaflet plugin for geocoding that allows the developer to choose between the ArcGIS, Google, and OpenStreetMaps geocoder. Once the control is added to the base map, it will automatically use the selected geocoding service to show the best search result on the map. The library is designed to be extensible to other third-party services.
• Geo for Node.js is a geocoding library that uses Google’s Geocode API for geocoding and reverse geocoding. It additionally supports the Geohash system for URL encoding of latitude-longitude coordinates.

As with geocoding, there are myriad routing and direction services, but they will cost you. A reliable, open source alternative is the Open Source Routing Machine (OSRM) service by MapZen. It provides a free service for routing car, bicycle, and pedestrian directions. Transit Mix cleverly uses the OSRM Routing tool for creating routes in their transportation planning tool.

## Spatial and Network Analysis

I’ve mentioned a few spatial analysis methods you can implement with Turf.js and other libraries, but I’ve only covered a small part of a vast world. I’ve created an example application that illustrates several of the techniques I’ve introduced.

See the Pen LA Point-of-Interest Analysis by SitePoint (@SitePoint) on CodePen.

## Conclusion

In this article I hope to have provided a comprehensive overview of the tools which are available to perform geospatial analysis and geoprocessing with JavaScript. Are you using these libraries in your projects already? Did I miss any out? Let me know in the comments.

If you want to go even further with geospatial analysis and geoprocessing with JavaScript, here are a few more resources and utilities:

• NetworkX and D3.jsMike Dewars’ book on D3.js includes a number of examples of using D3 with maps and spatial analysis. One of the more interesting examples is creating a directed graph of the New York Metro, which is done by analyzing the Google Transit specification for MTA with NetworkX.
• Simply.js — Turf uses Vladimir Agafonkin’s Simply.js to perform shape simplification. That library can also be installed as an independent Node.js package for online or offline processing of files.
• d3 Geo Exploder — Ben Southgate’s d3.geo.exploder allows you to transition geographic features (geoJSON) to another shape, like a grid or a scatter plot.
• Shp — Use this library to convert a shapefile (and data files) to GeoJSON
• ToGeoJSON — Use this library to convert KML & GPX to GeoJSON
• Shp2stl – Use this library to convert geodata into 3D models that can be rendered or 3D printed.
• MetaCRS and Proj4js— use these libraries to convert between coordinate systems.

### What is the significance of JavaScript in geospatial mapping?

JavaScript plays a crucial role in geospatial mapping. It is a powerful programming language that allows developers to create interactive maps and visualize data in a more engaging and user-friendly manner. JavaScript libraries such as Leaflet and OpenLayers provide a range of functionalities for creating and manipulating maps, including adding layers, markers, popups, and handling user interactions. These libraries also support GeoJSON, a format for encoding geographic data structures, which is widely used in geospatial mapping.

### How does geospatial mapping work in JavaScript?

Geospatial mapping in JavaScript involves several steps. First, geographic data is collected, which can include information about locations, boundaries, and features of interest. This data is then processed and converted into a format that can be used in JavaScript, such as GeoJSON. JavaScript libraries like Leaflet or OpenLayers are then used to create a map and plot the geographic data onto it. These libraries provide various functions for manipulating the map and the data, such as zooming, panning, adding markers, and handling user interactions.

### What is the difference between a JavaScript Map and a geospatial map?

A JavaScript Map is a built-in object that stores key-value pairs and remembers the original insertion order of the keys. It is used for fast lookups and retrievals of data. On the other hand, a geospatial map refers to a visual representation of geographic data. In the context of JavaScript, geospatial maps are typically created using libraries like Leaflet or OpenLayers, which provide functions for displaying and interacting with geographic data.

### How can I add interactivity to my geospatial map in JavaScript?

Adding interactivity to a geospatial map in JavaScript can be achieved using various methods provided by mapping libraries. For example, you can add event listeners to map elements to respond to user actions like clicks or mouse movements. You can also add interactive features like popups, tooltips, and layers that can be toggled on and off. Additionally, you can use the GeoJSON format to encode your geographic data, which allows for more complex interactions like highlighting features when they are hovered over or clicked.

### What is GeoJSON and how is it used in JavaScript geospatial mapping?

GeoJSON is a format for encoding geographic data structures. It is based on JSON (JavaScript Object Notation), making it easy to use with JavaScript. In geospatial mapping, GeoJSON can be used to represent features such as points, lines, and polygons, along with their properties. Mapping libraries like Leaflet and OpenLayers provide functions for loading and displaying GeoJSON data on a map. This allows developers to create complex and interactive maps with relative ease.

### How can I handle large amounts of data in JavaScript geospatial mapping?

Handling large amounts of data in JavaScript geospatial mapping can be challenging, but there are several strategies you can use. One approach is to use a technique called clustering, which groups nearby points together into a single marker when the map is zoomed out. Another approach is to use a server-side solution to process and simplify the data before sending it to the client. Additionally, you can use web workers to perform data processing in the background, preventing the user interface from becoming unresponsive.

### Can I use JavaScript geospatial mapping for real-time data?

Yes, JavaScript geospatial mapping can be used for real-time data. This can be achieved by periodically updating the map with new data from the server. Many mapping libraries provide functions for updating the map and its features without having to reload the entire map. This makes it possible to create dynamic, real-time maps that can display constantly changing data, such as the locations of moving objects.

### What are some common use cases for JavaScript geospatial mapping?

JavaScript geospatial mapping is used in a wide range of applications. For example, it can be used to create interactive maps for websites and apps, displaying locations of interest, routes, and boundaries. It can also be used for data visualization, allowing users to explore and interact with complex datasets in a visual and intuitive way. Other use cases include real-time tracking, where the locations of moving objects are displayed and updated in real time, and geospatial analysis, where geographic data is analyzed to reveal patterns and trends.

### How can I customize the appearance of my geospatial map in JavaScript?

Customizing the appearance of a geospatial map in JavaScript can be done using various methods provided by mapping libraries. For example, you can change the map’s base layer to use different styles or imagery. You can also customize the appearance of map features, such as points, lines, and polygons, by changing their color, size, shape, and other properties. Additionally, you can add custom markers, popups, and tooltips to provide more information and interactivity.

### What are some challenges in JavaScript geospatial mapping and how can they be addressed?

Some challenges in JavaScript geospatial mapping include handling large amounts of data, dealing with different data formats, and ensuring good performance. These challenges can be addressed using various strategies. For handling large data, techniques like clustering and server-side processing can be used. For dealing with different data formats, libraries like Leaflet and OpenLayers provide support for many common formats, including GeoJSON. For performance, techniques like using web workers for background processing and optimizing the code for fast rendering can be used.

Steve Pepple
View Author

I'm a designer and developer who tries to make make city streets little better. I work on civic-minded, user-centered maps and apps for urban and transit information systems. I live in San Francisco, CA.

geocodingGeoJSONgeolocationgisjameshmapsturf.js