Sharing my success-story with adapting Google Maps to a category listing adverts from our users. Hope it will inspire others to use maps for their communities. The map looks like this:
In our Ukrainian Goat Keeper community, we have a Goat Market category. People put their advertising for free there when then want to sell a goat, a pure-breed goat, a newborn goat kid and so on.
I wanted to make it more visual and let people easily find who sells what close to them. This way they could save on transportation costs, which sometimes may be 50% of the goat price.
I ended up developing a google-map page which reflects the category with advertising listings.
- Automatically puts all adverts on the map (uses Google Maps API)
- Parses images and text out of the first topic post (uses Discourse API)
- Cleanups text from HTML, removes small images (= smiles and other unrelated)
- Joins all advertising listings from a single user into a single popup
- Displays a marker on the map with a counter (up to 9), meaning how many adverts are off
- Ignores closed and/or archived topics
- Ignores topics with a very short (or empty) text
- For every ads, shows a single image only (actually, its thumb), and makes a link saying “N photos”, which will open a gallery viewer
- Trips the advert text and add the “read more…” link, which opens the topic.
There is a PHP script that goes through all topics in that category, parses them and builds a list of markers to put on the map, and caches them into database:
- runs once every 5 minutes to fetch fresh data from Discourse (simply a cron task)
- uses masterminds/html5 for parsing cooked HTML of topic posts; it removes all formatting and images and then retrieves pure text;
- the SQL query retrieving information from Discourse is built with Data Explorer in Discourse Admin Panel, and is called via Discourse API
- uses React to manipulate the map, but it can be achieved same well with pure JS
We already have a curated database of goat keepers where we store, among other things, their forum username, physical address and latitude/longitude coordinates.
The script matches advertising topic authors to the records in that database by username — that is how we know where to put an advert on the map.
However, this can be easily improved by using the “location” data from user profile in Discourse. If it is filled, Google Maps API can be used to retrieve coordinates for the map.
- Add search input; not a trivial task considering a full-screen layout and the need to work well on mobile device screens
- Parse more images and text from further posts in a topic; it now only parses the first topic; the difficulty here is to filter out non-important advert information and only keep what is to the point
- Use different markers for sell vs buy adverts; currently not implemented because only up to 5% are “buy” type advertising
Our users fell in love with the maps at first sight! The feedback is extremely positive, so I think the maps will contribute to the community value big time.
Let me know if you like the idea, how would you use it for your community and what other improvements you can think of.
You can hire me to help you with building a similar map page for your community.