mojodna / maplibre-gl-js-amplify

Maplibre GL JS Amplify

A plugin for maplibre-gl-js for integration with Amplify Geo.

Reporting Bugs/Feature Requests

Usage

yarn add maplibre-gl-js-amplify

Using AmplifyMapLibreRequest to Display a Map

import { createMap } from "maplibre-gl-js-amplify";
import Amplify from "aws-amplify";
import awsconfig from './aws-exports';

Amplify.configure(awsconfig);
...
  const map = await createMap({
        container: "map", // An HTML Element or HTML element ID to render the map in https://maplibre.org/maplibre-gl-js-docs/api/map/
        center: [-123.1187, 49.2819],
        zoom: 11,
        region: "us-west-2"
  })

Using AmplifyGeocoderAPI with maplibre-gl-geocoder

import Amplify from "aws-amplify";
import { AmplifyGeocoderAPI } from "maplibre-gl-js-amplify";
import awsconfig from './aws-exports';
import maplibregl from "maplibre-gl";
import MaplibreGeocoder from "@maplibre/maplibre-gl-geocoder";
import "@maplibre/maplibre-gl-geocoder/dist/maplibre-gl-geocoder.css";

Amplify.configure(awsconfig);
...
  const geocoder = new MaplibreGeocoder(AmplifyGeocoderAPI, {
    maplibregl: maplibregl,
  });
  map.addControl(geocoder);

Deeper dive

API Documentation

See API.md for complete reference.

Examples

See FIXME.

Contributing

See CONTRIBUTING.md.