92 lines
2.1 KiB
JavaScript
92 lines
2.1 KiB
JavaScript
/*
|
|
* LEAFLET.BOATMARKER
|
|
* v1.0.0
|
|
* Thomas Brüggemann
|
|
*/
|
|
|
|
/* BOAT ICON */
|
|
L.BoatIcon = L.Icon.extend({
|
|
options: {
|
|
iconSize: new L.Point(50, 50),
|
|
className: "leaflet-boat-icon",
|
|
course: 0,
|
|
color: "#8ED6FF",
|
|
labelAnchor: [25, 25],
|
|
wind: false,
|
|
windDirection: 0,
|
|
windSpeed: 0
|
|
},
|
|
|
|
x: 22,
|
|
y: 38,
|
|
x_fac: 0.09,
|
|
y_fac: 0.09,
|
|
ctx: null,
|
|
lastHeading: 0,
|
|
lastWindDirection: 0,
|
|
|
|
createIcon: function () {
|
|
var e = document.createElement("canvas");
|
|
this._setIconStyles(e, "icon");
|
|
var s = this.options.iconSize;
|
|
e.width = s.x;
|
|
e.height = s.y;
|
|
this.ctx = e.getContext("2d");
|
|
this.draw(e.getContext("2d"), s.x, s.y);
|
|
return e;
|
|
},
|
|
|
|
createShadow: function () {
|
|
return null;
|
|
},
|
|
|
|
draw: function(ctx, w, h) {
|
|
if(!ctx) return;
|
|
var x = this.x;
|
|
var y = this.y;
|
|
|
|
var x_fac = this.x_fac;
|
|
var y_fac = this.y_fac;
|
|
|
|
ctx.clearRect(0, 0, w, h);
|
|
|
|
ctx.translate(w/2, h/2);
|
|
ctx.rotate(this.options.course*Math.PI/180);
|
|
ctx.translate(-w/2, -h/2);
|
|
|
|
//ctx.fillRect(0,0,w,h);
|
|
|
|
// draw boat
|
|
ctx.beginPath();
|
|
ctx.moveTo(x, y);
|
|
ctx.bezierCurveTo(x, y+(80*y_fac), x+(100*x_fac), y+(80*y_fac), x+(100*x_fac), y);
|
|
ctx.quadraticCurveTo(x+(100*x_fac), y-(100*y_fac), x+(50*x_fac), y-(200*y_fac));
|
|
ctx.quadraticCurveTo(x, y-(100*y_fac), x, y);
|
|
ctx.fillStyle = this.options.color;
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
ctx.closePath();
|
|
|
|
},
|
|
|
|
setHeading: function(heading) {
|
|
this.options.course = (heading % 360) - this.lastHeading;
|
|
this.lastHeading = heading % 360;
|
|
|
|
var s = this.options.iconSize;
|
|
this.draw(this.ctx, s.x, s.y);
|
|
}
|
|
});
|
|
|
|
L.BoatMarker = L.Marker.extend({
|
|
setHeading: function(heading) {
|
|
this.options.icon.setHeading(heading);
|
|
}
|
|
});
|
|
|
|
L.boatMarker = function(pos, options) {
|
|
var c = ("color" in options) ? options.color : "#f1c40f";
|
|
options.icon = new L.BoatIcon({ color: c});
|
|
return new L.BoatMarker(pos, options);
|
|
};
|