DrawonMaps is a fascinating new interactive map that turns urban infrastructure into an artistic medium. The premise is simple but technically impressive: you upload an image, and the map colors the city’s road network to recreate that image.
How it Works
The app leverages a modern stack – React 19, Deck.gl, MapLibre, and the Overpass API – to bridge the gap between image processing and geospatial data.
1. Image Detection: Once you upload an image, the app runs an edge-detection algorithm to identify the primary contours of your subject.
2. The Autonomous Agent: This is where the magic happens. An autonomous agent traces these edges, “snapping” to the nearest real-world roads found in OpenStreetMap (OSM) data via the Overpass API.
3.The Fill: After the agent draws the outline, it fills the interior of the shape in green, turning the city into a living, breathing piece of top-down topiary.
From Iconic Art to City Symbols
While you can upload anything, because the map essentially uses only one fill color, it works best with high-contrast silhouettes.
Adding Color
If you want to create a map painting with a little more color then you need Polyraster. Polyraster is a wonderful tool for creating your own map choropleth paintings. The process of creating map paintings with Polyraster is very easy:
1. Upload a GeoJSON file of your geographical data
2. Upload an image
In order for the finished map image to have enough resolution to be recognisable your GeoJSON file needs to have a reasonable number of separate geographical areas. These areas are going to act as your image pixels so there needs to be a lot of them. For the USA image above I used a GeoJSON file containing the counties of the United States. There are over 3,000 counties in the U.S. so that gives us enough resolution for images to emerge once the individual counties are colored to match the uploaded image.
Via: weeklyOSM & geoObserver
