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.
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.
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.
Sign up for our newsletter
Why sign up:
- Latest offers and discounts
- Tailored content delivered weekly
- Exclusive events
- One click to unsubscribe