Visualizing Geospatial Data

For visualizing the map part of the diagram, there are many interactive map controls for your preferred platform, e.g.:

Most map controls provide means to at least add some marker at geolocations but are quite limited when it comes to more sophisticated visualizations containing individual information and to react on user interaction.

In these cases, a flexible UI component should be used together with the map control to add visualization and interaction for the GeoData. The following example adds airports and flight connections to a map:

Usually, the map control has integrated support to pan and zoom the map. It is up to the UI component to keep the user data visualization at their geo coordinates.

The size of Geo Data visualization usually isn’t scaled with the zoom level (or at least not in a linear way), so on a higher zoom level, the less exciting data should be filtered out to improve the readability of the diagram.

With the help of a UI component, a Geo Data application can also react to more complex interactions. The following example highlights the shortest flight path between two selected airports (LA and Montreal):

Although mapping Geo Data to Map locations is the most natural way for visualization, alternative views can help to focus on different aspects of the data.

When looking at the example of airports and flight connections, it could be interesting to see how many connecting flights are necessary to get from one airport to another. This could be visualized in a radial fashion placing the start airport in the center and airports reachable with one, two or more flights on corresponding circles around it:

With the yFiles libraries, map integration can be realized on all supported platforms. It provides natural means to add custom visualizations for all kinds of data that can adapt to user interaction, and it offers a wide range of built-in user interactions that are fully customizable as well.

yFiles for HTML comes with a Map Integration Sample Application that showcases this flexibility. This example uses Leaflet as map control and yFiles for HTML as the UI component that integrates the airports and flight connections.

The powerful layout algorithms of yFiles can be used to enhance the data on the map e.g., to place labels in free spaces or to provide alternative visualizations like a radial viewradial view showing the hops between airports.

The source code of the Map Integration Sample Application is available on the yWorks GitHub repository and part of the yFiles for HTML package.

Test the yFiles for HTML diagramming library with a fully-functional trial package. To display geospatial data in your application, start with the Map Integration Sample Application that is part of the yFiles package. It’s not only a showcase application but also provides best-practice source code that you can re-use in your project. yFiles makes it easy to customize all aspects of this application, for example, include your custom styling, change the user interaction, or load the data from your data source.