Fragment Map

Simple, composable, convenience Factories written in ES2015. Useful for generating and outputting basic Google Maps (V3 api). Library is split up so that you only include the functionality that you need. Future/Extra features may be composed as required. (See example for one way this may be done).

Typical Usage

Composing the Factories will look something like:

import { FragmentMap, FragmentMapMarker } from "fragment-map"

You will need some kind of event system in order to react to map interactions. Nodes default EventEmitter will suffice.

import { EventEmitter } from "events"

// Create Dispatcher
const dispatcher = new EventEmitter()

Then compose away...

const ComposedFragmentMap = Object.assign(
	{},
	FragmentMap(config, mapOptions),
	FragmentMapMarker(markerConfig, dispatcher)
)

Usage will look something like:

let mapInstance

ComposedFragmentMap
	.load()
	.then(function() {
		mapInstance = ComposedFragmentMap.drawMap()
		ComposedFragmentMap.addMarkers(sampleMarkers, mapInstance)
	})
	.catch(function(e) {
		setTimeout( () => { throw e } ) // stops the promises eating the Errors!
	})

Basic Map Factory

FragmentMap(config, mapOptions)

• Can load the Google Maps SDK asynchronously.
• Can draw a map.

Config:

config {object}:

config: {
	containerID : "map-canvas",
	apiKey      : "GOOGLE_MAPS_API_KEY"
}

mapOptions {object}: This may contain any valid GoogleMaps options, it defaults to the below:

{
	center : { lat: 52.48485, lng: -1.91064}, // 383
	zoom   : 10
}

Methods:

- load() Loads the API asynchronously (via google-maps) returning a native Promise, resolved when loaded.

- drawMap() Performs the drawing of the map and returns the instance. (uses default mapOptions if none passed)

Marker Factory

FragmentMapMarker(markerConfig, dispatcher)

This Factory adds a few more advanced features:

• can add custom map markers
• can set containing map bounds to markers
• can trigger of marker "clicks" via provided dispatcher

Config:

markerConfig {object}:

{
	iconDir    : **path to your icons here**,
	iconLookup : {
		"basic" : {
			filename     : "basic.png",
			width        : 50,
			height       : 50
		},
		"basic-alt" : {
			filename     : "basic-alt.png",
			width        : 50,
			height       : 50
		}
	},
	boundsZoom : true
}

• iconDir {string} absolute path to the directory where your icon files are kept
• iconLookup {object} lookup marker info per marker instance, (key === marker.type)
• boundsZoom {bool} Optional - allow map to zoom to contain all markers

Data:

markers {array}:

const markers = [
	{
		"id"   : "UNIQUE_ID1",
		"lat"  : "52.49485",
		"lon"  : "-1.94064",
		"type" : "basic"
	},
	{
		"id"   : "UNIQUE_ID2",
		"lat"  : "52.39485",
		"lon"  : "-1.84064",
		"type" : "basic"
	}
]

The type property of each marker will be used to find the correct marker file from the iconDir via the iconLookup dict.

Methods:

- addMarkers(markers, mapInstance) Adds markers to the mapInstance provided by the passed-in collection of marker objects

Example

The included example (which also shows you how to compose custom functionality) will directly use the src files. To run, just follow the steps below.

1 - Install dependancies via:

npm install

2 - Run the webpack dev server via:

npm start

3 - Visit the dev server at:

http://localhost:8080/webpack-dev-server/

(lib is pre-transplied to compliant ES5)

Tests

To follow...