Antworten auf deine Fragen:
Neues Thema erstellen

Karte erstellen mit jVectorMap, HTML5 und CSS3

Tory

Noch nicht viel geschrieben

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

Noch nicht viel geschrieben

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?
 

Tory

Noch nicht viel geschrieben

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

Aktives Mitglied

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!
 
Zuletzt bearbeitet:

lachender_engel

Aktives Mitglied

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.
 
K

karstenhl

Guest

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>
 
Zuletzt bearbeitet von einem Moderator:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.614
Beiträge
1.538.351
Mitglieder
67.525
Neuestes Mitglied
mgtaucher
Oben