Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/huasofoundries/ig_markerfactory
Uses canvas to dynamically generate marker images suitable for use with google maps
https://github.com/huasofoundries/ig_markerfactory
canvas font graphic-fonts icons javascript jspm rollup
Last synced: about 1 month ago
JSON representation
Uses canvas to dynamically generate marker images suitable for use with google maps
- Host: GitHub
- URL: https://github.com/huasofoundries/ig_markerfactory
- Owner: HuasoFoundries
- License: mit
- Created: 2016-02-01T12:10:08.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2023-03-26T14:39:04.000Z (almost 2 years ago)
- Last Synced: 2024-11-16T22:47:13.533Z (about 2 months ago)
- Topics: canvas, font, graphic-fonts, icons, javascript, jspm, rollup
- Language: JavaScript
- Homepage: http://huasofoundries.github.io/ig_markerfactory/
- Size: 1.49 MB
- Stars: 3
- Watchers: 10
- Forks: 0
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# IG MarkerFactory
This is a zero dependencies library that uses a canvas element to generate valid [google.maps.Marker](https://developers.google.com/maps/documentation/javascript/3.exp/reference#Marker) Icons from graphic-fonts, such as [Font-Awesome](https://fontawesome.github.io/Font-Awesome/), [Material-Icons](https://material.io/icons/) or [Fontello](http://fontello.com/).
[](https://travis-ci.org/HuasoFoundries/ig_markerfactory)
[](https://codeclimate.com/github/HuasoFoundries/ig_markerfactory)
[](https://www.codacy.com/app/amenadiel/ig_markerfactory)
[](https://www.npmjs.com/package/ig_markerfactory)
[](https://scrutinizer-ci.com/g/HuasoFoundries/ig_markerfactory/?branch=master)
[](https://scrutinizer-ci.com/g/HuasoFoundries/ig_markerfactory/?branch=master)
## Why?
Because some libraries, like google maps API, expect its Markers to have an valid [google.maps.Icon](https://developers.google.com/maps/documentation/javascript/3.exp/reference#Icon) to be shown on the map:
```js
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)
```js
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/](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](https://unpkg.com/#/) or [jsdelivr](https://www.jsdelivr.com/)
```html
```
**or**
```html
```
### Install with npm
Install it with npm like so:
```sh
npm install ig_markerfactory
```
### Install with [JSPM](https://github.com/jspm/jspm-cli)
Or include it in your [JSPM](https://github.com/jspm/jspm-cli)/[SystemJS](https://github.com/systemjs/systemjs) project doing:
```sh
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
```js
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.
```js
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:
```js
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](https://developers.google.com/maps/documentation/javascript/3.exp/reference#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](https://developer.mozilla.org/en-US/docs/Web/HTTP/data_URIs)