By creating a web map or 3D scene using a web visualization library, you can share your geospatial data with anyone using a URL. Here are a few available tools and a step-by-step guide to creating a visualization. See live demos in our on-demand webinar.

The data visualization libraries we’re about to explore have the power to help you build something mind-blowing. Whether you want to share an interactive web map of your data repository, a 3D scene of a building information model, or something else geospatially awesome, the power is all here. You just need two things:

A lot of industries already use these methods for sharing datasets, including local government, aerospace, AEC, real estate, utilities, and more. Just look at Cesium’s user gallery and consider all the websites that have an embedded map as part of their interface.

Left: Polygons viewed on an OSM web map. Right: Converted to 3D and rendered in Cesium.

Choosing a web visualization library

Step one. Here are a few questions to ask yourself:

Got your goal in mind? Here are some options.

Building interactive web maps for 2D data

You’ve got polygons, lines, and points, say in a GIS, and you want to share these on a map in a browser. The below technologies let you embed a map on a web page with varying levels of functionality and work involved.

Leaflet web map of FME World Tour 2018 cities.


Powerful and the most lightweight (mere KBs), Leaflet is a straightforward FOSS option for building interactive web maps and data download services. It likely does everything you need for the least amount of JavaScript coding. Plus you get a choice of which basemap you want – OpenStreetMap, Mapbox, Esri, etc.


This FOSS library is often praised for being more mature and having more features than Leaflet—so if you’re after rich, customizable, GIS-like functionality, try OpenLayers. OpenLayers supports a lot of data formats, so you probably won’t need to convert your data before streaming it to your OpenLayers application.

Mapbox GL

Mapbox is a widely adopted favourite. The key here is the use of WebGL to render vector tiles, making it very powerful (too powerful for older browsers, actually). Note Mapbox GL is different than Mapbox.js, a plug-in built on top of Leaflet that renders raster tiles.

Google, HERE, Bing, and other mapping providers

You could use the Google Maps API or another tool from your favourite mapping provider to place your data on a basemap. This is a straightforward option if you don’t need as much control over the end result. You also get access to whatever these providers offer, e.g. Google’s unparalleled navigation and traffic/transit information. But you will have their company logo on your map and their terms of service to comply with (as opposed to a FOSS option).

Building interactive 3D visualizations

You’ve got a building information model, landscape, CAD model, or similar, and want to let people zoom, pan, and explore that 3D world in a web browser. The motivation behind these technologies is that sharing your geospatial data via URL is easier than sending someone a huge dataset or making a non-technical person install the necessary software.

3D Vancouver buildings in three.js


Cesium excels in power and accuracy. Use it to see real-world data in an accurate 3D environment, like a landscape or georeferenced building. It’s coordinate system aware, comes with pre-made globes for background maps, and supports tiling. Plus, it’s open source and has a very active community.

To use Cesium, you can either convert your data to the Cesium 3D Tiles format and use the CesiumJS library to build the visualization, or send your data to the Cesium ion platform, which streams the data and automagically generates the visualization. 


Indexed 3D Scene Layer is an open specification developed by Esri that has been accepted by OGC as a community standard. It can render 3D objects, meshes, points, and point clouds. The benefit of using I3S is that it’s designed specifically for GIS data and makes it easy to connect to ArcGIS’ geoprocessing power. This technology is fairly new, so we haven’t seen much of it in action yet—let us know what you’re using it for!


This powerful, lightweight library is designed for everything from gaming to sharing BIM data. Three.js has no geospatial reference but is a great choice if you don’t care about the spatial location of the data—say if you just need to explore a building or 3D object. It also has WebVR support, which means you can build virtual reality scenes.


This is a popular 3D rendering tool like three.js, the key difference being that BabylonJS was specifically designed to be a gaming engine. While BabylonJS has less functionality than three.js, it does have a more controlled dev cycle (by Microsoft).

Optimized 3D format: glTF

glTF, or GL Transmission Format, is like the JPEG of 3D data. It’s a fantastic open specification that represents 3D surfaces and optimizes the size of the asset. It’s supported by three.js and CesiumJS, so you could write to this format instead of Cesium 3D Tiles or JSON.

Note glTF doesn’t support attributes, but you can work around this by writing a JSON array in parallel that contains all the attribute information.

Get started: step-by-step guide

Whatever tool you choose for your web map or 3D scene, the process is roughly the same. We’ll demo these steps during Wednesday’s webinar.

  1. Prepare your data so it meets the library’s requirements. This data preparation phase is where FME comes in. Your FME workspace will likely involve blending data sources, converting the data to the acceptable format, checking for errors and repairing them, and in some cases, simplifying the data so you aren’t sending unnecessarily complex data to the web.

Example FME Workspace converting data to Cesium ion.

  1. Publish the data to the web. Some libraries, like I3S, need you to host the data in a specific place. Other libraries, like Leaflet, don’t care where the data is as long as it’s accessible (e.g. you can send it to your Amazon S3 bucket).
  1. Use the library to build a web page that references this data. This will likely involve coding JavaScript and/or HTML, or using the technology’s interface to build the page (e.g. as with Cesium). For some libraries, like three.js and Leaflet, FME can generate this code for you.

