Building a map editor
Working at Mapzen, I helped create new features and iterate on the design for TangramPlay, an interactive coding and design environment for creating maps. It specifically leverages an open-source OpenGL-based map rendering engine known as Tangram. Tangram draws vector tiles live in a web browser or mobile device, which allows for real-time map design, display, and interactivity.
The editor itself allows a user to edit code while viewing changes in a map's visual design side by side. It also includes options for saving/bookmarking locations, search and autocomplete of locations, as well as input widgets that replace some of the coding.
Companion Interactive Tutorial
Creating an interactive tutorial for mapping beginners
I conceived of a project to help beginners get into mapping while working on TangramPlay. The result was an interactive tutorial which I developed material for, user tested, designed, and coded. The tutorial covers knowledge about basic mapping techniques, vector tiles, raster tiles, and coding for visual map design. Think alouds and observation of users while working through the site led to significant changes such as the addition of a refresh button, the organization of the left sidebar, and content edits. Link: Tutorial, Github
A screenshot from the tutorial intro page.
Designing an online editor for hands-on learning
A feature in making the tutorial interactive was the addition of an online code editor that I tweaked to allow for website embedding and content refreshing. The editor allows a user to edit and make comments on a base file, which directly affect the map on the left of the code. At any point in time, users can refresh the original scene files to get original instructions or directions for any particular part of the tutorial.
Features of the interactive editor.