map-fanbox-points v0.0.5

map-fanbox-points

Description

FAN Courier map library with locations and pick up points, built-in with ReactJs, Leaflet & MUI.

Installation

Using a Hosted Version

The latest stable release is available on several CDN’s — to start using it straight away, place this in the head of your HTML code or at the end of your body.

<script src="https://unpkg.com/map-fanbox-points@latest/umd/map-fanbox-points.js" crossorigin defer></script>

Using a Downloaded Version

Inside the archives downloaded from the above links, you will see:

• /umd/map-fanbox-points.js - The UMD build, suitable for use in the browser via a script tag. The script inject a global function to the window called LoadMapFanBox.

Unzip the downloaded archive to your website’s directory and add this to the head of your HTML code:

<script src="/path/to/map-fanbox-points.js" defer></script>

Using a JavaScript package manager

If you use the npm package manager, you can fetch a local copy of package by running:

$ npm install map-fanbox-points

Usage

After installing the library and importing, you can use it into your project as follow:

<script type="module">
    const defaultCounty = "Arad";
    const defaultLocality = "Arad";

    let selectedPickUpPoint = null;
    window.addEventListener("map:select-point", event => {
        selectedPickUpPoint = event.detail.item;
        // you can store the selected pick up point on your side
    });

    const rootNode = document.getElementById("mapDiv");

    const btn = document.getElementById("openMap");
    btn.addEventListener("click", () => {

    window.LoadMapFanBox({
          pickUpPoint: selectedPickUpPoint,
          county: defaultCounty,
          locality: defaultLocality,
          rootNode,
          // rootId = mapDiv
        });
    });

</script>

async click() {
      const { LoadApp } = await import('map-fanbox-points')
      const config: LoadAppProps = {
        county: 'Bucuresti',
        locality: 'Bucuresti',
        rootId: 'mapRootId'
      }

      if (this.selectedItem) {
        config.pickUpPoint = this.selectedItem
      }

      LoadApp(config)
    }

!NOTE The window.LoadMapFanBox and LoadApp function will load the map in a modal. The functions has the following parameters:

• pickUpPoint - the selected pick up point
• county - the default county
• locality - the default locality
• rootNode - the root node where the map will be rendered
• rootId - the root id where the map will be rendered

The rootNode or rootId should be provided to render the map.

!NOTE The CustomEvent name that listen for selected point is: map:select-point

window.addEventListener("map:select-point", event => {
  const pickUpPoint: PickUpPoint = event.detail.item;
});

type PickUpPoint = {
  id: string;
  name: string;
  description: string;
  address: string;
  latitude: number;
  longitude: number;
  schedule: string;
  countyId: number;
  localityId: number;
};

License

This library is MIT licensed.