From 913030abb0d8de33bfae47fb5e63a68692ff41b4 Mon Sep 17 00:00:00 2001 From: Nils Schneider Date: Mon, 23 Mar 2015 11:07:06 +0100 Subject: [PATCH] new markers (blinking) --- history.html | 32 ++++++++++++++++++++ history.js | 63 ++++++++++++++++++++++------------------ img/circlemarker.png | Bin 0 -> 618 bytes img/circlemarker@2x.png | Bin 0 -> 1094 bytes 4 files changed, 66 insertions(+), 29 deletions(-) create mode 100644 img/circlemarker.png create mode 100644 img/circlemarker@2x.png diff --git a/history.html b/history.html index 9712162..8c08cc8 100644 --- a/history.html +++ b/history.html @@ -211,6 +211,38 @@ right: 0.5em; } + .leaflet-marker-icon.node-online { + filter: hue-rotate(203deg) brightness(1.5); + -webkit-filter: hue-rotate(203deg) brightness(1.5); + opacity: 0.9; + } + + .leaflet-marker-icon.node-new { + filter: hue-rotate(203deg) brightness(2.5); + -webkit-filter: hue-rotate(203deg) brightness(2.5); + } + + .leaflet-marker-icon.node-offline { + -webkit-animation: blink 1s linear; + -webkit-animation-iteration-count: infinite; + animation: blink 1s linear; + animation-iteration-count: infinite; + filter: saturate(160%); + -webkit-filter: saturate(160%); + } + + @-webkit-keyframes blink { + 0% { opacity: 1.0; } + 80% { opacity: 1.0; } + 90% { opacity: 0.0; } + } + + @keyframes blink { + 0% { opacity: 1.0; } + 80% { opacity: 1.0; } + 90% { opacity: 0.0; } + } + @media screen and (max-width: 80em) { #sidebar { font-size: 0.8em; diff --git a/history.js b/history.js index 02812df..f31eb28 100644 --- a/history.js +++ b/history.js @@ -211,24 +211,42 @@ function linkId(d) { } function mkmap(map, newnodes, lostnodes, onlinenodes, graph, gotoAnything) { - function mkCircleNode(d) { - var opt = { color: "#1566A9", - fillColor: "#1566A9", - radius: 5, - opacity: 0.7, - fillOpacity: 0.5 + function mkMarker(dict, iconFunc) { + return function (d) { + var opt = { icon: iconFunc(d), + title: d.nodeinfo.hostname } - var m = L.circleMarker([d.nodeinfo.location.latitude, d.nodeinfo.location.longitude], opt) + var m = L.marker([d.nodeinfo.location.latitude, d.nodeinfo.location.longitude], opt) - m.on('click', gotoAnything.node(d, false)) - m.bindPopup(d.nodeinfo.hostname) + m.on('click', gotoAnything.node(d, false)) + m.bindPopup(d.nodeinfo.hostname) - markersDict[d.nodeinfo.node_id] = m + dict[d.nodeinfo.node_id] = m - return m + return m + } } + var iconBase = { iconUrl: 'img/circlemarker.png', + iconRetinaUrl: 'img/circlemarker@2x.png', + iconSize: [17, 17], + iconAnchor: [8, 8], + popupAnchor: [0, -3] + } + + var iconOnline = Object.assign({}, iconBase) + iconOnline.className = "node-online" + iconOnline = L.icon(iconOnline) + + var iconOffline = Object.assign({}, iconBase) + iconOffline.className = "node-offline" + iconOffline = L.icon(iconOffline) + + var iconNew = Object.assign({}, iconBase) + iconNew.className = "node-new" + iconNew = L.icon(iconNew) + L.control.zoom({ position: "topright" }).addTo(map) L.tileLayer("https://otile{s}-s.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.jpg", { @@ -242,25 +260,12 @@ function mkmap(map, newnodes, lostnodes, onlinenodes, graph, gotoAnything) { var nodes = newnodes.concat(lostnodes).filter(has_location) - var markers = nodes.map( function (d) { - var icon = L.AwesomeMarkers.icon({ markerColor: d.flags.online ? "green" : "red", - icon: d.flags.online ? "lightbulb" : "bug" }) + var markers = nodes.map(mkMarker(markersDict, function (d) { + return d.flags.online ? iconNew : iconOffline + })) - var opt = { icon: icon, - title: d.nodeinfo.hostname - } - - var m = L.marker([d.nodeinfo.location.latitude, d.nodeinfo.location.longitude], opt) - - m.on('click', gotoAnything.node(d, false)) - m.bindPopup(d.nodeinfo.hostname) - - markersDict[d.nodeinfo.node_id] = m - - return m - }) - - var onlinemarkers = subtract(onlinenodes.filter(has_location), newnodes).map(mkCircleNode) + var onlinemarkers = subtract(onlinenodes.filter(has_location), newnodes) + .map(mkMarker(markersDict, function (d) { return iconOnline } )) var groupOnline = L.featureGroup(onlinemarkers).addTo(map) var group = L.featureGroup(markers).addTo(map) diff --git a/img/circlemarker.png b/img/circlemarker.png new file mode 100644 index 0000000000000000000000000000000000000000..71c368993e0aaba4b3d2dea9452c8b1f76e492c7 GIT binary patch literal 618 zcmV-w0+s!VP)qA`~Uy|8FWQhbW?9;ba!ELWdL_~cP?peYja~^ zaAhuUa%Y?FJQ@H10q03XK~y-6m6Oj-Q(+Lre`jvf(p*b0*jy7TBqZ)(Ezf`}SrB4k z;=j1}DR==B6B3MUh;HN^Tq-M8h9D_uTTnys*3#Q=T-YLDYv8QDOlE#LGdZ6aqU9us z$IK@E^`s6eh%u@#lnkn`F12NI?Ujn``f8ZuqpSohmFRkfe;71ESK*& zED2h2KXhoil*v6OD7iH5P&9b;sL^=SpN;yDiE??tVM)?gxo-=O1s#K~pd&a24lpxd zZa$7X8)>=)VEq;P01Kfi@FBaqg;2%)OMv?;Niuy3iKInAOCjtHJM;zEo}iVvF9Fzc zlEe-(az7mAV2~rZ9}>dsdZkjd(I~owd(NSG89-kSO{CmG2$QCEy9D6w*;OEtGJssW zJ!)PkG<(I||Hm#k>18M?6pjqo?FFfHB_~kAJu8{*+LQhLRIu3#(mx3vq%K&HZa92c zs8(ABAon$gqMJ=z24XM)jC7-D4SI=vm!{wD#&HLj^FP^X4zkn*6I5KfDQWd-z5f0b z0{Ua=lV1eh*qEB@Bjb+ literal 0 HcmV?d00001 diff --git a/img/circlemarker@2x.png b/img/circlemarker@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..ea332540d42bbd8cfd327a8d20a6a2c2727eeb44 GIT binary patch literal 1094 zcmV-M1iAZ(P)xRQcG5izkHS4}G)5_^V&cbyG!e%2P9 z)7zcdna_JW``*mLGa@?Z0}i@TDowRptruiAhBVeuc*8?zM7iA3%<}SY0v`y-wKzT_ zn8y7LNym4m^@lFqi{Q>|t#-dJAaljyM9%DegJ~Ub1sz=Qqr2a{RIgVK4KiOWo^!KL zfqd3^a9;z~+*0X<$C@51A#bbK8`;EE^Jz=1^g4tsz7_U z2>_A71R+e~o=a~A`1+Gt?Pjn1iF$cC8OI-IAq1;(UrbhFKS}622$CEpPNV-Upn1a=QKxAPA4FHG2y7XaBkZW;# z#^J4msD=B3enF(-@Bpck=*_l0|{_G{p17{L95>&!F>a>N)kg3(_26sg!^mB z*fFd38zK|1>dBX9?r(ZB`2g@)sq_lciG+G>5UY`qc5r_TAnEvAsWjCEQLA-2W4Jaz zh>nEtC>=&g?9Qu^o=X+(zCLh}c6%co%51C)63k9?71F>#JQG97B7|*5hp17W3d+nk zLEIag8qfEBq>sVf3*8H;(FO4k8k_f3*!E4Yyg-v;*jgh%ilSJPJ%q*6a%+E8-oBy?MhE9Gi+C2O;- zW?g7Dm);v5E;yV8BxwX`$fYL-ty@jXBfW@JOt))Ex68HK!hdadY$v{m>f)lTf*V2zKzgLK(DEkPQ@gZpDbctpFskse@j zFAzm}%toz8gC)2!TdUpODb}6`+>N70%*M07B?zJJW`CCJ^~Hn!mUw35Uok|Eg)}P=UH||9 M07*qoM6N<$f)w!d82|tP literal 0 HcmV?d00001