Ma première application Web JavaScript : recherche de coordonnées d'image interactive

Après avoir terminé mon premier cours JavaScript à la Full Sail University, j'avais hâte de me lancer dans un projet qui mettrait à l'épreuve mes nouvelles compétences. Mon objectif était de créer quelque chose de fonctionnel, intuitif et pratique. Cela a conduit au développement de ma première application Web JavaScript : l'Interactive Image Cooperative Finder.

L'application permet aux utilisateurs de télécharger une image de carte, de cliquer pour enregistrer des coordonnées et de les enregistrer sous forme de couches avec des noms uniques et des URL facultatives. Avec cet outil, n'importe qui peut cartographier ou annoter des images personnalisées, ce qui le rend particulièrement pratique pour les projets visuels impliquant l'identification de régions ou de points de repère spécifiques sur une page Web. Dans cet article, je vais vous expliquer les fonctionnalités, la configuration et l'utilisation de l'application.

Avant de commencer, je pense qu'il est important de préciser qu'il s'agissait également d'un projet de travail. Sur mon lieu de travail, nous travaillons sur des réseaux fermés, ce qui signifie que je ne suis pas en mesure d'utiliser des API ou d'autres bibliothèques. Ce projet peut donc recréer la roue ou adopter une ancienne approche que des développeurs plus modernes et avancés ont améliorée. J'ai hâte d'y arriver moi-même, pour l'instant, allons-y !

En commençant, nous avons une simple page Web qui affiche une carte du Moyen-Orient.

Je me suis demandé : comment pouvons-nous rendre cela utile…ish ? Peut-être quelques interactions simples. Mais comment ? Après quelques heures de recherche sur Google, Code Pen et quelques autres sites, j'ai réalisé qu'une méthode de bas niveau consiste à utiliser les coordonnées sur l'image. Comment puis-je les trouver ? Google m'a envoyé peindre, ce qui m'a fait faire face à la paume au milieu d'un bureau calme. J'ai donc décidé de créer un outil qui peut m'aider à les saisir.

Je voulais créer une interface utilisateur très simple axée sur l'utilité. L'application permettra aux utilisateurs de rechercher une image puis de l'afficher à l'écran. Les utilisateurs sont invités à saisir un nom de couche et un lien facultatif. Ils cliquent ensuite sur un cadre de délimitation autour de la zone de l'image qu'ils souhaitent cibler, dans l'exemple j'ai sélectionné l'Égypte.

Une fois que les utilisateurs cliquent sur Enregistrer, les résultats seront ci-dessous dans le journal des couches où l'utilisateur peut copier uniquement les coordonnées, copier une ligne de code qui fonctionne avec la page de test liée au dépôt GitHub, modifier la couche, ou supprimez le calque complètement.

Le résultat final de la démo est une carte du Moyen-Orient sur laquelle l'utilisateur peut cliquer sur un pays et visiter sa page Wikipédia ! J'ai beaucoup d'autres cas d'utilisation que j'aimerais essayer avec l'outil.

Merci d'avoir lu !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!