history: marker and colortheme changes
This commit is contained in:
Nils Schneider
parent
f31c0650e4
commit
376c6feac7
|
|
@ -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);
|
||||
};
|
||||
})();
|
||||
10
history.html
10
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>
|
||||
|
|
|
|||
13
history.js
13
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)
|
||||
|
|
|
|||
Reference in New Issue