Pour créer une carte cliquable il y a parmi toutes les solutions proposées, deux qui sont intéressantes : avec le logiciel Gimp ou avec le format SVG. Il faut au préalable se trouver une image jpg ou png et télécharger le logiciel Gimp. Ouvrez Gimp, et faite ‘fichier’ / ‘ouvrir’. Une nouvelle fenêtre s’ouvre. C’est là que vous allez travailler. Vous choisissez le polygone sur la gauche de la fenêtre, et vous commencez à tracer les points qui constitueront les contours de chaque partie de l’image (ou carte). A chaque clic de souris, le tracé marque un repère. On valide et on continue le tracé de chaque zone, en répétant l operation. Entre les balises « map » vous aurez les coordonnées pour chaque zone définie au préalable sur la carte.
GIMP pour générer des zones cliquables
Dans GIMP, on trace les contours de chaque zone en utilisant l’outil polygone et l’on valide les tracés. Lorsqu’on a terminé les contours, on peut obtenir les coordonnées correspondantes pour chaque zone et les insérer dans les attributs HTML sous la forme d’un élément map avec des zones définies par les balises area. On place ensuite l’url de notre image d’origine jpg ou png dans la première ligne <img src =..>. Ici dans ma page html, je fais appel à la librairie jquery.maplight.min.js que l’on trouve facilement sur le net. Voila pour la première technique.
Cette approche permet de générer des zones cliquables directement à partir d’un tracé manuel sur l’image et d’exporter les coordonnées pour les insérer dans le code HTML. Nous utilisons des cookies pour vous garantir la meilleure expérience sur notre site. Si vous continuez à utiliser ce dernier, nous considérons que vous acceptez l'utilisation des cookies. J'ai compris !
Utiliser le SVG et le format map
Le SVG est une autre solution pour créer des zones cliquables. Si ta carte est simple, une map sera plus compatible et assez simple à mettre en œuvre. Ils ont juste une ou deux api pour mettre des overlays sur les cartes. Mais Google Maps c'est du bon vieux PNG. Le SVG permet de définir des zones interactives avec des balises ou des formes géométriques directement dans le fichier SVG, ce qui peut être très pratique pour la compatibilité avec les navigateurs modernes et les liens cliquables.
Avec Raphaël tu peux très simplement faire du SVG qui fonctionne sous IE 6, 7 et 8. Un tuto pour créer une carte de France cliquable en SVG compatible "old" IE. Les cartes interactives peuvent aussi être réalisées avec des
En pratique, on peut combiner les deux méthodes selon le besoin: tracer les contours dans GIMP pour obtenir des coordonnées précises, puis réutiliser ces données dans un fichier SVG ou dans une structure
Descriptions techniques et commandes associées
Il est possible de vectoriser un raster sous Grass et d’exporter vers des formats utilisables; cependant, attention, le raster d’origine peut influencer la qualité du vecteur obtenu. Sous Grass, on peut vectoriser et nettoyer ensuite le vecteur avec des outils comme v.clean, r.thin et d’autres options décrites dans les ressources mentionnées. Le nettoyage de la topologie permet d’éviter des zones incorrectes dans les tracés exportés.
En résumé, pour créer une carte cliquable, vous pouvez soit tracer directement dans GIMP et générer des coordonnées pour une balise map, soit créer une carte SVG avec des zones cliquables et des liens, ou encore combiner les deux méthodes selon le rendu souhaité et la compatibilité navigateur.
Conseils pratiques
- Choisir une image JPG ou PNG claire et adaptée au tracé des zones.
- Utiliser l’outil polygone dans GIMP pour dessiner les contours des zones.
- Exporter les coordonnées et les insérer dans une balise map ou générer un fichier SVG avec des zones cliquables.
- Pour les navigateurs anciens, envisager des solutions basées sur SVG ou sur des images avec des zones HTML simples.
En pratique, gimp et SVG restent complémentaires pour des cartes interactives robustes et compatibles avec divers environnements.
tags: #coordonnees #area #gimp