Créer une carte avec provinces/États cliquables en utilisant SVG, HTML/CSS, ImageMap

on dirait que vous voulez un simple imagemap, je vous recommande de ne pas le rendre plus complexe qu'il n'a besoin d'être. Voici un article sur comment améliorer imagemaps avec svg. Il est très facile de faire des régions cliquables dans svg lui-même, il suffit d'ajouter quelques éléments autour des formes que vous voulez avoir cliquable.

• http://jqvmap.com/
• http://jvectormap.com/
• http://polymaps.org/

-Créer tout à partir de zéro (en utilisant SVG, JavaScript et HTML5):

1. Créer une nouvelle page HTML5
2. créer un nouveau fichier SVG, chaque zone cliquable (province) doit être un polygone SVG séparé dans votre fichier SVG, (J'utilise Adobe Illustrator pour créer des fichiers SVG, mais vous pouvez trouver beaucoup de logiciels alternatifs aussi, par exemple Inkscape)
3. ajouter des évènements mouseover et click à vos polygones un par un

   <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" 
       onmouseover="mouseOverHandler(evt)"
       onclick="clickHandler(evt)" />
   

4. Ajouter un gestionnaire pour chaque événement dans votre code JavaScript et ajouter votre code désiré pour le gestionnaire

   function mouseOverHandler(evt) {};
   function clickHandler(evt) {};
   

5. ajouter le fichier SVG à votre page HTML (je préfère SVG en ligne mais vous pouvez aussi utiliser le fichier SVG lié)
6. Télécharger les fichiers sur votre serveur

B - utilisez un logiciel comme FLDraw Créateur D'Image Interactif (uniquement si vous avez une carte image et que vous voulez le rendre interactif):

1. Créer un projet vide et choisissez votre carte image comme image de base lors de la création du nouveau projet
2. Ajouter un élément polygone (à partir du menu Shape) pour chaque province
3. pour chaque polygone double-cliquez dessus pour ouvrir la fenêtre des propriétés où vous pouvez choisir un type d'événement pour passer la souris et cliquer, aussi changer la forme opacité à 0 pour le rendre invisible
4. enregistrer votre projet et le publier sur HTML5, FLDraw va créer un nouveau dossier qui contient tous les fichiers nécessaires pour votre projet que vous pouvez télécharger sur votre serveur.

L'Option (A) est très bonne si vous êtes programmeur ou si vous avez quelqu'un pour créer le code requis et le fichier SVG pour vous, L'Option (B) est bonne si vous ne voulez pas engager quelqu'un ou passer votre propre temps pour créer tout à partir de zéro

Vous en avez d'autres options aussi, par exemple en utilisant HTML5 Canvas au lieu de SVG, mais il n'est pas très facile de créer une carte Zoomable en utilisant HTML5 Canvas, peut-être qu'il y a d'autres façons dont je ne suis pas au courant.

juste au cas où quelqu'un va le chercher - je l'ai utilisé sur plusieurs sites, toujours la personnalisation et les possibilités de RD étaient un ajustement parfait pour ce dont j'avais besoin. Simple et il est libre d'utilisation:

Cliquable CSS Cartes

une note pour plus de scripts sur un site: j'ai eu quelques problèmes gênants avec l'obtention de travailler une carte (qui a fonctionné comme un menu graphique) dans Drupal 7. Là où beaucoup d'Autres scripts utilisés, et après les avoir manipulés, je me suis coincé avec la carte - il encore ça n'a pas marché, bien que le jquery.cssmap.js, CSS (tous deux locaux) et le script au bon endroit. Firebug m'a montré une erreur et j'ai soudainement eureka-un simple oubli, j'ai laissé le code du script tel qu'il était dans l'exemple et il y avait un conflit. Il suffit de changer la fonction frontale "$" en "jQuery" (ou autre handler) et cela fonctionne parfaitement. :]

voici ce que j'ai dit (Bien sûr vous pouvez le mettre avant au lieu du ):

<script type="text/javascript">
      jQuery(function($){
        $('#map-country').cssMap({'size' : 810});
       });
    </script>

SVG to Script avec votre SVG, la sortie par défaut est la carte dans SVG. Le Code qui ajoute des événements est également ajouté, mais il est facilement identifiable et peut être modifié au besoin.

j'ai utilisé makeaclickablemap pour ma province cartes pendant un certain temps maintenant et il s'est avéré être un très bon ajustement.

j'ai eu les mêmes exigences et finalement, cette convertisseur de cartes a fonctionné pour moi. C'est le meilleur plugin pour n'importe quelle génération de carte.

Le code suivant peut vous aider:

$("#svgEuropa [id='stallwanger.it.dev_shape_DEU']").on("click",function(){
    alert($(this).attr("id"));
});

Source

voici un autre plugin de carte d'image que j'ai écrit pour améliorer les cartes d'image:https://github.com/gestixi/pictarea

il permet de mettre en évidence facilement toute la zone et de spécifier différents styles en fonction de l'état de la zone: normal, hover, active, disable.

vous pouvez également spécifier combien de zones peuvent être sélectionnées en même temps.

Vous avez quelques options pour cela:

1-Si vous pouvez trouver un fichier SVG pour la map que vous voulez, vous pouvez utiliser quelque chose comme RaphaelJS ou SnapSVG pour ajouter des écouteurs de clic pour vos états / régions, Cette solution est la plus personnalisable...

2 - Vous pouvez utiliser des outils dédiés tels que clickablemapbuilder (gratuit) ou makeaclickablemap (je crois aussi).

[avertissement] Im l'auteur de clickablemapbuilder.com :)

<script type="text/javascript">
      jQuery(function($){
        $('#map-country').cssMap({'size' : 810});
       });
    </script>

texte fort