My First JavaScript Web App: Interactive Image Coordinate Finder

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!

The above is the detailed content of My First JavaScript Web App: Interactive Image Coordinate Finder. For more information, please follow other related articles on the PHP Chinese website!