Interaktive jQuery-Karte

moshpanda · 15.08.2017

Servus,

Ich will in jQuery eine Karte bauen, in der sich ohne Probleme weitere Kontaktinformationen hinzufügen lassen. Als Kartenmaterial nutze ich die jVector Map, welche den einzelnen Ländern das Attribut 'data-code="XX"' mitgibt. Nun will ich einen HTML-Container haben, in den ich die Kontaktinfos einfüge, in etwa so:

Code:

<div class="country-info" data-country="DE">
  <h3>Deutschland</h3>
</div>

Kann ich bei klick auf ein Land mit dem data-code schauen, ob es eine Box mit dem selben Value in der data-country gibt und dann diesen einblenden lassen?

Vielleicht hat aber auch jemand eine andere Idee... Im Grunde will ich einfach nur, dass bei Klick auf ein Land dementsprechende Kontaktinformationen in einem außerhalb der Karte liegenden Container angezeigt werden. :confused:

tobsel · 15.08.2017

Gibt es irgendwo den kompletten Code? Das ganze ist natürlich möglich aber ohne den Code dann doch relativ schwer zu erraten.

Gesendet von iPad mit Tapatalk Pro

moshpanda · 15.08.2017

Die Karte nutze ich
Europe

HTML

Code:

<div id="info-text">
        <div id="data-country-elements">
          <span>LOREM IPSUM</span>
          <div class="country-info" data-country="IT">
            <h3>Italien</h3>
          </div>
          <div class="country-info" data-country="DE">
            <h3>Deutschland</h3>
          </div>
        </div>
      </div>

jQuery

Code:

var countryInfo = $(".country-info").attr("data-country");
      var countryContentInfo = $(".country-info").html();

      $("#world-map path").click(function(){
        if($(this).attr("data-code") == $(".country-info").attr("data-country")){
          $("#info-text").html(countryContentInfo);
        } else {
          $("#info-text").html("Keinen Händler gefunden");
        }
      });

Mein jQuery Part hängt an der Stelle

Code:

