web-dev-qa-db-fra.com

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

J'essaie de créer une carte interactive où les utilisateurs peuvent cliquer sur différentes provinces de la carte pour obtenir des informations spécifiques à cette province.

Exemple: http://www.todospelaeducacao.org.br/ http://code.google.com/p/svg2imap/

Jusqu'à présent, je n'ai trouvé que des solutions aux fonctionnalités limitées. J'ai seulement vraiment cherché cela en utilisant un fichier SVG, mais je serais ouvert à d'autres types de fichiers si c'était possible.

Si quelqu'un connaît un moyen totalement fonctionnel de le faire (plug-in jQuery, PHP, images vectorielles) ou un tutoriel sur la façon de le faire manuellement, veuillez le partager.

svgmappingimagemapjquery-svg
30
mindtheGaspar

plugin jQuery pour la décoration des cartes-images (points forts, zones sélectionnées, info-bulles):

http://www.outsharked.com/imagemapster/

Divulgation: je l'ai écrit.

43
Jamie Treworgy

On dirait que vous voulez un imagemap simple, je vous recommande de ne pas le rendre plus complexe que nécessaire. Voici un article sur comment améliorer imagemaps with svg . Il est très facile de créer des régions cliquables dans svg lui-même. Ajoutez simplement des <a> éléments autour des formes sur lesquelles vous souhaitez avoir des clics.

Quelques options si vous avez besoin de quelque chose de plus avancé:

21
Erik Dahlström

Je pense qu'il est préférable de diviser ma réponse en 2 parties:

[~ # ~] a [~ # ~] - Créez tout à partir de zéro (avec SVG, JavaScript et HTML5):

  1. Créer une nouvelle page HTML5
  2. Créez un nouveau fichier SVG, chaque zone cliquable (province) doit constituer un polygone SVG distinct dans votre fichier SVG (j'utilise Adobe Illustrator pour créer des fichiers SVG, mais vous pouvez également trouver de nombreux logiciels alternatifs, par exemple Inkscape )
  3. Ajoutez la souris et cliquez sur les événements sur 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. Ajoutez un gestionnaire pour chaque événement dans votre code JavaScript et ajoutez votre code souhaité au gestionnaire 
    function mouseOverHandler(evt) {};
function clickHandler(evt) {};
  5. Ajoutez le fichier SVG à votre page HTML (je préfère le SVG intégré, mais vous pouvez aussi utiliser un fichier SVG lié)
  6. Téléchargez les fichiers sur votre serveur

[~ # ~] b [~ # ~] - Utilisez un logiciel tel que FLDraw Interactive Image Creator (uniquement si vous avez une image de carte et que vous souhaitez la rendre interactive):

  1. Créez un projet vide et choisissez votre image de carte comme image de base lors de la création du nouveau projet.
  2. Ajouter un élément Polygone (à partir du menu Forme) pour chaque province
  3. Pour chaque polygone, double-cliquez dessus pour ouvrir la fenêtre Propriétés dans laquelle vous pouvez choisir un type d'événement à déplacer avec la souris. Cliquez également sur, changez l'opacité de la forme en 0 pour la rendre invisible.
  4. Enregistrez votre projet et publiez-le au format HTML5. FLDraw créera un nouveau dossier contenant tous les fichiers requis pour votre projet que vous pourrez télécharger sur votre serveur.

Option (A) est très bien si vous êtes programmeur ou si vous avez quelqu'un pour créer le code et le fichier SVG requis pour vous, Option (B) est bien si vous ne voulez pas embaucher quelqu'un ni passer votre temps à créer tout rayure

Vous avez également d'autres options, par exemple utiliser HTML5 Canvas au lieu de SVG, mais il n'est pas très facile de créer une carte Zoomable à l'aide de HTML5 Canvas. Il existe peut-être d'autres moyens que je ne connais pas.

4
bestapps

Juste au cas où quelqu'un le chercherait - je l'ai utilisé sur plusieurs sites, la personnalisation et les possibilités de RD étaient toujours parfaitement adaptées à mes besoins. Simple et gratuit d'utilisation:

Cartes CSS cliquables

Une note pour plus de scripts sur un site: j’ai eu quelques problèmes ennuyeux pour travailler sur une carte (qui fonctionnait comme un menu graphique) dans Drupal 7. Là où de nombreux autres scripts ont été utilisés, et après En les manipulant, je me suis retrouvé coincé avec la carte - cela ne fonctionnait toujours pas, même si jquery.cssmap.js, CSS (les deux en local) et le script à l'endroit où il se trouvait au bon endroit. Firebug m'a montré une erreur et j'ai soudainement eureka - un simple oubli, j'ai laissé le code de script tel qu'il était dans l'exemple et il y avait un conflit. Il suffit de changer la fonction "$" de front "$" en "jQuery" (ou un autre gestionnaire) et cela fonctionne parfaitement.]

Voici ce que je mentionne (bien sûr, vous pouvez le mettre avant au lieu de):

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

Allez à SVG à Script avec votre SVG, la sortie par défaut est la carte en code SVG qui ajoute des événements est également ajoutée mais est facilement identifiée et peut être modifiée à votre guise.

1
Chasbeen

J'utilise makeaclickablemap pour mes cartes de province depuis un certain temps maintenant et cela s'est avéré être un très bon ajustement.

1
Tamas

J'ai eu les mêmes exigences et finalement ceci convertisseur de carte a fonctionné pour moi. C'est le meilleur plugin pour toute génération de carte.

1
rajnz18

Le code suivant peut vous aider:

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

Source

0
friebe87

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

Cela facilite la mise en surbrillance de toute la zone et vous permet de spécifier différents styles en fonction de l'état de la zone: normal, survolé, actif, désactivé.

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

0
Nicolas BADIA