Karte erstellen mit jVectorMap, HTML5 und CSS3

Tory · 09.06.2013

Hallo.

Ich habe ein Problem. Ich hab mir leider eingebildet, für eine Projektarbeit eine interaktive Karte mit HTML5/CSS3 zu programmieren. Jetzt hab ich den Salat. Zurück kann ich auch nicht mehr. In wenigen Tagen ist Abgabe, und nichts funktioniert - und erst recht nicht so, wie ich es haben will. :'( Ich wurde in einem anderen Forums-Beitrag schon auf das Plug-In "jVectorMap" hingewiesen, welches ich mittlerweile auch benutze...aber verstehen tu ich es nicht wirklich. Könnt Ihr mir helfen?

Mein Problem ist, dass ich zu meiner bestehenden Karte von DE mit ihren Bundesländern, die unterschiedlich eingefärbt sind, jetzt noch die Küstenlinie hinzufügen möchte. Leider wird mir diese nie als Linie, sondern als Fläche angezeigt. Ich habe schon verschiedene Wege versucht, diese als path zu den anderen paths der Bundesländer hinzuzufügen und dann im HTML-File das Attribut 'stroke' angegeben...der Effekt ist, dass er mir alle Flächenfarben - auch die der Bundesländer in weiß darstellt. Die Küstenlinie ist zwar wie gewünscht blau, aber eben auch weiß gefüllt. Auch als polyline funktioniert es nicht, die Küstenlinie wird mir gar nicht angezeigt, aber die Flächen der Bundesländer werden trotzdem weiß....

Es tut mir leid, dass ich euch damit nerven muss...ich gebe es zu, es war eine Schnappsidee von mir, zu glauben, ich könnte mir in wenigen Wochen alleine HTML5/CSS3 beibringen...aber wie gesagt, zurück kann ich jetzt auch nicht mehr. Durchfallen will ich aber auch nicht.

Bitte helft mir!

Vielen Dank im Voraus!
LG
Tory

Tory · 09.06.2013

AW: Karte erstellen mit jVectorMap, HTML5 und CSS3

Außerdem habe ich das Problem, dass ich Diagramme einbinden möchte. Diese Diagramme sind einfache png-Bilder. (Ja, ich weiß, es gibt auch die Möglichkeit die Diagramme mit z.B. Kendo UI in Echtzeit zu programmieren - aber noch mehr programmieren...). Wenn ich die Karte zoome...dann zoomen die Diagramme aber nicht mit. Kann ich die Karte und die Diagramme irgendwie miteinander verknüpfen?

cythux · 09.06.2013

AW: Karte erstellen mit jVectorMap, HTML5 und CSS3

Tory · 09.06.2013

AW: Karte erstellen mit jVectorMap, HTML5 und CSS3

Danke, aber ich will keine Karte einbinden, sondern selber eine erstellen. Ich bin Kartographin, habe bisher aber nur analoge Karten erstellt. Um mit der Zeit zu gehen, möchte ich nun mal eine interaktive Karte erstellen.
Oder habe ich die Links falsch verstanden?

cythux · 09.06.2013

AW: Karte erstellen mit jVectorMap, HTML5 und CSS3

War eher um dir SVG zu verdeutlichen, diese kann man mittels Illustrator/inkscape erstellen und dann in HTML5/CSS3 - da ich von jvector noch nie gehört habe. Vorteil von SVG ist zudem das man diese mittels CSS3 ebenfalls ansteuern kann

http://css-tricks.com/using-svg/
http://www.drweb.de/magazin/svg-grafiken-einbetten-und-mit-css-und-javascript-manipulieren/

http://www.petercollingridge.co.uk/data-visualisation/introduction-svg-scripting-interactive-map

http://kartograph.org/

We created 30 Days to Learn HTML & CSS because we believe everyone has the right to learn how to build wonderful things on the web.

The course is 100% free and always will be, no strings attached. It is instructed by veteran web developer and trainer Jeffrey Way, and brought to you by Tuts+ Premium. Happy learning!

lachender_engel · 10.06.2013

AW: Karte erstellen mit jVectorMap, HTML5 und CSS3

Wenn Du uns einen Link gibst wo das, was Du bisher gemacht hast, online ist haben wir sicher besser die Möglichkeit mal zu schauen. Manchmal sind es auch nur Kleinigkeiten, ein falscher Buchstabe, ein Zahlendreher, falsche Reihenfolge von Befehlen die Probleme verursachen.

karstenhl · 21.11.2015

Hallo,

2013 ist ja schon ein wenig her

Da gibt es die Seite https://www.jsonbix.com die stellen fertige Karten Vorlagen her oder man sucht sich ein Karte aus dem Katalog.

kostenlose Vorlagen findest Du hier:

Copy & Paste Javascript Code

Hier der Code der Weltkarte Länder:

Code:

<div id="jsonbix-map-10000"><iframe id="iframe-map-10000" class="iframe-map" src="https://www.jsonbix.com/wp-admin/admin-ajax.php?action=gjme_publish&p=10000&key=av9ioyo0rp" width="100%" height="90%" style=" width: 100%; height: 90%; max-width: 100%; border: none; background: transparent;" border="0" frameborder="0" allowTransparency="true"></iframe></div>
<script type="text/javascript">
    (function() {
    "use strict";
    /* use the id of the iframe: "iframe-map-10000" */
    setResponsiveMap('iframe-map-10000');
    /* resize the iframe: */
    function setResponsiveMap(iframeId) {
    var addEvt = 'addEventListener';
    var evtName = 'message';
    if(!window.addEventListener) {
    addEvt = 'attachEvent';
    evtName = 'on'+evtName;
    }
    window[addEvt](evtName, function(ev) {
    var iframe = document.getElementById(iframeId);
    if(!iframe) return;
    if(ev.source != iframe.contentWindow) return;
    var data = ev.data;
    if(typeof(data) == 'string') data = JSON.parse(data);
    if(!data.height || !data.width) return;
    var newHeight = parseInt(data.height);
    if(newHeight == 0 || isNaN(newHeight)) return;
    iframe.setAttribute("height", newHeight);
    iframe.style.height = newHeight + "px";
    }, false);
    };
    }());
</script>