Harbor Map#

Displaying the Harbor Map#

Tip

The official Harbor Map is Open source ! Feel free to copy what we have done in your own website.

HarborHarry
You have a couple of options to display our map.

  1. You can embed our app from Here.

  2. Take code from our Open source example

  3. Use our api /v1/locations/ to get a JSON of all of our locker locations. You can find more information here

Our map uses Google’s map api

Here’s an example of an api request to our locations api that retrieves the first 1000 public locations. We do not have 1000 locations yet, so this is a comprehensive list.
  const fetchLocalLocations = async () => {
  setIsLoading(true)
  try {
    const accessToken = import.meta.env.VITE_PROD_ACCESS_TOKEN;
    const clientId = import.meta.env.VITE_PROD_CLIENT;
    const clientSecret = import.meta.env.VITE_PROD_SECRET;
      // make sure you are targetting the right enviornment for this. If you credentials are for sandbox, prod will not work and vice versa!
    const response = await fetch("https://api.harborlockers.com/api/v1/locations/?skip=0&limit=1000", {
      headers: {
        Authorization: `Bearer ${accessToken}`,
        "X-Client-ID": clientId,
        "X-Client-Secret": clientSecret,
        "Content-Type": "application/json",
      },
    });
    const data = await response.json()
    console.log(data)
    // use the (data) object here to access all of the locations
  } catch (error) {
    console.error("Error loading locations:", error)
  }
}