LightningChartWPF 2D Maps

In this article, we’ll talk about WPF 2D maps in geospatial data visualization and the tools the LightningChart .NET library offers us to generate this type of chart.

What does Geospatial mean?

This word refers to geospatial analysis focused on the collection, presentation, and manipulation of images, Global Positioning System (GPS) coordinates, photographs, and satellite data (real-time or historical), using explicit geographic coordinates or identifiers used in geographic models. For this, there are several geospatial data solutions available that could be used for specific geospatial data analysis.

Another related word is Georeferencing, which has a similar meaning and focuses on determining the position of an element based on a spatial coordinate system.

Geospatial Visualization Applications

A very familiar example that uses most of the resources is the geolocation of Google Maps or some other applications such as Uber. These applications focus on the location of a location, person, or vehicle, within a map generated with Geospatial information.

This information can help us locate areas of high or low elevation, vegetation, urbanization, etc. These applications may contain other algorithms that help calculate the travel time from point A to point B. Another quite popular example is the Google Earth application.

This application can generate 3D elements based on satellite images, measurements of objects’ distances and heights from their satellite photography, and display coordinates of specific locations.

Example of a JavaScript-animated geographical temperature chart

When we talk about a WPF 2D graphics library, we talk about 2D objects, also known as 2D models or images, that are made up of two dimensions: width and length. These figures have no depth and 2D drawing tools integrate vector geometric entities such as points, lines, arcs, and polygons.

Having said the above, we can assume that a 2D map is the representation of a geographical area or another type of surface generated within a Cartesian plane. A Cartesian plane is a Cartesian coordinate system that is formed by two graduated perpendicular lines which we call coordinate axes.

The horizontal axis is usually named X and the vertical axis Y. These two axes intersect at a point called the origin of coordinates O. The use of 2D maps allows us to have a broad and direct view of a study area. Although a WPF 2D map is a flat representation, it may be more difficult to interpret the depths and volumes of areas and objects within the map.

How can data be visualized using 2D maps?

In this context, data can be visualized in two-dimensional maps when developing the application, e.g., with the assistance of a framework and third-party API. For instance, WPF allows us to generate basic 2D graphics, which can contain visual effects such as gradients, bitmaps, scale, and position editing. These charts are provided by the WPF library. WPF allows us to use external libraries (such as LightningChart .NET), which can help us generate more complex graphics, making use of the code behind and styles in the markup.

About WPF, Windows Presentation Foundation is a framework focused on the development of applications with advanced user interface control, which is divided into two parts: Markup and code-behind.

LightningChart .NET offers us various Geospatial data visualization charts using WPF 2D Maps. Each of these can be tested and used in WPF projects autogenerated by the Interactive Examples tool. All these WPF 2D maps use the XY Chart tools that are provided by the LC .Net library. If you want to see an example of programming and code implementation, I recommend that you visit any of our .NET XY charts articles.

2D map charts are based on X-Y coordinates. Unlike a bar or line chart, these maps manipulate bitmap images. Values can be obtained through third-party APIs that provide geolocation data (note that accessing this information may require a license for those APIs).

ViewXY Charts

As mentioned above, to create 2D maps we need to use XY charts or views. ​ViewXY allows presenting various point-line series, area series, high-low series, intensity series, heat maps, bar series, bands, line series cursors, etc. in Cartesian, XY graph format. Series are bound to the X and Y axes, and they use the value range of the assigned axes.

ViewXY can also show geographical maps. Geographical maps can be combined with any ViewXY series type. The maps are drawn in the background and the series over them.

Cartesian Maps

Use a Maps property and its sub-properties to show geographic maps. LightningChart .NET maps come in two different categories: vector maps and tile maps. The maps are shown in a so-called “equirectangular projection”. This projection allows the use of LightningChart’s series types and other objects that are practically all bound to the X and Y axes, at the same time with the maps.

Vector Maps: Demo examples that include a World map, Map route, Map with environmental data, and Wind data. The geographic vector data is stored in LightningChart map files, with a .md extension. LightningChart is delivered with a set of map files. The X-axis is used for Longitude, and the Y-axis for latitude. The map coordinates are decimal degrees, with latitude origin at the equator and longitude origin at Greenwich, U.K.

