IG MarkerFactory: uses a canvas element to create images on the fly, specially taylored for Google Maps API.
Uses canvas to dynamically generate marker images suitable for use with google maps. It
renders nice looking badges in the front by combining overlaying text on top of canvas
rendered background. Those text can be SVG images such as Font-Awesome, Fontello, etc.
Installation
Install it with jspm like so:
jspm install github:huasofoundries/ig_markerfactory
If you don't use jspm, you can as well clone this repo and copy
dist/markerfactory.js
to your project.
Usage
This is a simple example using AMD loading:
define(['huasofoundries/ig_markerfactory'], function(MarkerFactory) {
var myIcon = MarkerFactory.autoIcon({
label: 'f1b9',
font: 'fontawesome-webfont',
color: '#CC0000',
fontsize: 20
});
console.log(myIcon);
});
The 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
Examples:
define(['huasofoundries/ig_markerfactory'], function(MarkerFactory) {
var myIcon = MarkerFactory.autoIcon({
label: 'f1b9',
font: 'fontawesome-webfont',
color: '#CC0000',
fontsize: 20
});
console.log(myIcon);
});
You'll see that myimage.url
is a data url you can use as the SRC attribute of the image.