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>

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

Install with npm

Install it with npm like so:

npm install ig_markerfactory

Install with JSPM

Or include it in your JSPM/SystemJS project doing:

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.

AMD Style

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

	console.log(myIcon);
});

CommonJS Style

Require the library it with CommonJS format.

var MarkerFactory = require("ig_markerfactory");
var myIcon = MarkerFactory.autoIcon({
	label: "f1b9",
	font: "FontAwesome",
	color: "#CC0000",
	fontsize: 20
});

console.log(myIcon);

ES6 Style

If you're using an ES6 module bundler/transpiler (and you should!) import the ES6 version doing:

import { MarkerFactory } from "ig_markerfactory/dist/markerfactory.es6";

const 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

huasofoundries / ig_markerfactory Goto Github PK