After completing my first JavaScript course at Full Sail University, I was eager to dive into a project that would put my new skills to the test. My goal was to create something functional, intuitive, and practical. This led to the development of my first JavaScript web application: the Interactive Image Coordinate Finder.
The app allows users to upload a map image, click to record coordinates, and save these as layers with unique names and optional URLs. With this tool, anyone can map or annotate custom images, making it especially handy for visual projects that involve identifying specific regions or landmarks on a web page. In this post, I'll walk you through the app's features, setup, and usage.
Before we begin, I think its an important caveat that this was also a work project. At my place of business, we work on closed networks meaning I'm not able to use APIs or other libraries so this project may be re creating the wheel or taking an old approach that more modern and advanced developers have improved upon. I can't wait to get there myself, for now lets get into it!
Leading off we've got a simple web page that displays a map of the middle east.
I thought to myself, how can we make this useful..ish? Maybe some simple interactions.. But how? After a few hours of searching google, code pen, and a few other sites I realized a low level method is to use coordinates on the image. How do I find them? google sent me to paint which made me face palm in the middle of a quiet office. So I decided to create a tool that can help me grab them.
I wanted to make a very simple UI that focused on utility. The app will allow users to browse for an image then display it on screen. The users is prompted for a Layer Name and optional link. They then click a bounding box around the area of the image they want to target, in the example I selected Egypt.
Once the users clicks save, the results will be below in the Layers Log where the user is able to copy just the coordinates, copy a line of code that works with the test page linked to the GitHub repo, Edit the layer, or delete the layer all together.
The end result for the demo is a map of the middle east where the user is able to click on a country and visit its Wikipedia page! I've got a lot of other use cases that I'd like to try out with the tool.
Thank you for reading!
Top comments (1)
What a fantastic read! Your article, "My First JavaScript Web App: Interactive Image Coordinate Finder," is not only informative but truly inspiring for anyone looking to take their first steps in JavaScript app development. It’s clear how much effort went into building the interactive coordinate finder, and your detailed, step-by-step explanation makes the project approachable for developers at any level.
I love how you broke down the process—from setting up the canvas and handling events to capturing coordinates and refining the experience. This practical guide doesn’t just showcase code; it builds understanding, and that's invaluable. You have a talent for teaching while keeping things fun, which makes tackling complex concepts much less intimidating.
Your excitement for learning and problem-solving really shines through in this piece. Thank you for sharing your journey with the DEV community—it's encouraging to see how achievable JavaScript projects can be with patience and persistence. I’m excited to see what you create next!