history: marker and colortheme changes

Leaflet.MakiMarkers.js

@@ -1,108 +0,0 @@
-/*
- * Leaflet plugin to create map icons using Maki Icons from MapBox.
- *
- * References:
- *   Maki Icons: https://www.mapbox.com/maki/
- *   MapBox Marker API: https://www.mapbox.com/developers/api/static/#markers
- *
- * Usage:
- *   var icon = L.MakiMarkers.icon({icon: "rocket", color: "#b0b", size: "m"});
- *
- * License:
- *   MIT: http://jseppi.mit-license.org/
- */
- /*global L:false */
-(function () {
-  "use strict";
-  L.MakiMarkers = {
-    // Available Maki Icons
-    icons: ["airfield","airport","alcohol-shop","america-football","art-gallery","bakery","bank","bar",
-      "baseball","basketball","beer","bicycle","building","bus","cafe","camera","campsite","car",
-      "cemetery","chemist","cinema","circle-stroked","circle","city","clothing-store","college",
-      "commercial","cricket","cross","dam","danger","disability","dog-park","embassy",
-      "emergency-telephone","entrance","farm","fast-food","ferry","fire-station","fuel","garden",
-      "golf","grocery","hairdresser","harbor","heart","heliport","hospital","industrial",
-      "land-use","laundry","library","lighthouse","lodging","logging","london-underground",
-      "marker-stroked","marker","minefield","mobilephone","monument","museum","music","oil-well",
-      "park2","park","parking-garage","parking","pharmacy","pitch","place-of-worship",
-      "playground","police","polling-place","post","prison","rail-above","rail-light",
-      "rail-metro","rail-underground","rail","religious-christian","religious-jewish",
-      "religious-muslim","restaurant","roadblock","rocket","school","scooter","shop","skiing",
-      "slaughterhouse","soccer","square-stroked","square","star-stroked","star","suitcase",
-      "swimming","telephone","tennis","theatre","toilets","town-hall","town","triangle-stroked",
-      "triangle","village","warehouse","waste-basket","water","wetland","zoo"
-    ],
-    defaultColor: "#0a0",
-    defaultIcon: "circle-stroked",
-    defaultSize: "m",
-    apiUrl: "https://api.tiles.mapbox.com/v3/marker/",
-    smallOptions: {
-      iconSize: [20, 50],
-      popupAnchor: [0,-20]
-    },
-    mediumOptions: {
-      iconSize: [30,70],
-      popupAnchor: [0,-30]
-    },
-    largeOptions: {
-      iconSize: [36,90],
-      popupAnchor: [0,-40]
-    }
-  };
-
-  L.MakiMarkers.Icon = L.Icon.extend({
-    options: {
-      //Maki icon: any from https://www.mapbox.com/maki/ (ref: L.MakiMarkers.icons)
-      icon: L.MakiMarkers.defaultIcon,
-      //Marker color: short or long form hex color code
-      color: L.MakiMarkers.defaultColor,
-      //Marker size: "s" (small), "m" (medium), or "l" (large)
-      size: L.MakiMarkers.defaultSize,
-      shadowAnchor: null,
-      shadowSize: null,
-      shadowUrl: null,
-      className: "maki-marker"
-    },
-
-    initialize: function(options) {
-      var pin;
-
-      options = L.setOptions(this, options);
-
-      switch (options.size) {
-        case "s":
-          L.extend(options, L.MakiMarkers.smallOptions);
-          break;
-        case "l":
-          L.extend(options, L.MakiMarkers.largeOptions);
-          break;
-        default:
-          options.size = "m";
-          L.extend(options, L.MakiMarkers.mediumOptions);
-          break;
-      }
-
-
-      pin = "pin-" + options.size;
-
-      if (options.icon !== null) {
-        pin += "-" + options.icon;
-      }
-
-      if (options.color !== null) {
-        if (options.color.charAt(0) === "#") {
-          options.color = options.color.substr(1);
-        }
-
-        pin += "+" + options.color;
-      }
-
-      options.iconUrl = "" + L.MakiMarkers.apiUrl + pin +  ".png";
-      options.iconRetinaUrl = L.MakiMarkers.apiUrl + pin + "@2x.png";
-    }
-  });
-
-  L.MakiMarkers.icon = function(options) {
-    return new L.MakiMarkers.Icon(options);
-  };
-})();

history.html

@@ -34,11 +34,11 @@
       }
 
       .hostname.online {
-        color: #0A905D;
+        color: #558020;
       }
 
       .hostname.offline {
-        color: #E42426;
+        color: #D43E2A;
       }
 
       #map {
@@ -120,11 +120,13 @@
         }
       }
     </style>
-    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
+    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
     <link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
+    <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css">
+    <link href='https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css' rel='stylesheet' type='text/css'>
     <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
     <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
-    <script src="Leaflet.MakiMarkers.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.min.js"></script>
     <script src="history.js"></script>
   </head>
   <body>

history.js

@@ -1,3 +1,5 @@
+L.AwesomeMarkers.Icon.prototype.options.prefix = 'ion'
+
 document.addEventListener('DOMContentLoaded', main)
 
 function get(url) {
@@ -133,7 +135,8 @@ function mkmap(map, newnodes, lostnodes, onlinenodes) {
   })
 
   var markers = nodes.map( function (d) {
-    var icon = L.MakiMarkers.icon({ color: d.flags.online ? "#0A905D" : "#E42426" })
+    var icon = L.AwesomeMarkers.icon({ markerColor: d.flags.online ? "green" : "red",
+                                       icon: d.flags.online ? "lightbulb" : "bug" })
 
     var opt = { icon: icon }
 
@@ -145,9 +148,11 @@ function mkmap(map, newnodes, lostnodes, onlinenodes) {
   })
 
   var onlinemarkers = onlinenodes.map( function (d) {
-    var opt = { color: "#0A905D",
+    var opt = { color: "#76B22D",
-                fillColor: "#0A905D",
+                fillColor: "#76B22D",
-                radius: 5
+                radius: 5,
+                opacity: 0.7,
+                fillOpacity: 0.5
               }
 
     var m = L.circleMarker([d.nodeinfo.location.latitude, d.nodeinfo.location.longitude], opt)