Paint biomes on the polygon map:
Note: this project is partly to experiment with implementation techniques. I wanted to try building a ui with Vue.js (good fit for html/svg) but drawing the map with canvas (hard to find information about using it with Vue, because it's not a great fit). I wanted to try point-to-polygon libraries. I wanted to get my mouse/touch drag code working with a polygon mesh. I am happy with how things went, but I am not 100% sure that the way I used vue+canvas is free of gotchas. I'm also appalled at the size of the compiled file (372k), and need to figure out what's using most of the space. (Update: turned out to be Vue, and the point-to-polygon library)
Still unimplemented: keyboard shortcuts (need to be put on the window and not on the elements, so vue is no help) ; setter for the json (if you paste in a new json it should parse it and update the map, but what happens if the json is malformed?)
Update [2018-02-16] I made the Vue integration with my drawing canvas much better: (1) I made a component that is just <canvas>, and told it to watch for data being updated, and then draw to the canvas, which it finds as this.$el; (2) I made the mouse-dragging UI into a directive, which sets the event handlers on bind and unsets them on unbind; (3) the top-level editor passes the biome data down to the canvas component, and passes a drag handler function down into the directive. Sorry for not writing this up fully. See source: map-painter.js and this gist[1].