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