What it does
ViewNYC turns a photograph of the New York view from the Motors Room in the MPLab into something you can explore. Hover over a building to see its name, or select it from the list to zoom in. The separate arrow next to each name opens its Wikipedia page.
The view includes 25 buildings and landmarks, from the Empire State Building and Chrysler Building to the towers along Central Park. You can pan across the photograph, zoom out again, and switch between light and dark mode. More buildings are to be added. Goal is to fully identify the full NYC skyline!
Why I built it
I started with an annotated photograph in a PDF and PowerPoint, identifying the buildings in the view. I wanted to turn that into a website where I could explore the same skyline and look up the buildings directly.
The main issue was deciding the building outlines, which took quite some work. The layout and other mechanics were fast to build. The visual style follows my standard website style, with a large photograph and a simple building list.
How it works
The site uses plain HTML, CSS, and JavaScript. An SVG layer sits over the photograph, with a traced polygon for each building. The outlines use the photograph’s coordinates, so they stay aligned as you pan and zoom.
Building names, outlines, and Wikipedia links are stored together in the site data. I can redraw the outlines and export them as JSON to update the view. Theme preferences are saved in the browser.
The website runs on my own server as a static site, managed by a systemd service. Cloudflare Tunnel provides the connection to the server.