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 0000000..71c3689 Binary files /dev/null and b/img/circlemarker.png differ diff --git a/img/circlemarker@2x.png b/img/circlemarker@2x.png new file mode 100644 index 0000000..ea33254 Binary files /dev/null and b/img/circlemarker@2x.png differ