Preparing a 3D data visualization using JavaScript in the Cesium web interface.

  1. Host your final product on the web via FME Cloud. Keep the web visualization up to date by running your FME workspace on a schedule or in response to an event, e.g. whenever new source data arrives. (Find examples in the FME Server Playground.)

Helpful FME Tips

FME writes to many of the above formats and has a lot of transformers to prepare the data for whichever library you use. Start typing a keyword, like ‘Cesium’, on the FME Workbench canvas and you’ll see the right writers/transformers for your task. Beyond that, here’s everything I can think of to get you running with your web visualization.

The above libraries offer impressive and convenient ways to share your geospatial data in a web browser. FME can convert and prepare your data for your library of choice, publish it to the web, and keep your visualization up to date via FME Server automations.

Watch our on-demand webinar to see live demos of these tools

This isn’t an exhaustive list, so let me know: what tools have I missed? Which one(s) do you plan to use and why? Leave a comment!

Tweet this blog

About Data ArcGIS Babylonjs Bing Maps Cesium Esri Foss Geospatial Data Gltf Google Maps Here Technologies I3s Leaflet Mapbox Mapping OpenLayers Three.js

Tiana Warner

Tiana is a Senior Marketing Specialist at Safe Software. Her background in computer programming and creative hobbies led her to be one of the main producers of creative content for Safe Software. Tiana spends her free time writing fantasy novels, riding her horse, and exploring nature with her rescue pup, Joey.


12 Responses to “8+ Ways to Visualize Geospatial Data in a Web Browser”

  1. Zaheer Syed says:

    Thanks Tiana. It was an informative article. I have a question though. How would you compare Cesium vs babylon, when it comes to rendering geospatial data and 3D building data. We are trying to model 5G communication systems and we were looking for options for geoaware and physics aware platforms to do RF ray tracing.

    Thanks in advance.

  2. Matthew Blair-Vincent says:

    Hi there,
    I am a property investor and I have data, which is currently in the form of UK postal codes on an excel spreadsheet. I would like to visualise this data in the form a very basic heat map, in order to observe concentrations of certain types of property within a given city. I know absolutely nothing about coding. What would you recommend?
    Many thanks for your time


    • Tiana Warner says:

      Hi Matthew! For a no-code option, try looking at Google Data Studio. You should be able to build on one of their templates and connect to your Excel data. You could also try Business Intelligence software like Qlik or Tableau. If you need to pre-process your data before loading it into these tools/software, contact us for a free FME trial and we can help you get started. Thanks!

  3. Putri Aprilia says:

    I’m a Landscape Designer and I want to map out a lot of (let’s say a thousand) street trees in my area and make a simple website out of it by tagging the trees using QR code and then the QR code will direct the user to the said map with the exact coordinate(s) of the tree location. I already have the data in excel including their trunk diameter detail etc. Already got the coordinate points using Google something. The next step I’m currently at is jazzing up the map/site. Let’s say making the points color green, or adding a simple hover feature or something like that. I have zero zilch nada knowledge about coding. What do you think is the hassle-free way to visualize it? Any recommendations of websites to do that?

    Thank you so much!

  4. shivani bathani says:

    Hey there,
    I’m an intern at ISRO(Indian Space Research Organization) SAC(Space Applications Center) and my project is a Web GIS application with 3D visualization. I will be provided the data from the ISRO server and I have to make a website similar to Ocean Eye: So I’m a bit confused about what tool or library to use for 3D visualization of the vector and raster and DEM layers along with technologies like GeoServer and QGIS.

    Thank you in advance!

  5. Jassett says:

    Hello Tiana,

    I am wanting to create a 3D globe that can be explored by clicking and dragging the globe to turn. I want to create this for an IT Portal web page but I do not have any coding experience. I want the web page to have a social network web with points that can be clicked into to find the team for an IT ticket. What would you recommend? How would you recommend I start? Is there something that I can read to help me find the steps to do that?

  6. Marco Giana says:

    While working in the West Gate Tunnel Project I trailed I3S
    using FME and ArcGIS Pro and Enterprise ArcGIS Portal to convert CAD models to I3S. Could be viewed using Portal Scene viewer. I also built a custom viewer using ArcGIS JavaScript API. I was impressed with the results. #FME #ESRI #I3S. The article should really single out the ESRI offering as it is one of the best I have worked with and improves considerably with each release.

  7. HI Tina,

    My compliments for the interesting work that you are doing.

    Am presently working on a project wherein we are trying to create a web platform that provides geospatial mapping of buyers and sellers of various commodities (metals) with an interface that provides for the customer to zoom into a specific location and click on a particular data point, to retrieve more information, or land on a separate page that puts him across in communication with that buyer / seller. This data points on a map (most likely a globe) will be blinking/ color coded depending on their closeness to matching the user’s requirement criteria.

    what do you recommend ? What’s the best way to deal with this ?

    Thanks in advance.

Leave a Reply

Related Posts