OpenLayers and Geoserver Implementation: Gas Station Mapping

Aim

Nowadays, although clean energy has been widely used in the transportation field, fuel oil is still the most important vehicle fuel. The price of fuel will vary with the brand and region of the gas station, so for car drivers, finding nearby gas stations with lower fuel prices can save money. Checking the website of each gas station and its location to compare the fuel prices of different gas stations is a dull task. The design and purpose of this website are to display all available gas stations near Skåne and their corresponding fuel prices through a web map service. This allows users to easily select nearby gas stations with lower fuel prices and view the route to the destination gas station from the map.

Method

OpenLayers and GeoServer stand out for their robust capabilities and compatibility. OpenLayers and GeoServer together provide interactive and scalable web mapping solutions.

OpenLayers: A Versatile Mapping Library

OpenLayers is an open-source JavaScript library for displaying map data in web browsers without requiring server-side renderin. It provides range of features that allow developers to include interactive maps in their web page/applications. OpenLayers supports various map layers (WMS, PostGIS, GPKgs), controls and events, making it a flexible choice for developers looking to implement custom GIS solutions.

GeoServer: The Server-Side Powerhouse

GeoServer is an open-source server that facilitates the sharing, processing, and editing of geospatial data. Designed for interoperability, it publishes data from any major spatial data source using open standards. GeoServer is particularly well-regarded for its performance in serving large datasets and its ability to handle complex spatial queries.

Combining OpenLayers and GeoServer

The combination of OpenLayers and GeoServer enables developers to build powerful GIS applications that use both client-side interactivity and server-side data management.

Data Publishing: GeoServer acts as the data publishing platform, serving geospatial data as Web Feature Service (WFS) or Web Map Service (WMS) endpoints.
Map Rendering: OpenLayers consumes the services provided by GeoServer, rendering the data on the client side. This allows for the creation of rich, interactive maps that can include layers such as vectors, tiles and images.
Styling and Theming: GeoServer’s Styled Layer Descriptor (SLD) support allows for the customization of how data is displayed. OpenLayers can then render these styles, ensuring a consistent look and feel across the application.

Data

Vector and raster data used in this project projected to SWEREF99(EPSG:3006) reference system and it is stored in GeoServer. To display each gas station on the web map, the styling of each layer is set by the SLD file in Geoserver. The web map service is built based on OpenLayers3 javascript framework.

Gas Station data was acquired from the website“https://bensinpriser.nu/”. In this website, gas stations are provided in a list where it can be filtered by region and fuel type, and when a gas station is clicked, prices of several fuel types can be displayed. Fuel prices are crowdsourced data provided by the users of the website. In our website, we present 179 gas stations, which contain brand, address, phone number, prices for four different fuel type: 95 octanes, 98 octanes, diesel, ethanol. Since we have 12 different brands, this difference is presented by their brand logos(Figure 1). The road network layer is downloaded from “https://lastkajen.trafikverket.se/”, the original data includes 10 levels of roads in Skåne. In order to have an simple presentation of gas stations, only six levels are displayed in this web map.

Figure 1. Style of gas stations

For the heatmap of fuel price, prices are interpolated by IDW and it is clipped within the boundary of Skane region with a cell size of 479m to 479m. Then, on our website, it was rendered by the white-red color scale(Figure 2). The area with the higher price of fuel is shown by darker red with 50% transparency which could also present the gas station at the same time.

Figure 2. Style of the heat map of fuel prices(diesel\gas95).

In terms of web map layout, flexbox CSS displaying method is used due to it’s flexible, responsive aspect.

Functions

The following Openlayers3 functions are utilized: zoom in/out, zoom to extent, zoom slider, overview map, scale line, full-screen button, coordinate pair of the cursor. Moreover, to provide a popup menu to users we utilized openlayers3 overlay function and jquery library to fetch feature info of gas stations from GeoServer. This popup menu can be viewed only when the gas station is clicked. This menu is created by two elements: an exit button to close the menu, a container showing the attributes of the station.

Right-top side of the map a checkbox button maintains the visibility of three layers: gas stations, road network and interpolated prices. In addition, a dropdown menu located below checkboxes is used to provide a transition between two heatmaps: 95 octanes, diesel.

Besides the functions that bind the map, there are also other functionalities binding the HTML page. Right-bottom of the map, a legend button binds the visibility of legends for the brand of a gas station and interpolated data. Top-right of the webpage, a switch button binds the color of the background and the text to provide a darker display in order to increased user experience in low light condition.

Evaluation

The purpose of this web-gis project was to create an interactive map by using html, css, javascript and the openlayers3 library. In this web map, users can directly see the location and related information of each gas station. At the same time, fuel prices in image format distributed over the Skåne can also be displayed on the web map. Users can select different map types by selecting different layers to meet the needs of different users. These features help users easily find the most suitable gas station for them by considering the fuel price and the distance of gas stations.

However, there are still some functions that can be further improved. For example, because the price of fuel often changes, if this web map can be set to automatically refreshed every day by allowing users or owners of gas stations to add current prices, the map information will be more time-sensitive. In addition, Some additional information can be added to the web map e.g. parking lots, car wash stations. Moreover, users would desire to navigate the destination gas station from their current location, adding navigation functions in this web service would increase the user experience. Besides all those, a function showing how much carbon is emitted when some amount of gas is consumed and presenting alternative ways of transportation e.g. bicycles, public transportation would emerge environmental awareness of drivers.

Legal and ethical considerations

In terms of the law, the basic data used in this web map is OpenStreetMap, which is free and open data. On this basis, the information of the data provider is also indicated on the map. The gas station and price data come from price comparison website(https://bensinpriser.nu/) which is referenced in our web service. The fuel prices data are populated by users(crowdsourced) of this website with their consent and the gas stations in Skane are public data, therefore, the map does not contain legal issues.

In terms of ethics, users do not need their personal information, so there will be no leakage of user privacy. However, due to the uncertainty of changes in fuel prices, the time between the update of web map information and the update of fuel prices at gas stations is different, which may cause certain problems for users. Besides, if this web map is widely used, it may cause most users to choose lower-priced gas stations, thereby forcing other gas stations to reduce fuel prices to attract users, leading to vicious competition in the market.

Appendix A

Requirement specifications

Basic function

All gas stations in Sweden. This data can be downloadable as open data on the OSM website.
Gas prices information for each gas type is accessible on https://bensinpriser.nu/. Additionally, prices for different types of fuel are presented.
A pictorial heat map showing gas prices in continuous format over Sweden. This data can be obtained by interpolating prices in stations.

A popup window that shows a gas station on a map is clicked presents details on available fuel types. Different layers will show gas stations and a heatmap of gas prices over Sweden by the checkbox.

View this project on github: https://github.com/bircl/skanegas

Database Routing Approach: Using pgRouting and PostGIS for Indoor Navigation

Micro-Mobility Case Study - Interactive Dashboard for OD Dataset

On this page

Spatial Tech