Embedding OpenStreetMap in a Privacy-Friendly Way with Leaflet JS

Embedding OpenStreetMap (OSM) on your website can provide valuable location information to your users. However, due to the General Data Protection Regulation (GDPR), concerns may arise regarding the collection of data like IP addresses by OSM. To address these concerns and try to create GDPR compliance regarding OSM, this developer blog explores an approach to proxy OSM in a privacy-friendly manner using a caching proxy and Leaflet JS.

Using a Caching Proxy:

To mitigate data collection concerns and ensure GDPR compliance, you can set up a caching proxy, such as TileCache, which acts as an intermediary between your website and OSM. The caching proxy allows you to store the map tiles locally, reducing the need for direct data requests to OSM servers.

Setting up TileCache:

To implement TileCache, follow these steps:

1. Install TileCache: Begin by installing TileCache on your server. You can find detailed instructions in the TileCache GitHub repository (https://github.com/cyclestreets/tilecache). Configure the caching proxy to create a directory, such as /tilecache, within your website’s public_html domain.
2. Replace the OpenStreetMap URL in Leaflet JS: Locate the JavaScript code where the OSM map is embedded using Leaflet JS. Replace the original OSM URL with the URL pointing to your TileCache setup. For example:

L.tileLayer('YOURDOMAIN.com/tilecache/?layer=mapnik&z={z}&x={x}&y={y}', { attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);

So the setup script of LeafLet.JS becomes (don’t forget including the JS + CSS scripts):

var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('YOURDOMAIN.com/tilecache/?layer=mapnik&z={z}&x={x}&y={y}', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

L.marker([51.5, -0.09]).addTo(map)
    .bindPopup('A pretty CSS popup.<br> Easily customizable.')
    .openPopup();

Ensure that the caching script is configured to store the cached tiles securely in a protected directory.

Alternative Approaches:

In addition to TileCache, there are other simpler proxy solutions available, such as ProxySimplePHP (https://wiki.openstreetmap.org/wiki/ProxySimplePHP). However, it is essential to note that these alternative approaches have not been tested by us.

Disclaimer and Legal Considerations:

It is important to understand that while implementing a caching proxy and replacing the OpenStreetMap URL with Leaflet JS can enhance privacy and mitigate data collection concerns, we cannot guarantee complete GDPR compliance. Every website’s GDPR compliance requirements may vary, and there might be other requests or considerations to address. Therefore, it is recommended to seek legal advice or consult with a GDPR expert to ensure full compliance.

Also be sure to understand that this measure will highly increase bandwidth to your server/hosting as your server/hosting is displaying all the tile images know.

Conclusion:

Embedding OpenStreetMap in a privacy-friendly manner is crucial for maintaining GDPR compliance and respecting user privacy. By implementing a caching proxy like TileCache and replacing the OpenStreetMap URL with your TileCache URL in Leaflet JS, you can reduce data collection concerns and enhance privacy protection.

However, it is essential to understand that legal requirements can vary, and additional measures might be necessary to achieve full GDPR compliance. It is always advisable to consult with legal experts to ensure your website adheres to all applicable data protection regulations while providing a seamless and privacy-conscious user experience.