Fuzzy Location with Leaflet
LeafletDisplay an approximate location as a fuzzy L.circle area instead of an exact marker pin for privacy protection.
const map = L.map('map').setView([51.5074, -0.1278], 13);
L.tileLayer('https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY', {
tileSize: 256,
attribution: '© <a href="https://www.maptiler.com/">MapTiler</a> © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>'
}).addTo(map);
const realLat = 51.5074, realLng = -0.1278;
const offsetLat = realLat + (Math.random() - 0.5) * 0.01;
const offsetLng = realLng + (Math.random() - 0.5) * 0.01;
L.circle([offsetLat, offsetLng], {
radius: 500,
color: '#2196F3',
fillColor: '#2196F3',
fillOpacity: 0.15,
weight: 2
}).addTo(map).bindPopup('Approximate location');How it works
Instead of showing a precise marker, this technique displays a translucent circle around a randomly offset location. The real coordinates are shifted by a random amount (up to ~0.005 degrees, roughly 500 meters) to prevent exact positioning. The circle radius provides visual feedback that the location is approximate.
This pattern is common in real estate listings, dating apps, and ride-sharing services where showing the exact address would be a privacy concern. The offset is applied on the client side: for true privacy, obfuscation should happen server-side before coordinates reach the browser.
Key APIs
| API | Description | Docs |
|---|---|---|
L.circle() |
Draw a circle with radius in meters | leafletjs.com/reference.html#circle |
fillOpacity |
Set fill transparency | leafletjs.com/reference.html#path-fillopacity |
FAQ
How big should the obfuscation radius be?
It depends on the use case. 200-500m works for city-level privacy. For rural areas, use 1-2km to prevent narrowing down the location to a single property.
Is client-side obfuscation enough?
No. If the real coordinates are sent to the browser (in JavaScript or API response), a user can inspect them. True obfuscation must happen on the server before sending data to the client.
Common mistakes
- Using a fixed offset instead of random: the real location can be derived by subtracting the known offset
- Setting the circle radius smaller than the random offset range: the real point might fall outside the circle
- Confusing
L.circle()(radius in meters) withL.circleMarker()(radius in pixels)
Build maps using Leaflet with AI
Generate code like this fuzzy location with leaflet example using the Leaflet skill in your IDE.
Related Examples
- Show User Location on a Leaflet Map
- Add Markers and Popups to a Leaflet Map
- See how to do this in MapLibre GL JS or MapTiler SDK