CartoVrac is an open-source project that aims to ease people to buy products without packaging and therefore reduce the amount of generated wastes.
This project is focused on the France map but can be used anywhere just changing the coordinates of the bounding box we want to display and fetching right data from Overpass-API.
The result of this project is visible on https://cartovrac.fr
Almost no data is hosted by this project. The shops are registered on the Open Data map OpenStreetMap and identified with the tag bulk_purchase. This tag describes if the shop is selling products without packaging. See https://wiki.openstreetmap.org/wiki/Key:bulk_purchase for details.
To get data from OpenStreetMap , we use the Overpass API to search shops in a particular area applying some filters. You can see an example in our repository with the script refreshCache.sh that performs an Overpass API request to get shops that have the value yes or only for the bulk_purchase tag. Some additional shops are also identified by their OpenStreetMap identifier to complete the list and a blacklist is also possible to remove some shops that we don't want to be displayed on the map.
To display the map this project uses the Leaflet javascript library with some plugins.
As many points could be in the same area, the project uses the MasterCluster plugin that allows to group some markers inside a cluster and easily zoom on a certain cluster. The library is available on the MasterCluster github here: https://github.com/Leaflet/Leaflet.markercluster
To filter quickly the shop type, the project uses the plugin SubGroup. The source of the plugin is available here: https://github.com/ghybs/Leaflet.FeatureGroup.SubGroup
We created also our own plugin to display shops with a nice marker and popup using the Overpass API returned JSON. Don't hesitate to reuse this plugin.