npm package: @morsedigital/mapfit
Description: [![Build Status](https://semaphoreci.com/api/v1/projects/ceb3f12b-9d3d-4edc-9771-eca53fb70ad4/2098972/badge.svg)](https://semaphoreci.com/djforth/mapfit)
Author: Adrian Stainforth
Latest version: 2.1.0

# @morsedigital/mapfit

[![Build Status](https://semaphoreci.com/api/v1/projects/ceb3f12b-9d3d-4edc-9771-eca53fb70ad4/2098972/badge.svg)](https://semaphoreci.com/djforth/mapfit)

A module for adding [mapfit](https://www.mapfit.com/) to a project using data attributes

## Add to project

```
yarn add @morsedigital/mapfit
```

## Add to javascript

```javascript
import MapFit from '@morsedigital/mapfit';

MapFit('[Mapfit api key]');
```

## Basic setup


```html
<div class="map-holder map-holder--static">
  <div id="map-fit" class="map-fit" data-markers="[marker data]" data-map="true" data-custom-icon="{icon data}" data-zoom="12" >
  </div>
</div>
```

Options:
```
data-zoom : integer - sets zoom level

data-center : [lat, lng] - sets map center

data-static : boolean - removes buttons and movement options

data-custom-icon : Object: {anchor: [n, n], height: n, width: n, url:image_path}

data-markers : Array: [
  marker: {
    position: [lat, lng]
  },
  placeInfo: {
    content: 'html for placeholder',
    title: 'Title of place', // Will not show if content there
    description: 'Description of place', // Will not show if content there
    directionsBtn: boolean // Show direction button - will not show if content there.
  }
]

data-markers-url : String: Path to markers json. 
```

## Notes on Ajax call

Json should remain in the same structure as data-markers:
```
Array: [
  marker: {
    position: [lat, lng]
  },
  placeInfo: {
    content: 'html for placeholder',
    title: 'Title of place', // Will not show if content there
    description: 'Description of place', // Will not show if content there
    directionsBtn: boolean // Show direction button - will not show if content there.
  }
]
```
The json is used with fetch api. If your supporting browsers that don't support fetch it is suggested to use [whatwg-fetch](https://www.npmjs.com/package/whatwg-fetch)

If using webpack & babel suggest using the following:

```javascript
(function(){
  // Loads Fetch pollyfill
  const loadFetchPollyFill = ()=>import(/* webpackChunkName: "whatwg-fetch" */ 'whatwg-fetch');

  if (!('fetch' in window)){
    loadFetchPollyFill();
  }
})();
```

N.B. Remember to add https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import/ if using babel.

# Bug reports

If you discover any bugs, feel free to create an issue on GitHub. Please add as much information as possible to help us fixing the possible bug. We also encourage you to help even more by forking and sending us a pull request.

https://github.com/morsedigital/mapfit/issues

## Contribute

If you'd like to contribute, Mapfit is written using rollup & babel.

Please make sure any additional code should be covered in tests (Jest)

If you need to run the test please use:

``` bash

yarn test

```

or to rebuild the JS run:

``` bash

yarn build

```

## Maintainers

Adrian Stainforth (https://github.com/djforth)

# License

@morsedigital/mapfit is an open source project falling under the MIT License. By using, distributing, or contributing to this project, you accept and agree that all code within the URLParser project are licensed under MIT license.