For the last week I've been diving down the rabbit hole of trying to draw images on top of maps. Map Mercer (an interactive map which turns the face of Matthew Mercer into a map of a deserted island) got me wondering about how you could color a choropleth map layer to create a picture on top of a map. This led me to the wonderful Painting by Numbers, in which Elana Schtulberg has actually done this and created a number of map paitntings by coloring polygons on an interactive map.
This in turn finally led me to Polyraster.
Polyraster is a wonderful tool for creating your own map choropleth paintings (I created the map above with the image of Uncle Sam using Polyraster). The process of creating map paintings with Polyraster is very easy:
1. You need to upload a GeoJSON file containing your geographical data
2. You need to upload an image
For the finished map image to have enough resolution to be recognisable on your map 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 examples shown on this page 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.
Elana Schtulberg mentions lowering the resolution of her images before turning them into a choropleth layers. I didn't do this with my images. However I did place my images on a solid color background to help make them stand out a little from the map background.
Under the bonnet Polyrater uses Leaflet.js for the interactive map controls and to display your GeoJSON layer. Fabric.js is used for scaling/panning the uploaded image. Paper.js is then used for computing the average color for each polygon in your choropleth layer, based on the colors in your uploaded image.
Polyraster is a lot of fun to play with. Once you have created your own personal map painting you can even use the download option to download a GeoJSON file of your completed map. This GeoJSON file can then be used with your favorite interactive map library.
Author of polyraster here.
ReplyDelete- corrected the opacity that was left by defaut at 0.5 by leaflet. Colors are now more vivid
- added an export link. Colors are added as properties for each feature
thanks for the review
Hello! Big thanks to Max for creating the tool and Maps Mania for the review! I would like to ask if there's a file size limit to the GeoJSON file since I am trying to use a 4mb file and all I'm getting is a horizontal solid blue line instead of proper polygons. Thanks!
ReplyDelete@Khelly I don't know about file size restrictions. One thing I've had success with when a GeoJSON won't load in Polyraster is to load the GeoJSON into geojson.io and then if that works export and save the GeoJSON file from there - and then load that new file into Polyraster (geojson.io seems quite good at displaying geojoson files with errors or that are poorly formatted).
ReplyDeleteNo file size limitation, just what your browser can handle.
ReplyDeleteI personnaly used a 20Mb geojson with a few alerts from firefox that the script is too long to run.
I think your geojson is not clean enough for leaflet to display it. I second Keir suggestion