hamuga-imap-sdk

v0.0.2

Published

15 days ago

> **Note:** The Hamuga iMap JS SDK has a peer dependency on [maplibre-gl-js](https://github.com/maplibre/maplibre-gl-js).

0High
0Medium
0Low

developer_ict

Installation and Usage

With npm

Note: The Hamuga iMap JS SDK has a peer dependency on maplibre-gl-js.

Add the hamuga-imap-sdk and maplibre-gl packages

# with npm
npm install --save hamuga-imap-sdk maplibre-gl

Then import as an ES Module in your project

import HamugaImap from "hamuga-imap-sdk";
import "hamuga-imap-sdk/dist/hamuga-imap.min.css";

// === initialize with your API KEY key ===
HamugaImap.initialize({
  debug: true, // or false
  apiKey: "HAMUGA_IMAP_API_KEY",
  theme: "dark", // or 'light'
});

// === Create Map ===
mapRef.current = HamugaImap.ui.map({
  container: "map",
  center: [106.9, 47.9],
  zoom: 12,
  attributionControl: false,
});

// === Add Map Controls

// Get Maplibre
mlRef.current = HamugaImap.ui.maplibregl;

// scale ruler
mapRef.current.addControl(
  new mlRef.current.ScaleControl({ maxWidth: 120, unit: "metric" })
);

// custom attribution
mapRef.current.addControl(
  new mlRef.current.AttributionControl({
    compact: true,
    customAttribution: "© ICT Hamuga iMap",
  }),
  "bottom-right"
);

// Zoom + Compass (NavigationControl)
mapRef.current.addControl(
  new mlRef.current.NavigationControl({
    showZoom: true, // +/-
    showCompass: true, // compass/rotate reset
    visualizePitch: true, // pitch UI
  }),
  "bottom-right" // "top-left", "top-right", "bottom-left", "bottom-right"
);

// Current location (GeolocateControl)
mapRef.current.addControl(
  new mlRef.current.GeolocateControl({
    positionOptions: {
      enableHighAccuracy: true,
    },
    trackUserLocation: true,
    showUserLocation: true,
    showAccuracyCircle: true,
    fitBoundsOptions: { maxZoom: 16 },
    zoom,
  }),
  "bottom-right"
);

// === Autocomplete ===

// Autocomplete UI
HamugaImap.ui.autocomplete({
  container: "autocomplete",
  width: "600px",
  onSelection: (result) => {
    const { latitude: lat, longitude: lng } = result?.location || {};
    map.flyTo({ center: [lng, lat], zoom: 15 });

    const marker = HamugaImap.ui.marker();
    marker.setLngLat([lng, lat]).addTo(map);
  },
});

// Autocomplete API
HamugaImap.autocomplete({
  value: "regency",
  page: 1,
  perPage: 3,
})
  .then((result) => {
    console.log("result: ", result);
  })
  .catch((err) => {
    // handle error
  });

// === Routing ===

// Routing API
HamugaImap.routing({
  locations: [
    {
      lat: 47.918,
      lon: 106.9176,
    },
    {
      lat: 47.92,
      lon: 106.92,
    },
  ],
})
  .then((result) => {
    console.log("result: ", result);
  })
  .catch((err) => {
    // handle error
  });

// Routing Bus API
HamugaImap.routingBus({
  start: "47.927572261628114,106.93353687526832",
  end: "47.907956772246735,106.91491161586976",
  mode: ["WALK", "BUS"],
})
  .then((result) => {
    console.log("result: ", result);
  })
  .catch((err) => {
    // handle error
  });

// === POI ===

// POI API
HamugaImap.poi({
  area: false,
  categoryIds: [543],
  llx: 106.90699148188776,
  lly: 47.90622961174208,
  urx: 106.93673742840637,
  ury: 47.91933711330858,
  // "workHour": "open",
  // "name": "kfc",
  // "filter": "string",
  page: 1,
  size: 10,
})
  .then((result) => {
    console.log("result Poi API on html: ", result);
  })
  .catch((err) => {
    // handle error
  });

// POI Coordinate API
HamugaImap.poiCoordinate({
  lat: 47.91194077591632,
  lon: 106.92879515654936,
  zoom: 10,
})
  .then((result) => {
    console.log("result: ", result);
  })
  .catch((err) => {
    // handle error
  });

In your html

The MapLibre dependency is not necessary to install when using installation with the script tag.

Add the following script in your html file

Quickstart

Create a map

To create a map, first initialize the Hamuga iMap SDK with your publishable key. Then specify the HTML element where you want to render the map, by providing the element's ID, or the element object itself.

<html>
  <head>
    <!-- maplibre css and js -->
    <script src="https://unpkg.com/maplibre-gl@^5.15.0/dist/maplibre-gl.js"></script>
    <link
      href="https://unpkg.com/maplibre-gl@^5.15.0/dist/maplibre-gl.css"
      rel="stylesheet"
    />
    <!-- Hamuga iMap SDK css -->
    <script src="https://js.hamuga.mn/v0.0.1/hamuga-imap.min.js"></script>
    <link
      href="https://js.hamuga.mn/v0.0.1/hamuga-imap.min.css"
      rel="stylesheet"
    />
    <!-- Custom Style -->
    <style>
      html,
      body,
      main,
      #map {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
      }

      aside {
        padding: 20px;
      }

      main {
        display: grid;
        grid-template-columns: 1fr 3fr;
      }

      .hamuga-imap-theme-dark aside {
        background-color: #111;
      }
    </style>
  </head>

  <body>
    <main>
      <aside>
        <div id="autocomplete"></div>
      </aside>
      <section>
        <div id="map"></div>
      </section>
    </main>

    <script type="text/javascript">
      // === SDK initialize ===
      HamugaImap.initialize({
        debug: true, // or false
        apiKey: "HAMUGA_IMAP_API_KEY",
        theme: "dark", // or 'light'
      });

      // === Create Map ===
      const map = HamugaImap.ui.map({
        container: "map", // OR document.getElementById('map')
        center: [106.9, 47.9],
        zoom: 12,
        attributionControl: false,
      });

      // === Add Map Controls ===

      // Get Maplibre
      const ml = HamugaImap.ui.maplibregl;

      // scale ruler
      map.addControl(new ml.ScaleControl({ maxWidth: 120, unit: "metric" }));

      // custom attribution
      map.addControl(
        new ml.AttributionControl({
          compact: true,
          customAttribution: "© ICT Hamuga iMap",
        }),
        "bottom-right"
      );

      // Zoom + Compass (NavigationControl)
      map.addControl(
        new ml.NavigationControl({
          showZoom: true, // +/-
          showCompass: true, // compass/rotate reset
          visualizePitch: true, // pitch UI
        }),
        "bottom-right" // "top-left", "top-right", "bottom-left", "bottom-right"
      );

      // Current location (GeolocateControl)
      map.addControl(
        new ml.GeolocateControl({
          positionOptions: {
            enableHighAccuracy: true,
          },
          trackUserLocation: true,
          showUserLocation: true,
          showAccuracyCircle: true,
          fitBoundsOptions: { maxZoom: 16 },
        }),
        "bottom-right"
      );

      //  === Autocomplete ===

      // Autocomplete UI
      HamugaImap.ui.autocomplete({
        container: "autocomplete",
        width: "600px",
        onSelection: (result) => {
          const { latitude: lat, longitude: lng } = result?.location || {};
          map.flyTo({ center: [lng, lat], zoom: 15 });

          const marker = HamugaImap.ui.marker();
          marker.setLngLat([lng, lat]).addTo(map);
        },
      });

      // Autocomplete API
      HamugaImap.autocomplete({
        value: "search text here",
        page: 1,
        perPage: 10,
      })
        .then((result) => {
          console.log("result: ", result);
        })
        .catch((err) => {
          // handle error
        });

      // === Routing ===

      // Routing API
      HamugaImap.routing({
        locations: [
          {
            lat: 47.918,
            lon: 106.9176,
          },
          {
            lat: 47.92,
            lon: 106.92,
          },
        ],
      })
        .then((result) => {
          console.log("result: ", result);
        })
        .catch((err) => {
          // handle error
        });

      // Routing Bus API
      HamugaImap.routingBus({
        start: "47.927572261628114,106.93353687526832",
        end: "47.907956772246735,106.91491161586976",
        mode: ["WALK", "BUS"],
      })
        .then((result) => {
          console.log("result: ", result);
        })
        .catch((err) => {
          // handle error
        });

      // === POI ===

      // POI API
      HamugaImap.poi({
        area: false,
        categoryIds: [543],
        llx: 106.90699148188776,
        lly: 47.90622961174208,
        urx: 106.93673742840637,
        ury: 47.91933711330858,
        workHour: "",
        name: "",
        filter: "",
        page: 1,
        size: 10,
      })
        .then((result) => {
          console.log("result Poi API on html: ", result);
        })
        .catch((err) => {
          // handle error
        });

      // POI Coordinate API
      HamugaImap.poiCoordinate({
        lat: 47.91194077591632,
        lon: 106.92879515654936,
        zoom: 10,
      })
        .then((result) => {
          console.log("result: ", result);
        })
        .catch((err) => {
          // handle error
        });
    </script>
  </body>
</html>

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Installation and Usage

With npm

In your html

Quickstart

Create a map