DrupalCamp Ghent 2016: catching them all with Drupal 8 and AngularJS

When Pokémon GO launched in Belgium, there was no map yet. 

So Robin Ingelbrecht and I built one with Drupal 8 in three days, then told our story at DrupalCamp Ghent.

DrupalCamp Ghent 2016

Developers by day, aspiring Pokémon masters by night.

In the summer of 2016, Robin Ingelbrecht and I were both working at EntityOne in Ghent. Pokémon GO was about to launch in Belgium and nobody had built a map yet. So three days before launch, we started building one after hours.

Live on launch day

Pokémon Locator showed PokéStops, active lures and gyms on a map, plus the three closest lures around you. That's handy if you are a bit lazy, like us.

It went live the day the game launched in Belgium. On day one we had around 10,000 unique visitors, and they added 4,700 stops and gyms themselves. Our shared hosting could not keep up and the site was down a lot that day.

Things calmed down once other maps started showing live Pokémon spawns. We chose not to do that, because it meant breaking the game's terms of service. Most of those maps were gone again within weeks.

What we covered

  • A custom content entity for the markers, generated with Drupal Console.
  • Guzzle to scrape existing Google Maps, so we didn't launch with an empty map.
  • AngularJS, semi-decoupled. Twig and Drupal's render cache handle the first page load, and AngularJS fetches the markers over Ajax. We also covered how to stop Twig and Angular fighting over curly brackets.
  • Leaflet with Google Maps and marker clustering, loading only the markers inside the current viewport.
  • REST resources in Drupal 8. We did this the wrong way first, with a controller that returned JSON, then started over the right way.
  • Theming and HTTPS, with a Classy-based theme, Sass and a free Let's Encrypt certificate.

Looking back

It was rough in places. We used a factory class where a plugin would have been better, and we used a kill switch for caching we couldn't get right. But building something real in three days, and watching thousands of people use it, taught us more than any side project ever had.

Most of all, we had a lot of fun.
 

2026 update

Ten years later, I'd build this very differently. 

AngularJS has been end-of-life since 2021, and Drupal 11 ships with htmx in core. 

The map would still be Leaflet, but everything around it: the closest lures, the filters, the form to add a stop, could be plain server-rendered Drupal with htmx swapping in fragments. No second framework, no semi-decoupling.

The pages around the map would be built in Canvas instead of hand-written Twig, and the factory classes would be plugins from day one. With AI-assisted development, three evenings would probably be one.

What I wouldn't change: ship on launch day, and say no to the feature that breaks the rules.

Also, I should have bought some Pokémon cards in 2016.

You might also be interested in