...

Interactive Gas Station Map

Built with
Figma
WordPress
ACF
PHP
JavaScript

Goal

Build public database of LNG Gas Stations in interactive Map format

What I did

  • Design prototype in Figma (3 iterations)
  • HTML+CSS layout
  • UI + UX design
  • New post_type in WordPress
  • ACF fields
  • Connect data between WordPress and Map
  • Filters and Search system
  • Mapbox style and custom markers
  • QoL features like copy coords or automatic external map links

Screenshots

Difficulty
New experience
  • work with Map API
  • url params interaction
Review
We had some disagreements about the design at first, but after three revisions, we loved it.

The result is great! I love how smooth the animations are and how the app reacts right away to what I do.
Try out the project in action! Visit website