@morsedigital/mapfit

A module for adding mapfit to a project using data attributes

Add to project

yarn add @morsedigital/mapfit

Add to javascript

import MapFit from '@morsedigital/mapfit';

MapFit('[Mapfit api key]');

Basic setup

<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

If using webpack & babel suggest using the following:

(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:

yarn test

or to rebuild the JS run:

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.