node-red-contrib-jwht-map/worldmap/leaflet/leaflet.boatmarker.js

/*
 * 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);
};