ig_markerfactory

IG MarkerFactory

This is a zero dependencies library that uses a canvas element to generate valid google.maps.Marker Icons from graphic-fonts, such as Font-Awesome, Material-Icons or Fontello.

Why?

Because some libraries, like google maps API, expect its Markers to have an valid google.maps.Icon to be shown on the map:

	var mymarker = new google.maps.Marker({
		position: myMap.getCenter(),
		map: myMap
	});

	mymarker.setIcon({
		url: '/img/some_image.png',
		size: new google.maps.Size(54 , 48 ),
		origin: new google.maps.Point(0, 0),
		anchor: new google.maps.Point(27 , 24 )
	});

(Actually, it would be enough to set)

    mymarker.setIcon('/img/some_image.png');

But still, you need an image. You'll need to host every icon and color combination thay might ever be.

With MarkerFactory, you generate those icons on the fly.

Example

See the example running at http://huasofoundries.github.io/ig_markerfactory/ and you'll be presented with three graphical fonts variations, both in their CSS render as well as their PNG rendering generated by IG_Markerfactory.

Feel free to play with examples/example.js to see what happens when you try different colors, icons and scales.

Installation

Including it with a script tag

Include this package in your HTML file directly with a script tag using unpkg or jsdelivr

<script src="https://unpkg.com/ig_markerfactory/dist/markerfactory.min.js"></script>

or

<script src="https://cdn.jsdelivr.net/npm/ig_markerfactory/dist/markerfactory.min.js"></script>

Install it with jspm like so:

jspm install npm:ig_markerfactory

Usage

This is a simple example using AMD loading. It assumes you're using a font that's already present in the DOM.

define(['ig_markerfactory'], function(MarkerFactory) {
	var myIcon = MarkerFactory.autoIcon({
		label: 'f1b9',
		font: 'FontAwesome',
		color: '#CC0000',
		fontsize: 20
	});

	console.log(myIcon);

});

You will see that myIcon object is a valid google.maps.Icon object, but of course you might want the image for other purposes so you can just use myIcon.url which is a data URI