Here’s a practical example of how businesses large and small can leverage MapBox’s expanding partnership with foursquare - build a social store locator for their websites. The concept is just like the store locators you’re used to seeing for companies with many locations, like banks or restaurant chains, except it features a beautiful MapBox map and lets your customers tap into foursquare’s radar feature.
Borrowing the locations of one of our favorite lunch spots, Sweetgreen, we put together a new store locator Map Site Template that you can download and use now for free.
What it does
This new template shows your store locations on a beautiful custom map that matches your brand and allows you to manage your locations through foursquare’s easy-to-use venue platform. You can store obvious details like name and location, but also useful things like business hours, photos, even menus. And you can manage all the details of your locations in one place.
The template does the hard work of mapping your locations for you, and it includes a full list of locations that filters to show the nearest stores when your customers type in their addresses.
The magic comes in when users click on a location. They see the social stats for your location, showing off how popular you are and have the option to ‘save to foursquare’. This is really powerful because the foursquare app on mobile devices will then remind people to stop in when they’re near your store. And it’s a great way for people to remember the places they’ve been meaning to check out.
How it works
The store locator is quite simple to manage. Just load all of your locations into foursquare and add them to a list. Then plug in the ID of this list into the Map Site template, and you’re half way there.
Next go to MapBox.com, sign up for a free account, and customize your base map. Grab the API endpoint for your new map from the embed options paste that into the template too. A few CSS style tweaks and you’re all set.
You can hack up and extend the template to suit your needs. Add in those business hours, or let the photos shine through. For detailed instructions, check out the template’s readme file.