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:
- To decide what library you want to use (I’ll outline pros and cons).
- Knowledge of how to prepare your data and harness that library’s abilities (this is where FME comes in, and below you’ll find a step-by-step guide).
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.
Choosing a web visualization library
Step one. Here are a few questions to ask yourself:
- What kind of data do you need to visualize? For example:
- Display 2D/vector data on a map.
- Let end-users explore 3D buildings, landscapes, or objects.
- Display rich, interactive charts and graphs (not covered in this blog because it’s not geospatial, but if this is what you need, check out D3.js or Plotly).
- Do you need to see the data on a spatially referenced background map?
- Do you prefer a free and open source (FOSS) solution or a proprietary one?
- How much coding are you willing to do?
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.
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.
- Tutorial: Streaming GeoJSON on an OpenLayers basemap.
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.
- Steps: Convert your data to Mapbox Vector Tiles (support for this format is coming soon in FME) and pass it to the API for rendering.
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).
- Try it: Data download service using Google Maps, powered by FME Cloud (here’s the tutorial).
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.
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.
- Example: Rendering 3D buildings with FME and CesiumJS.
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!
- Tips: Convert your data to .slpk format and host it in the cloud for use by ArcGIS. FME has an I3S writer as of FME 2018.1.
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.
- Examples: On your mobile device, go to fme.ly/vrhome to see a three.js VR scene. Also, check out this flight simulator demo. You can automate the data conversion and coding process using FME’s ThreejsSceneCreator custom transformer, which outputs the HTML and converted data to a folder that you can host somewhere like S3.
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).
- Tips: Babylon files are just JSON. We haven’t tried converting to Babylon with FME, but if you try this and/or if you would like to see a native Babylon writer in FME, please let us know on the FME Knowledge Center!
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.
- 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.
- 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).
- 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.
- Data simplification: While some formats like glTF or Cesium take care of this, you’ll probably want to perform some of it yourself. Helpful transformers include the MeshSimplifier (to reduce the number of triangles), Dissolver (to dissolve boundaries), and Tiler (to break large data into pieces).
- Data quality: Here’s a checklist and a tutorial on using FME for data validation.
- Open data portals: Here’s an article with tips on building a web portal.
- Background maps and textures: For three.js and other libraries that require folders of images, use any of FME’s raster writers.
- Coordinate systems: Get the data into the right coordinate system using the Reprojector transformer (or CsmapReprojector or another *Reprojector transformer, if you want to use a different reprojection engine).
- Converting geometry to 3D: Helpful transformers include the 3DForcer, Extruder, FaceReplacer, AppearanceSetter, GeometryFilter, TINGenerator, SurfaceModeller, and Triangulator.
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
Tiana WarnerTiana 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.
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.
Hi Zaheer. It sounds like Cesium would be a great option for your use case. Thanks for your comment!
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
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!
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!
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: https://www.mosdac.gov.in/sci/ 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!
Sounds like a fun project! You can use FME to integrate the vector, raster, and DEM layers, then send it to Cesium for visualization. Cesium is a good choice because it’s made for geospatial data. We have more information on how to do that in this blog post: https://www.safe.com/blog/2018/08/bring-2d-data-cesiumjs/
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?
You can create the interactive globe using Cesium and use FME to process the data. FME Cloud can also be used for hosting an IT portal like the one you’re describing. Cesium has a tutorial to help you get started: https://cesium.com/docs/tutorials/integrating-with-fme/
If you need help building the solution, we have a big network of partners who can help: https://www.safe.com/partners/partner-locator/
Thanks for your comment!
While working in the West Gate Tunnel Project I trailed I3S
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.
Thanks for your comment. A number of web mapping libraries would be suitable for this scenario. We have some demos with tutorials that sound similar to what you’re after (interactive points on a map):
Have a look at the tutorials for step-by-step guides. You could use FME Server Apps to create an interface with an interactive map that allows people to choose a point of interest.