If you’ve ever looked at a map of the United States and thought, “This would look better if it were a mosaic of my own face,” then you’re in luck. You can now use Map Cam Selfie to superimpose your face on top of of the USA using the 3,000+ counties of the US as individual pixels for a live webcam feed.
What is it?
Map Cam Selfie is a browser-based experiment built using MapLibre GL JS. It takes your live webcam stream and “rasterizes” it onto a GeoJSON layer of US counties. The result is a hypnotic, shimmering data-visualization of … well, you. It’s less about navigation and more about using geographic boundaries as a digital canvas.
How to use it
Getting your “Map Selfie” is pretty straightforward:
-
Grant Permissions: Hit the Use Webcam button and allow the browser to access your camera.
-
Strike a Pose
-
Go Live: Click Apply to Counties. The map will suddenly “sample” the colors from your camera.
-
Capture the Art: Once you’ve got a look you like, hit Take Map Selfie to download a high-res PNG of your cartographic portrait.
How does it work?
1. The Viewport Buffer:
When the webcam is initialized, the video stream is piped into a hidden HTML5 element. This element acts as our data source, which we then draw onto an off-screen at a specific scale and position. This canvas represents our “color world” in $x, y$ pixel coordinates.
2. Spatial Coordinate Mapping:
The heavy lifting happens in the sampling loop. For every GeoJSON feature (county) in the countiesData collection, the script identifies a representative coordinate—usually the centroid. Using MapLibre’s map.project() method, we convert that geographic $[Longitude, Latitude]$ coordinate into a screen-space $[x, y]$ pixel location.
3. Multi-Point Pixel Sampling:
To avoid “aliasing” (where a single outlier pixel ruins a county’s color), we don’t just grab one pixel. We use an array of offsets to sample multiple points around the centroid. We extract the RGBA data for these points directly from the ImageData buffer of the canvas.
4. Dynamic GeoJSON Injection:
Once we calculate the average RGB value for a county, we update that feature’s properties in the GeoJSON object. By calling map.getSource('counties').setData(data), we inject the new color values back into the MapLibre source. The GPU then re-renders the fill-color layer, using a smooth CSS-like transition to interpolate the change between the old and new hex codes.
