tinyMap: Canvas marker icon

by essoduke chang

HTML

<script src="http://app.essoduke.org/js/tinyMap/jquery.tinyMap-3.3.4.min.js"></script>
<div id="map" class="map"></div>

CSS

.map{width:100%;height:100vh}

JavaScript

var map = $('#map');
var r = 0;
var hex2rgba = function (hex, alpha) {
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return 'rgba(' + [
        parseInt(result[1], 16),
        parseInt(result[2], 16),
        parseInt(result[3], 16),
        alpha || 1
    ].join(',') + ');';
};

var drawCanvas = function (c1Color, c2Color, c3Color) {
    var canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d'),
        c1  = hex2rgba(c1Color),
        c2  = hex2rgba(c2Color),
        c3  = hex2rgba(c3Color);
        
    //Shape7;
    ctx.shadowColor ="rgba(0,0,0,0)";
    ctx.strokeStyle ="rgba(0,0,0,1)";
    ctx.lineWidth = 1;
    ctx.lineCap = "butt";
    ctx.lineJoin = "miter";
    ctx.beginPath();
    ctx.moveTo(95,24);
    ctx.bezierCurveTo(110,24,123,35,123,50);
    ctx.bezierCurveTo(123,64,110,75,95,75);
    ctx.bezierCurveTo(79,75,66,64,66,50);
    ctx.bezierCurveTo(66,35,79,24,95,24);
    ctx.closePath();
    ctx.stroke();
    ctx.shadowOffsetX = 15;
    ctx.shadowOffsetY = 15;
    ctx.shadowBlur = 0;
    ctx.shadowColor = "rgba(0,0,0,0)";
    ctx.fillStyle = c1;
    ctx.fill();

    //Shape8;
    ctx.shadowColor ="rgba(0,0,0,0)";
    ctx.strokeStyle ="rgba(0,0,0,1)";
    ctx.lineWidth = 1;
    ctx.lineCap = "butt";
    ctx.lineJoin = "miter";
    ctx.beginPath();
    ctx.moveTo(92,51);
    ctx.lineTo(92,51);
    ctx.lineTo(92,51);
    ctx.lineTo(92,51);
    ctx.lineTo(92,51);
    ctx.closePath();
    ctx.stroke();
    ctx.shadowOffsetX = 15;
    ctx.shadowOffsetY = 15;
    ctx.shadowBlur = 0;
    ctx.shadowColor = "rgba(0,0,0,0)";
    ctx.fillStyle = "rgba(255,255,255,1)";
    ctx.fill();

    //Shape9;
    ctx.shadowColor ="rgba(0,0,0,0)";
    ctx.strokeStyle ="rgba(0,0,0,1)";
    ctx.lineWidth = 1;
    ctx.lineCap = "butt";
    ctx.lineJoin = "miter";
    ctx.beginPath();
    ctx.moveTo(68,40);
    ctx.bezierCurveTo(83,40,96,51,96,66);
    ctx.bezierCurveTo(96,80,83,91,68,91);
   ...