web-dev-qa-db-de.com

Erstellen Sie eine Karte mit anklickbaren Provinzen / Bundesländern mit SVG, HTML / CSS, ImageMap

Ich versuche eine interaktive Karte zu erstellen, auf der Benutzer auf verschiedene Provinzen in der Karte klicken können, um Informationen zu dieser Provinz zu erhalten.

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

Bisher habe ich nur Lösungen mit eingeschränkter Funktionalität gefunden. Ich habe wirklich nur mit einer SVG-Datei danach gesucht, aber ich würde für andere Dateitypen offen sein, wenn es möglich ist.

Wenn jemand eine voll funktionsfähige Möglichkeit dafür kennt (jQuery-Plug-in, PHP Skript, Vektorbilder) oder ein Tutorial, wie man es manuell macht, teile es bitte.

30
mindtheGaspar

jQuery-Plugin zum Dekorieren von Imagemaps (Hervorhebungen, Bereiche auswählen, Tooltips):

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

Offenlegung: Ich habe es geschrieben.

43
Jamie Treworgy

Klingt nach einer einfachen Imagemap. Ich würde empfehlen, sie nicht komplexer zu gestalten, als es sein muss. Hier ist ein Artikel über wie man Imagemaps mit svg verbessert . Es ist sehr einfach, anklickbare Bereiche in svg selbst zu erstellen. Fügen Sie einfach einige <a> Elemente zu den Formen hinzu, die angeklickt werden sollen.

Ein paar Optionen, wenn Sie etwas Fortgeschritteneres brauchen:

21
Erik Dahlström

Ich denke, es ist besser, meine Antwort in zwei Teile zu teilen:


[~ # ~] a [~ # ~] - Alles von Grund auf neu erstellen (mit SVG, JavaScript und HTML5):

  1. Erstellen Sie eine neue HTML5-Seite
  2. Erstellen Sie eine neue SVG-Datei. Jeder anklickbare Bereich (Provinz) sollte ein separates SVG-Polygon in Ihrer SVG-Datei sein. (Ich verwende Adobe Illustrator zum Erstellen von SVG-Dateien, aber Sie finden auch viele alternative Softwareprodukte, z. B. Inkscape )
  3. Fügen Sie Ihren Polygonen nacheinander Mouseover- und Klickereignisse hinzu
    <polygon points="200,10 250,190 160,210" style="fill:Lime;stroke:purple;stroke-width:1" 
        onmouseover="mouseOverHandler(evt)"
        onclick="clickHandler(evt)" />
    
  4. Fügen Sie einen Handler für jedes Ereignis in Ihrem JavaScript-Code hinzu und fügen Sie dem Handler Ihren gewünschten Code hinzu
    function mouseOverHandler(evt) {};
    function clickHandler(evt) {};
    
  5. Fügen Sie die SVG-Datei zu Ihrer HTML-Seite hinzu (ich bevorzuge Inline-SVG, aber Sie können auch verknüpfte SVG-Dateien verwenden).
  6. Laden Sie die Dateien auf Ihren Server hoch

[~ # ~] b [~ # ~] - Verwenden Sie eine Software wie FLDraw Interactive Image Creator (nur wenn Sie haben ein Kartenbild und wollen es interaktiv machen):

  1. Erstellen Sie ein leeres Projekt und wählen Sie beim Erstellen des neuen Projekts Ihr Kartenbild als Basisbild
  2. Fügen Sie für jede Provinz ein Polygon-Element (aus dem Menü Form) hinzu
  3. Doppelklicken Sie für jedes Polygon darauf, um das Eigenschaftenfenster zu öffnen, in dem Sie einen Ereignistyp für das Mouseover und das Klicken auswählen können. Ändern Sie außerdem die Formtrübung auf 0, um es unsichtbar zu machen
  4. Speichern Sie Ihr Projekt und veröffentlichen Sie es in HTML5. FLDraw erstellt einen neuen Ordner, der alle erforderlichen Dateien für Ihr Projekt enthält, die Sie auf Ihren Server hochladen können.

Option (A) ist sehr gut, wenn Sie Programmierer sind oder wenn Sie jemanden haben, der den erforderlichen Code und die SVG-Datei für Sie erstellt. Option (B) ist gut, wenn Sie nicht jemanden einstellen oder Ihre eigene Zeit damit verbringen möchten, alles daraus zu erstellen kratzen

Sie haben auch einige andere Optionen, zum Beispiel die Verwendung von HTML5 Canvas anstelle von SVG, aber es ist nicht sehr einfach, eine zoombare Karte mit HTML5 Canvas zu erstellen. Vielleicht gibt es auch andere Möglichkeiten, die mir nicht bekannt sind.

4
bestapps

Nur für den Fall, dass irgendjemand danach suchen sollte - ich habe es auf mehreren Websites verwendet, und immer waren die Anpassungs- und RD-Möglichkeiten genau das, was ich brauchte. Einfach und kostenlos zu bedienen:

Clickable CSS Maps

Ein Hinweis für mehr Skripte auf einer Site: Ich hatte einige ärgerliche Probleme damit, eine Karte (die als Grafikmenü funktionierte) in Drupal= 7 zu erstellen. Dort, wo viele andere Skripte verwendet wurden, und danach Als ich mit ihnen fertig wurde, blieb ich bei der Karte stecken - es funktionierte immer noch nicht, obwohl die jquery.cssmap.js, CSS (beide lokal) und das Skript an der richtigen Stelle waren. Firebug zeigte mir einen Fehler und ich wurde plötzlich sicher - Ein einfaches Versehen, ich habe den Skriptcode so belassen, wie er im Beispiel war, und es gab einen Konflikt. Ändere einfach die Front-Funktion "$" in "jQuery" (oder einen anderen Handler) und es funktioniert perfekt.:]

Hier ist, was ich erwähne (natürlich können Sie es vor dem setzen):

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

Gehe zu SVG to Script mit deiner SVG ist die Standardausgabe die Karte in SVG-Code, die Ereignisse hinzufügt, hinzugefügt wird, aber leicht zu identifizieren ist und nach Bedarf geändert werden kann.

1
Chasbeen

Ich verwende seit einiger Zeit makeaclickablemap für meine Provinzkarten und es stellte sich heraus, dass es wirklich gut passt.

1
Tamas

Ich hatte die gleichen Anforderungen und schließlich funktionierte dieser Map Converter für mich. Es ist das beste Plugin für jede Kartengeneration.

1
rajnz18

Der folgende Code kann Ihnen helfen:

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

Quelle

0
friebe87

Hier ist ein weiteres Plugin für Imagemaps, das ich geschrieben habe, um Imagemaps zu verbessern: https://github.com/gestixi/pictarea

Es macht es einfach, den gesamten Bereich hervorzuheben und je nach Status der Zone verschiedene Stile anzugeben: Normal, Schweben, Aktiv, Deaktivieren.

Sie können auch festlegen, wie viele Zonen gleichzeitig ausgewählt werden können.

0
Nicolas BADIA