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:

UMD
<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 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>

UMD

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

ES
async click() { const { LoadMap } = await import('map-fanbox-points') const config: LoadMapProps = { county: 'Bucuresti', locality: 'Bucuresti', rootId: 'mapRootId' } if (this.selectedItem) { config.pickUpPoint = this.selectedItem } LoadMap(config) }

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

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

      LoadMap(config)
    }

NOTE: The functions window.LoadMapFanBox and LoadMap will load the map with following parameters:

interface LoadMapProps {
  pickUpPoint?: PickUpPoint; // the selected point
  county?: string; // the default county
  locality?: string; // the default locality
  rootNode?: HTMLDivElement; // the root node where the map will be rendered
  rootId?: string; // the root id where the map will be rendered
  variant?: 'preview' | 'modal'; // the map variant (default: 'modal')
  enableMultiplePointTypes?: boolean; // enable multiple point types (default: false; will be visible only the Lockers)
  themeMode?: 'light' | 'dark' | 'system'; // theme mode (default: 'light')
}

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.

Getting Involved

Send suggestions for changes to the source Alexandru Grigore & Fan Courier team.

Alexandru Grigore