Blog

SVG-Karten mit jQuery ansprechen

SVG-Karten mit jQuery ansprechen, Europa jscript blank map, js europe map(), NAV, Navision, Qlikview

Eingebundene SVG-Karten mit jQuery ansprechen und manipuieren

Die Vektorkarten im SVG-Format eigenen sich hervorragend für interaktive Web-Anwendungen (z.B. Intranet, BI-Systeme wie Qlikview, Navision oder Evidanza). In diesem Tutorial beschreiben wir Ihnen kurz, wie man mit den Karten arbeitet bzw. sie mit der freien Javascript-Bibliothek jQuery ansprechen kann.

 


SVG Karten bei – Maps4Office


 

Die SVG-Karte wird z.B. folgendermaßen eingebunden:

<svg version="1.1" id="svgEuropa" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="420px" height="594px" viewBox="0 0 210 297" enable-background="new 0 0 210 297" xml:space="preserve">

<polygon id="stallwanger.it.dev_shape_ALB" .../>
<polygon id="stallwanger.it.dev_shape_DEU" points="84.502,85.722 86.898,86.056 88.602,86.358... />
<polygon id="stallwanger.it.dev_shape_AND"...
SVG-Karten mit jQuery js iso name, color fill background, , NAV, Navision, Qlikview

SVG interaktiv – CSS ISO Länder Einfärben

 

Ansprechen kann man die Polygone nicht direkt über die ID, aber zusätzlich mit der SVG-ID. Mit dem Selektor

$("#svgEuropa [id='stallwanger.it.dev_shape_DEU']")

kann man z.B. das Polygon von Deutschland ansprechen. Will man die Farbe ändern, kann man z.B. das Style “fill” ändern:

$("#svgEuropa [id='stallwanger.it.dev_shape_DEU']").css("fill","#ff0000");
SVG Click on("click",function(, interaction, iso name europa karte, klick Ereignis, Hover, Canvas

SVG Europa Karte – Interaktionen JScript

 

Natürlich kann man mit dem Objekt dann alles mögliche anstellen. Per jQuery können Sie Events an das Objekt anbinden – das Click-Ereignis beispielsweise so:

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

 

0
  Related Posts
  • No related posts found.
0
  • GIS Consulting