SVG for circle markers

[cthurston]

Google maps has circle markers with icons for gas stations and the like. How difficult would it be to add a option to create a circle icon instead?

[jawj]

Shouldn't be too hard — we'd just need switchable SVG templates and transforms. When I get a bit of time I may try it.

[cthurston]

I don't have a typescript build environment setup, but here is what I did to the compiled code to have circles and stroke width:

Added a circle path function:

//https://stackoverflow.com/questions/5737975/circle-drawing-with-svgs-arc-path
function circlePath(cx, cy, r) {
	return 'M' + cx + ',' + cy + 'm' + (r) + ',0' + 'a' + r + ',' + r + ' 0 1,1 ' + (-r * 2) + ',0' + 'a' + r + ',' + r + ' 0 1,1 ' + (r * 2) + ',0';
}

Changed the svg template and added the default stroke width:

var svgTemplate = ...<path d="`markerPath`" stroke="`stroke`" stroke-width="`strokeWidth`"...

var defaultStrokeWidth = 0.6;

Made the original path default and overwrite if they wanted a circle (also allowing cx, cy and radius as parameters--I had to play with those for a while to get it looking correct):

var markerPath = 'M22 11c0 1.42-.226 2.585-.677 3.496l-7.465 15.117c-.218.43-.543.77-.974 1.016-.43.246-.892.37-1.384.37-.492 0-.954-.124-1.384-.37-.43-.248-.75-.587-.954-1.017L1.677 14.496C1.227 13.586 1 12.42 1 11c0-2.76 1.025-5.117 3.076-7.07C6.126 1.977 8.602 1 11.5 1c2.898 0 5.373.977 7.424 2.93C20.974 5.883 22 8.24 22 11z';

//This must go above the scaling:
if(_b.circle) {
	markerPath = circlePath(_b.cx || 11.44, _b.cy || 10.9, _b.radius || 10.6);
	originalHeight = originalWidth
}

Add parameters to the template:

var svg = applyTemplate(svgTemplate, {
			markerPath: markerPath,
			width: width,
			height: height,
			scale: scale,
			fill: processColor(fill),
			stroke: processColor(stroke),
			strokeWidth: strokeWidth,