How we built a map to identify electric vehicle (EV) charging stations

An often cited barrier to electric vehicle (EV) adoption is that the number of charging stations is limited. Even with over 8000% growth in charging locations from 2009-2019 in the US alone, according to the U.S. Office of Energy Efficiency & Renewable Energy, this notion remains. We built a map that visualization shows how coverage of stations are becoming.

On Display

Using the HERE platform and HERE EV Charge Points API, our map displays the density of EV charging stations across the US and Europe respectively. Displaying the data as a heatmap enables readers to see general trends and spot outlier areas that have either a very high or very low number of EV stations.

To explore, zoom and pan around the map for a comparative view of EV charging station density. The map also allows users to look up a specific city or address and see the total number of EV stations there, or read more about cities with the most EV stations. That information can be accessed directly from the sidebar.

For smaller devices, we split the UI into two main cards: a card at the top of the screen containing the map title and the search box, and an expandable card at the bottom of the screen showing the city information. Users also have the option to share the map to a number of social media channels or embed it as an iframe in their own sites, articles or apps.

Data and Products Used

The data for this map comes from the HERE EV Charge Points API that provides data on the locations of charging stations within a specified area, including data on connector types, opening hours, and location.

To render the map, we used the HERE Maps API for Javascript. We created a custom grayscale basemap to make the data stand out more. The search functionality was implemented using the HERE Geocoding and Search API via the search service in the HERE Maps API. This helped us extract relevant cities from addresses in order to determine the approximate amount of EV stations in the area.

The app was built with React using Next.js, the Chakra UI component library for the overall UI and layout, Reach UI Combobox for the functionality of the search box, as well as some smaller utility libraries.

To visualize the data and show general trends around EV charging station density, we used the built in heatmap function in the HERE Maps API for Javascript library. The heatmap is adjusted at every zoom level to provide varying levels of detail depending on how far you zoom in.