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 = createAmplifyGeocoder();
  map.addControl(geocoder);

Using Custom Icon with drawPoints

import spiderManIcon from "./spiderman.svg"
...
const icon = new Image(100, 100);
icon.src = spiderManIcon;

map.on("load", function () {
  drawPoints(
    'mySourceName',
    [
      {
        coordinates: [-122.477, 37.8105],
      },
    ],
    map,
    {
      unclusteredOptions: {
        markerImageElement: icon,
      }
    }
  );
});

Deeper dive

API Documentation

See API.md for complete reference.

Examples

See FIXME.

Contributing

See CONTRIBUTING.md.