diff --git a/Leaflet.MakiMarkers.js b/Leaflet.MakiMarkers.js deleted file mode 100644 index a3a496c..0000000 --- a/Leaflet.MakiMarkers.js +++ /dev/null @@ -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); - }; -})(); diff --git a/history.html b/history.html index 7c42cf5..c639992 100644 --- a/history.html +++ b/history.html @@ -34,11 +34,11 @@ } .hostname.online { - color: #0A905D; + color: #558020; } .hostname.offline { - color: #E42426; + color: #D43E2A; } #map { @@ -120,11 +120,13 @@ } } - + + + - + diff --git a/history.js b/history.js index 6bc0fc8..7768b57 100644 --- a/history.js +++ b/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", - fillColor: "#0A905D", - radius: 5 + var opt = { color: "#76B22D", + fillColor: "#76B22D", + radius: 5, + opacity: 0.7, + fillOpacity: 0.5 } var m = L.circleMarker([d.nodeinfo.location.latitude, d.nodeinfo.location.longitude], opt)