BatMap

The goal of this tiny lib is to offer a common interface to allow basic usage of multiple map providers.

The only thing that change will be the chosen provider and its API Key. All your map interaction logic will stay the same regardless of the provider chosen. On the other hand, it is possible to overload all methods if it is needed for customization.

Providers available:

References

References documentation

Getting Started

Starter Kit

Integration example

Basics

Set provider

Google Maps
const config = {
    provider: "gmaps",
    apiKey: "API_KEY" | ["CLIENT_ID", "API_KEY_PREMIUM"],
    // ...
};
Mappy
const config = {
    provider: "mappy",
    apiKey: "CLIENT_ID",
    // ...
};
Leaflet
const config = {
    provider: "leaflet",
    // ...
};

Set options

const config = {
    provider: 'provider',
    apiKey: 'api_key',
    locale: 'en',
    locations: [...],
    showCluster: true,
    showLabel: true,
    showPosition: true,
    options: {
        zoom: 12,
        locationZoom: 16,
    },
    markers: {
        default: {
            url: 'marker-default.svg',
            width: 38,
            height: 50
        }
    },
    labels: {
        origin: [19, 19],
        color: 'white',
        font: 'Arial, sans-serif',
        size: '14px',
        weight: 'normal'
    },
    clusters: {}
};

Usage

  1. Add the provider script.

  2. Create a new map instance and display it.

const map = new window.GoogleMap(
    "#my-map",
    config.apiKey,
    config.locale,
    config.showCluster,
    config.showLabel,
    config.showPosition,
    callback
);

function callback() {
    map.setMapOptions(
        config.options,
        config.markers,
        config.labels,
        config.clusters
    );

    map.init();

    map.setMarkerIcons();

    [].forEach.call(config.locations, (location) => {
        map.setPoint(location, "default");
    });

    map.addMarkers({
        click: handleClickOnMarker,
    });

    map.fitBounds(map.getBounds(), config.options.zoom);
}

function handleClickOnMarker(marker) {
    return () => {
        map.focusOnMarker(marker);
    };
}