if($(this).attr("data-code") == $(".country-info").attr("data-country")){

Komme aber auch nicht weiter :/

moshpanda · 16.08.2017

Das sollte doch gehen, wenn ich jetzt auf den path klicke, dass sich der HTML Container einblende, oder?

CSS

Code:

  .country-info{display:none;}

HTML

Code:

<div id="info-text">
  <div class="country-info" data-country="IT">
    <h3>Italien</h3>
  </div>
  <div class="country-info" data-country="DE">
    <h3>Deutschland</h3>
  </div>
</div>

KARTE

Code:

<path d="HIER KOMMEN ETLICHE KOORDINATEN" [B]data-code="DE"[/B] fill="#8d8d8d" fill-opacity="1" stroke="none" stroke-width="0" stroke-opacity="1" fill-rule="evenodd" class="jvectormap-region jvectormap-element" cursor="pointer"></path>

jQuery

Code:

$("#world-map path").click(function(){
  var countrID = $(this).attr("data-code");
  $(".country-info").fadeOut();
  $(".country-info").attr(countrID).fadeIn();
});

scrollt · 16.08.2017

Wenn du .attr() benutzt, lasst du dir den Wert zurückgeben der in einem HTML Attribut steht. Was du brauchst ist aber ein Selektor.

Attribute | jQuery API Documentation

Code:

$("#world-map path").click(function(){
  var countryCode = $(this).attr("data-code");
  var $info = $('.country-info[data-country="' + countryCode + '"]');

...

ungetestet versteht sich

abgesehen davon hat die Karte auch eine API, du kannst dir die selbst gebastelten Click Handler auch sparen.

Map

moshpanda · 16.08.2017

scrollt schrieb:
abgesehen davon hat die Karte auch eine API

Wäre das dann so richtig?
Habe mich mit der Abfrage / dem Zusammen von Attributen noch nie wirklich auseinandergesetzt

Code:

onRegionClick:{
  var countryCode = $(this).attr("data-code");
  var $info = $('.country-info[data-country="' + countryCode + '"]');
  $(".country-info").fadeOut("slow", function(){
    $($info).fadeIn("slow");
  });
}

scrollt · 16.08.2017

du kannst auch alles so lassen wie bisher, es war einfach nur ein Hinweis.

das hier:

Code:

$(".country-info").fadeOut("slow", function(){
    $($info).fadeIn("slow");
  });

ist noch etwas falsch. $($info) ist falsch, da nutzt du die jQuery Funktion auf einem jQuery Objekt. $info.fadeIn() reicht.

moshpanda · 16.08.2017

Läuft einwandfrei, Tausend Dank!
Allerdings habe ich da noch ein-zwei Fragen, kann ich dich vielleicht bei irgendeinem Messenger adden? Oder dir das Problem per PN schildern?

tobsel · 16.08.2017

Schreibe doch einfach hier... dann können dir mehrere Leute helfen...

moshpanda · 16.08.2017

Na gut, ich versuchs mal..

Also mein Code sieht nun so aus:

CSS

Code:

.country-info{display:none;color:#fff;}
.country-info.first{display:block;}

jQuery

Code:

$(function(){
  $('#world-map').vectorMap({
    map: 'europe_mill',
    zoomOnScroll: false,
    zoomMax: 1,
    backgroundColor: '#fdb140',
    regionStyle: {
      initial: {
        fill: 'white',
        "fill-opacity": 1,
        stroke: 'none',
        "stroke-width": 0,
        "stroke-opacity": 1
      },
      hover: {
        "fill-opacity": 0.8,
        cursor: 'pointer'
      },
      selected: {
        fill: 'yellow'
      },
      selectedHover: {
      }
    }
  });

  $("#world-map path").click(function(){
    var countryCode = $(this).attr("data-code");
    var $info = $('.country-info[data-country="' + countryCode + '"]');
    $(".country-info").fadeOut(300);
    $info.delay(400).fadeIn(300);
  });
});

HTML

Code:

<div class="country-info first">
  <p>Steht von Anfang an da</p>
</div>
<div class="country-info fallback">
  <p>Kommt wenn Land keine Box hat</p>
</div>
<div class="country-info" data-country="IT">
  <h3>Italien</h3>
  <p>bubbedi<br />
  babbedi</p>
</div>
<div class="country-info" data-country="DE">
  <h3>Deutschland</h3>
  <p>bubbedi<br />
  babbedi</p>
</div>
<div class="country-info" data-country="ES">
  <h3>Spanien</h3>
  <p>bubbedi<br />
  babbedi</p>
</div>

Er fadet das die alte Infobox aus und die neue mit dem gleichen Attribute-Value ein. Nun würde ich gerne noch eine Art Fallback haben, sprich ich klicke auf ein Land wo keine Box mit entsprechendem Attribute-Value existiert (DIV mit der Klasse "fallback"), dann soll die eingeblendet werden

tobsel · 16.08.2017

Ganz einfach gesagt musst du nur prüfen ob
if($info.get(0) !== undefined){
// Ausfuhren was passieren soll wenn Element vorhanden
}Else
{
// fallback
}

Das ganze vor das fade out

(Schnell mit dem Handy getippt und ungetestet)

moshpanda · 16.08.2017

Code:

$("#world-map path").click(function(){
  var countryCode = $(this).attr("data-code");
  var $info = $('.country-info[data-country="' + countryCode + '"]');
  var $fallback = $('.country-info.fallback');
  $(".country-info").fadeOut(300);
  if($info.get(0) !== undefined){
    $info.delay(400).fadeIn(300);
  }else{
    $fallback.delay(400).fadeIn(300);
  }
});

Funktioniert einwandfrei, ich danke euch beiden echt vielmals!
Den Rest werde ich sicher über die Maps-API hinkriege, danke

tobsel · 16.08.2017

Das nächste mal darfst du den Code auch gerne bei JsFiddle (oder ähnlich) Posten dann kann man einfach nachschauen

Viel Erfolg noch dabei

moshpanda · 16.08.2017

Das hatte ich sogar vor, das Problem war dass ich den Code für die jVectorMap Karte nicht eingebettet gekriegt habe

Aber es funktioniert alles wie es soll, besten Dank

scrollt · 16.08.2017

if ($info.length > 0) {
// fade in Info
} else {
// fade in fallback
}

[emoji106]

tobsel · 17.08.2017

moshpanda schrieb:
Das hatte ich sogar vor, das Problem war dass ich den Code für die jVectorMap Karte nicht eingebettet gekriegt habe
Aber es funktioniert alles wie es soll, besten Dank

Beim nächsten mal einfach die links von hier verwenden:

jvectormap - cdnjs.com - The best FOSS CDN for web related libraries to speed up your websites!

Das mit length ist natürlich bisschen schöner und effizienter.

moshpanda · 17.08.2017

Die Links habe ich benutzt, es fehlt aber das JS für die Karte an sich.

Edit fiddle - JSFiddle

http://jvectormap.com/js/jquery-jvectormap-europe-mill.js

Das finde ich nämlich nur über http, und da meckern jsfiddle und codepen leider rum

Suche

Interaktive jQuery-Karte

moshpanda

Experte

tobsel

Urgestein

moshpanda

Experte

moshpanda

Experte

scrollt

Legende

moshpanda

Experte

scrollt

Legende

moshpanda

Experte

tobsel

Urgestein

moshpanda

Experte

tobsel

Urgestein

moshpanda

Experte

tobsel

Urgestein

moshpanda

Experte

scrollt

Legende

tobsel

Urgestein

moshpanda

Experte