Layers and UI Properties

Each map file can contain several layers. For example, layers for land regions, lakes, rivers, roads, and cities. The layers and their data are accessible from the Layers array property. Each layer has a specific type. The layer appearance options can be changed with corresponding options property.

Use LandOptions for modifying the appearance of land regions, LakeOptions for lakes, RiverOptions for rivers, RoadOptions for roads, CityOptions for Cities, and OtherOptions for unspecified layer types.

MapBackground

When adding a MapBackground object, the Maps.Backgrounds property allows displaying bitmap images as the backgrounds of the maps. Satellite images or other raster images are available from several GIS data providers (a separate API license may be required).

Within this type of WPF 2D maps, the image can be set to Image property, and its latitude and longitude range can be set with LatitudeMin, LatitudeMax, LongitudeMin, and LongitudeMax properties.  The image is not displayed outside the set ranges. To show the background through the map layers, it may be necessary to adjust the fill settings for each layer. Use transparent colors or colors with low alpha levels.

IntensityGridSeries

IntensityGridSeries allows visualizing an M x N array of nodes, colored by an assigned value-range palette, the colors between nodes are interpolated. IntensityGridSeries is an evenly spaced, rectangular series in X and Y dimensions. This series allows rendering contour lines, contour line labels, and wireframes as well.

The data is stored in the Data property as a two-dimensional array. Each array item is of type IntensityPoint. Store the data value of each node in the Value field of the IntensityPoint structure, which tells what color should be used from the ValueRangePalette.

Here are some of the WPF 2D map charts that LightningChart .NET features. These examples can be easily found in the Interactive Examples application after signing up for a trial.

Map Routes

Route mapping is a fundamental practice in logistics and travel planning. It consists of creating detailed maps that show the location of a series of points of interest, destinations or stops on a specific route. By using this map, we can generate the points of one or more routes in various parts of the world, even simultaneously.

Stencil Maps

The stencil map allows us to simulate environmental data, such as rain, temperature, weather phenomena, etc. In this type of map, we do not depend on an external API, so we can enter our own data source directly. In this chart, a tool called IntensityGridSeries is used, which allows us to generate graphs that represent the degree of strength with which a natural agent, a physical magnitude, a quality, an expression, etc., manifests itself. This tool is quite useful when you want to show the strength of climatic agents in a part of the area.

Wind Maps

Wind maps are those maps that show wind speed measurements, accurately depending on the location and time indicated. Wind direction is represented with arrows and colors can be used to identify wind speed. In this map, we also use the intensity tool since this way we can represent the change in wind speed by area.

I suppose it is not necessary to emphasize the importance of 2D maps. The implementation of technology in digital maps allows us to better understand the impact of situations that affect our environment. We can observe the behavior of the weather and make decisions that keep us safe, or simply stay comfortable in our homes. From personal to commercial use, 2D maps will help us make decisions that save us time and help us improve our logistics.

Being able to establish travel and/or trade routes in our city, state, or other countries is what has helped improve the economy of many people. The use of maps with real-time geolocation allows us to move without setbacks or risks through unknown areas. This technology implemented with telemetry further amplifies the importance of geolocation maps.

Lightning Chart is a tool that allows us to generate our geolocation tools. I know that programming can be complicated if you don’t have much experience, but the Interactive Examples tool covers that problem. I recommend you download the application and practice with it.

You will be able to search for the maps that were mentioned in this project, see them in action and if you want, generate a .NET project. In this project, you will be able to experiment with the code and customize it to your liking. The most important tools that LC .NET offers were explained. You will see that you will only need to understand the use of these tools to be able to create your maps.

The rest of the code will be the use of interaction instructions and object declarations, which will serve to feed information to the LC .NET objects. LC .NET is a library optimized for rendering images and effects, as well as processing millions of data points. If performance is a concern for you, I assure you that LightningChart will not cause you problems.

Many of the LC .NET charts have a version for JavaScript, so there are many tutorials that you can visit and download their projects. Well, I appreciate your attention, thank you!