Skip to main content

Stage 1 - Map Interface Installation

Step 0 - Download chrome extension​

To check in the future whether the installation was successful, you first need to install the MapGrab Inspector extension for the Google Chrome (or any Chromium-based) browser. To install the extension, go to the Chrome Web Store. Once the extension is installed, navigate to the page containing the map for which you want to install the interface. At this point, the installed extension's icon should be gray—don’t worry, this is normal for now. It will change soon!

This is what the extension icon should look like in your browser’s toolbar.

alt text

Step 1 - Package installation​

To install package run below command

npm --save @mapgrab/map-interface

Step 4 - Interface installation​

info

To optimize the size of your application for end users, we recommend using lazy loading for the interface.

  import { Map } from 'maplibre-gl';
  
  function initMap(): void {
    const map = new Map({
      container: 'map',
      style: 'https://demotiles.maplibre.org/style.json',
      center: [0, 0],
      zoom: 1,
      attributionControl: false,
      clickTolerance: 5,
    });

    // process.env.RUN_ONLY_IN_TEST_ENV is given as an example
    if (process.env.RUN_ONLY_IN_TEST_ENV) {
      import('@mapgrab/map-interface').then(({ installMapGrab }) => {
        installMapGrab(map, 'mainMap');
      });
    }
  }

Step 5 - Verify the MapGrab interface using the extension​

Now, check if the MapGrab Inspector extension icon has changed color. If it has, this means the interface has been installed correctly. When you click on the extension icon, the map inspector should initialize.

alt text