Create a location verification view

Use the location verification view when you already have a delivery location and want the customer to confirm or adjust the exact coordinates on the map.

As always, define the container element and pass either the merchant ID or a session ID to the DGW instance.
Set the type property of view to location-verification.
Pass initialLocation with the default latitude and longitude shown on the map.

window.DGW.mount({
   merchantId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
   container: document.getElementById("delivery-gateway"),
   view: {
      type: "location-verification",
      initialLocation: {
         latitude: 47.4979,
         longitude: 19.0402,
      },
   },
});

The view is interactive by default. Use onLocationChange if you want to store the coordinates selected by the customer:

window.DGW.mount({
   merchantId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
   container: document.getElementById("delivery-gateway"),
   view: {
      type: "location-verification",
      initialLocation: {
         latitude: 47.4979,
         longitude: 19.0402,
      },
      zoomLevel: 16,
      onLocationChange: (latitude, longitude) => {
         updateDeliveryLocation({ latitude, longitude });
      },
   },
});

Use interactive: false to render a static Mapbox image instead of the interactive map. This reduces map loading delay and cost when the customer only needs to inspect the location.

window.DGW.mount({
   merchantId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
   container: document.getElementById("delivery-gateway"),
   view: {
      type: "location-verification",
      initialLocation: {
         latitude: 47.4979,
         longitude: 19.0402,
      },
      interactive: false,
      zoomLevel: 16,
   },
});

Static mode uses the same map style and zoom level as the interactive map. The image size is calculated from the rendered map container and the custom React marker is displayed over the image, so switching between static and interactive mode stays visually consistent.

Use hideInterface: true if you want to keep the interactive map but hide the message and action containers:

window.DGW.mount({
   merchantId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
   container: document.getElementById("delivery-gateway"),
   view: {
      type: "location-verification",
      initialLocation: {
         latitude: 47.4979,
         longitude: 19.0402,
      },
      hideInterface: true,
   },
});

You can toggle a mounted location verification view between interactive and static mode with DGW.execute:

window.DGW.execute("location-verification.toggleInteractive", false);
window.DGW.execute("location-verification.toggleInteractive", true);
window.DGW.execute("location-verification.toggleInteractive");

The second argument is optional. Pass true to force interactive mode, false to force static mode, or omit it to toggle the current mode.

The Web Plugin also dispatches an event whenever the visible location verification message changes:

window.addEventListener("api.deliverygateway.io/location-verification-message", (event) => {
   console.log(event.detail.messageKey);
});

event.detail.messageKey is one of initial, thankYou, or tooFarAway.

For all available properties of the opts object, check DGW.mount(opts).

Complete example

The location verification view is embedded directly into its container. The following complete HTML example renders the interactive map inline and displays the coordinates selected by the customer:

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <script src="https://api.deliverygateway.io/sdk/en.js"></script>

   <style>
      body {
         margin: 0;
         background-color: #f8f9fa;
         color: #0f172a;
         font-family: sans-serif;
      }

      main {
         width: min(960px, calc(100% - 32px));
         margin: 0 auto;
         padding: 40px 0;
      }

      #dgw-location-verification {
         width: 100%;
         height: 560px;
         overflow: hidden;
         border-radius: 12px;
      }

      #selected-coordinates {
         margin: 16px 0 0;
         padding: 12px 16px;
         border: 1px solid #d0d7de;
         border-radius: 8px;
         background-color: white;
         font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
      }

      @media (max-width: 768px) {
         #dgw-location-verification {
            height: 480px;
         }
      }
   </style>
</head>

<body>
   <main>
      <h1>Verify delivery location</h1>
      <div id="dgw-location-verification"></div>
      <p id="selected-coordinates" role="status" aria-live="polite">
         Latitude: 47.497900, longitude: 19.040200
      </p>
   </main>

   <script>
      const coordinatesOutput = document.getElementById("selected-coordinates");

      document.addEventListener("DOMContentLoaded", () => {
         window.DGW.mount({
            merchantId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
            containerId: "dgw-location-verification",
            view: {
               type: "location-verification",
               initialLocation: {
                  latitude: 47.4979,
                  longitude: 19.0402,
               },
               interactive: true,
               zoomLevel: 16,
               onLocationChange: (latitude, longitude) => {
                  coordinatesOutput.textContent =
                     `Latitude: ${latitude.toFixed(6)}, longitude: ${longitude.toFixed(6)}`;
               },
            },
         });
      });
   </script>
</body>

</html>

Try it now

The location verification view below is embedded directly into this page. Move the map to adjust the marker's coordinates:

Loading interactive demo...

Complete example​

Try it now​

Complete example

Try it now