{"id":134,"date":"2014-08-12T20:28:04","date_gmt":"2014-08-12T19:28:04","guid":{"rendered":"http:\/\/www.hman-projects.de\/?p=134"},"modified":"2015-04-24T21:25:49","modified_gmt":"2015-04-24T20:25:49","slug":"jquery-mapael-zur-visualisierung-von-netzwerken","status":"publish","type":"post","link":"https:\/\/www.hman-projects.de\/?p=134","title":{"rendered":"Jquery-Mapael zur Visualisierung von Netzwerken"},"content":{"rendered":"<p>Um verschiendene Datenquellen in einer Network-Map zusammen zu fassen, bedarf es mehrerer Schritte.<\/p>\n<ol>\n<li>Datenquellen identifizieren<\/li>\n<li>Schnittstellen \/ APIs identifizieren<\/li>\n<li>Daten zusammen fassen in einem GUI<\/li>\n<\/ol>\n<p>Als Datenquellen m\u00f6chte ich SevOne und CA Spectrum verwenden.<br \/>\nDeren APIs kenne ich und kann ich auch einfach nutzen<br \/>\nZur Visualisierung werde ich zu eigenen Libraries greifen. Eine dieser wird Mapael sein, welche ich umfassend erweitert habe. Hier ein Video des Dummys &#8211; ohne reale Daten:<\/p>\n<p><a href=\"http:\/\/youtu.be\/YfSNo5Gnmvo\" target=\"_blank\">Video: Jquery-Mapael for Network-Visualization<\/a><\/p>\n<p><iframe loading=\"lazy\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/YfSNo5Gnmvo?feature=player_detailpage\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<p><a href=\"http:\/\/youtu.be\/YfSNo5Gnmvo\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-138\" title=\"Mapael Screenshot\" src=\"http:\/\/www.hman-projects.de\/wp-content\/uploads\/2014\/08\/Mapael_Screenshot-1024x640.png\" alt=\"\" width=\"640\" height=\"400\" srcset=\"https:\/\/www.hman-projects.de\/wp-content\/uploads\/2014\/08\/Mapael_Screenshot-1024x640.png 1024w, https:\/\/www.hman-projects.de\/wp-content\/uploads\/2014\/08\/Mapael_Screenshot-300x187.png 300w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<p>Hier zu der Online-Demo: <a title=\"Online-Demo\" href=\"http:\/\/hman-projects.de\/mapael\/jquery-mapael-master\/world.html\" target=\"_blank\">Demo<\/a><\/p>\n<p>Zum Schluss kann man diese Web-basierte Map dann mittels AppBoard \/ enPortal von edge Technologies wieder Mandantenf\u00e4hig anderen Usern zur Verf\u00fcgung stellen, so dass auch Enterprise-Kunden diese L\u00f6sung verwenden k\u00f6nnen.<\/p>\n<p>Die original Mapael-Library findet man unter: <a href=\"http:\/\/www.neveldo.fr\/mapael\/\" target=\"_blank\">http:\/\/www.neveldo.fr\/mapael\/<\/a><\/p>\n<p>Viel Spa\u00df beim Video oder der Demo<\/p>\n<p><em><strong>Update: 18.August 2014:<\/strong><\/em><br \/>\nUm die MAPs in PDF-Dokumente direkt Serverseitig transferieren zu k\u00f6nnen, gibt es nun auch einen Weg, -&gt; einfach per PhantomJS konvertieren.<br \/>\nPhantomJS ist ein headless Browser, -&gt; also ohne grafische Ausgabe. Diese intern berechnete Bildschirmdarstellung kann aber bei Bedarf in eine\u00a0 PNG- oder PDF-Datei umgeleitet werden.<br \/>\nSomit k\u00f6nnen auch auf Javascript \/ JQUERY etc. basierende Webseiten als Grafik oder PDF gespeichert und somit in ein klassisches Reporting, -&gt; Verschicken von PDF-Reports integriert werden.<br \/>\nPhantom-JS steht f\u00fcr MacOSX, Windows und Linux als auch als Sourcecode zur Verf\u00fcgung<\/p>\n<p>Somit sieht es f\u00fcr Mapael wie folgt aus:<\/p>\n<ul>\n<li><span style=\"color: #008000;\">Responsive: yes<\/span><\/li>\n<li><span style=\"color: #008000;\">dynamic resizing: yes<\/span><\/li>\n<li><span style=\"color: #008000;\">html5: yes, workaround for IE via VML<\/span><\/li>\n<li><span style=\"color: #008000;\">Flash needed: no<\/span><\/li>\n<li><span style=\"color: #008000;\">Integration in Reporting: via PhantomJS<\/span><\/li>\n<\/ul>\n<p>Gibt es alternative Map-Libraries wie Leaflet.js, welches sich Openstreetmap oder anderen Kartendiensten bedient und somit wesentlich mehr transfervolumen hervorruft oder jVectorMap, welches \u00e4hnlich wie Mapael gebaut ist, aber noch mehr Karten beinhaltet.<\/p>\n<p><a title=\"jVectorMap\" href=\"http:\/\/jvectormap.com\/\" target=\"_blank\">http:\/\/jvectormap.com\/<\/a> -&gt; Wird auch eingesetzt f\u00fcr Unwetterwarnungen bei der Tagesschau-Online. Die Karten lassen sich in 1-2 Stunden jeweils auch in eine Mapael-Karte konvertieren. Die Funktionen \u00e4hneln den von Mapael, bieten aber nicht ganz die Flexibilit\u00e4t wie Mapael.<br \/>\njVectorMaps werden auch zur Generierung der Maps in <a title=\"Kibana\" href=\"http:\/\/www.elasticsearch.org\/overview\/kibana\/\">Kibana<\/a> verwendet. Dort liegen die Maps dann im Ordner \/app\/panels\/map\/lib\/<br \/>\nFalls jemandem in Kibana noch eine MAP fehlt, man kann sehr einfach die jVectorMaps zu Kibana hinzuf\u00fcgen. By Default kennt Kibana aktuell nur World, USA, Europe, &#8211; das ist mal wieder nur die westliche Sicht der Erde \ud83d\ude41<\/p>\n<p><a title=\"Leaflet\" href=\"http:\/\/leafletjs.com\/\">http:\/\/leafletjs.com\/<\/a> -&gt; Etwas &#8222;fetter&#8220; und pr\u00e4zizer bei der Darstellung, aber nicht f\u00fcr meinen Anwendungsfall<\/p>\n<p>Falls jemandem noch eine Idee fehlt und denkt, dass die Hersteller so etwas schon in ihre Tools lange eingebaut h\u00e4tten, der Atlas von Arbor Networks w\u00e4re auch pr\u00e4destiniert um diese Libraries zu nutzen *-) &#8230; <a title=\"Atlas von Arbor Networks\" href=\"https:\/\/atlas.arbor.net\/\">hier gibt es online nur die frei einsehbare HTML2-Version mit Tabellen und Text<\/a>. &#8230; werde mir mal \u00fcberlegen, ob ich diese nicht dynamisch f\u00fcr meine Demo anzapfen kann. *-)<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Um verschiendene Datenquellen in einer Network-Map zusammen zu fassen, bedarf es mehrerer Schritte. Datenquellen identifizieren Schnittstellen \/ APIs identifizieren Daten zusammen fassen in einem GUI Als Datenquellen m\u00f6chte ich SevOne und CA Spectrum verwenden. Deren APIs kenne ich und kann ich auch einfach nutzen Zur Visualisierung werde ich zu eigenen Libraries greifen. Eine dieser wird [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":["post-134","post","type-post","status-publish","format-standard","hentry","category-network-performance-monitoring"],"_links":{"self":[{"href":"https:\/\/www.hman-projects.de\/index.php?rest_route=\/wp\/v2\/posts\/134"}],"collection":[{"href":"https:\/\/www.hman-projects.de\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hman-projects.de\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hman-projects.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hman-projects.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=134"}],"version-history":[{"count":12,"href":"https:\/\/www.hman-projects.de\/index.php?rest_route=\/wp\/v2\/posts\/134\/revisions"}],"predecessor-version":[{"id":156,"href":"https:\/\/www.hman-projects.de\/index.php?rest_route=\/wp\/v2\/posts\/134\/revisions\/156"}],"wp:attachment":[{"href":"https:\/\/www.hman-projects.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=134"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hman-projects.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=134"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hman-projects.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=134"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}