[Python] Get precise polygon coordinates for the outline of a solid shape, in order

I want to create a map (via the HTML "map" and "area" tags) with several unusually-shaped areas. The shapes are detailed enough that I don't want to write out all the coordinates by hand, but I do want the map areas to be as precise as possible, so I want to generate them automatically.

I've converted each of my map areas to plain white-on-black images to make them easy to process, but I keep getting stumped on what to do from there.

import matplotlib.pyplot as plt
import numpy as np

# flatten image to a 2D array of 1s and 0s
img = plt.imread('map-area-1.png')
flat_img = np.argwhere(img[:,:,1] != 0)


I have tried using a shapely.geometry.Polygon:

poly = Polygon(flat_img)
ext = poly.exterior.coords


but the len of the supposed exterior outline is as many pixels as are in the image, including the filled inside.

I have also made a version of the image with a one-pixel-thick white outline, with black inside and outside, and attempted to work with the array in the same way. Unfortunately, I think the coordinates are out of order in this case.

I have tried sorting the coordinates by polar angle, but since the shape is unusual (the borders of it have protrusions and "dents", for example, although it is all one singular solid shape) this does not successfully sort it.

Attempting to use unsorted outline coordinates in the "area" tag makes a chunk of the inside of the shape interactive, but large portions are missing. I am guessing that it draws the shape in the order of the coordinates, which causes it to zig-zag between points across the shape and create gaps in the interactive portion.

Ideally, it would also be nice to have the minimum number of coordinates (i.e. anywhere there is a straight line on the shape, you only need one coordinate on either end of it, not every single coordinate along the line) but if it needs to be every single one, that's fine. Ultimately, I just need the coordinates in order of the shape's outline.

Continue reading...