Skip to content

Order Confirmation

Beginner SmartMaps GL Marker Popup NavigationControl

This use case demonstrates an e-commerce order confirmation page with an embedded SmartMaps map showing the delivery location. A custom red pin marker indicates the shipping address, and a styled popup displays the delivery city, giving the customer a clear visual confirmation of where their order will be delivered.

Features & APIs

  • SmartMaps GL JS (smartmaps-gl) for interactive map rendering
  • Custom Marker with an SVG pin icon to highlight the delivery location
  • Popup with styled delivery address information, attached to the marker
  • NavigationControl for zoom in/out buttons (compass hidden)
  • Drag rotation disabled to keep the map orientation fixed for a simplified UX
  • Tailwind CSS for responsive, utility-based page styling

How it works

The page creates a simple map centered on the shipping address. On load, it adds a custom SVG marker with an attached popup that opens automatically to show the delivery city.

Code

// =============================================================
// ORDER CONFIRMATION MAP
// Displays a delivery location on an interactive map with a
// custom SVG marker and styled popup showing the shipping address.
//
// APIs used:
//   - SmartMaps GL JS (Map, Marker, Popup, NavigationControl)
// =============================================================

// --- DATA & CONFIGURATION ---
const shippingLocation = {
  lng: 8.43937,
  lat: 49.02168,
  city: "Karlsruhe",
};

// --- MAP INITIALIZATION ---
const map = new smartmapsgl.Map({
  apiKey:
    "[INSERT API-KEY]",
  container: "map",
  // Using a free, public tile source from Stadia Maps.
  style: "essential",
  center: [shippingLocation.lng, shippingLocation.lat],
  zoom: 13,
});

// --- CREATE POPUP ---
const popup = new smartmapsgl.Popup({
  offset: 25,
  closeButton: false, // The default close button is hidden via CSS
  className: "company-popup",
}).setHTML(`
      <div class="flex items-start">
          <div class="flex-grow">
              <p class="text-sm text-gray-500">Lieferadresse</p>
              <p class="font-bold text-base">${shippingLocation.city}</p>
          </div>
          <button onclick="popup.remove()" class="ml-2 text-gray-400 hover:text-gray-700">&times;</button>
      </div>
  `);

map.on("load", () => {
  // Add zoom controls
  map.addControl(
    new smartmapsgl.NavigationControl({
      showCompass: false, // Hide the compass control
    }),
    "top-right"
  );

  // Disable map rotation
  map.dragRotate.disable();
  map.touchZoomRotate.disableRotation();

  // --- CREATE CUSTOM MARKER ---
  const markerEl = document.createElement("div");
  markerEl.className = "shipping-marker";

  // --- ADD MARKER AND POPUP TO MAP ---
  new smartmapsgl.Marker(markerEl)
    .setLngLat([shippingLocation.lng, shippingLocation.lat])
    .setPopup(popup)
    .addTo(map);

  // Open the popup by default
  popup.addTo(map);

  // Make the popup object globally accessible so the inline onclick can find it
  window.popup = popup;
});

<body>
  <div class="main-container">
    <!-- Header -->
    <header class="p-4 border-b">
      <h1 class="text-3xl font-extrabold" style="color: #18345c">
        SmartOrders
      </h1>
    </header>

    <main class="bg-gray-50 p-4">
      <!-- Order Summary Toggle -->
      <div class="flex justify-between items-center text-lg">
        <div class="flex items-center space-x-2 text-gray-700">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-6 w-6"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4z"
            />
          </svg>
          <span class="font-semibold">Bestellübersicht anzeigen</span>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-5 w-5"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <path
              fill-rule="evenodd"
              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
              clip-rule="evenodd"
            />
          </svg>
        </div>
        <span class="font-bold">14,99 €</span>
      </div>

      <!-- Confirmation Message -->
      <div class="flex items-center space-x-4 mt-8">
        <div
          class="flex-shrink-0 w-12 h-12 rounded-full border-2 border-blue-500 flex items-center justify-center"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-8 w-8 text-blue-500"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M5 13l4 4L19 7"
            />
          </svg>
        </div>
        <div>
          <p class="text-xs text-gray-500">Bestätigungsnr. FQQ28VT0M</p>
          <p class="text-2xl font-bold text-gray-800">Danke, Name!</p>
        </div>
      </div>

      <!-- Card with Map and Details -->
      <div
        class="mt-8 bg-white border border-gray-200 rounded-lg overflow-hidden"
      >
        <div id="map"></div>
        <div class="p-4">
          <h2 class="text-xl font-bold text-gray-800">
            Deine Bestellung wurde bestätigt
          </h2>
          <p class="mt-1 text-gray-600">
            Du erhältst zur Bestätigung in Kürze eine E-Mail mit deiner
            Bestellnummer.
          </p>
        </div>
      </div>

      <!-- Order Details -->
      <div class="mt-8 bg-white border border-gray-200 rounded-lg p-4">
        <h3 class="text-lg font-bold text-gray-800">Bestelldetails</h3>
        <div class="mt-2">
          <p class="font-semibold text-gray-700">Kontaktinformation</p>
          <p class="text-blue-600">mail@smartorders.de</p>
        </div>
      </div>
    </main>
  </div>
</body>

/* Custom styles for the application */
body {
  font-family: "Inter", sans-serif;
  background-color: #f9fafb; /* bg-gray-50 */
  display: flex;
  justify-content: center;
  padding: 1rem 0;
}

.main-container {
  width: 100%;
  max-width: 420px;
  background-color: white;
}

#map {
  width: 100%;
  height: 250px; /* Fixed height for the map */
}

/* Custom styling for the popup to match the image */
.company-popup .maplibregl-popup-content {
  background-color: white;
  border-radius: 0.5rem; /* rounded-lg */
  padding: 0.75rem 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-size: 1rem;
  color: #374151; /* text-gray-700 */
}

.company-popup .maplibregl-popup-tip {
  border-top-color: white;
}

/* Hide the default MapLibre close button */
.company-popup .maplibregl-popup-close-button {
  display: none;
}

/* Custom marker styling */
.shipping-marker {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ef4444" width="36px" height="36px"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>');
  width: 36px;
  height: 36px;
  background-size: contain;
  cursor: pointer;
}

.mt-8 {
  margin-top: 0.5rem !important;
}

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bestätigung</title>

    <!-- Tailwind CSS for styling -->
    <link rel="stylesheet" href="css/tailwind.min.css" />

    <!-- MapLibre GL JS -->
    <script src="https://cdn.smartmaps.cloud/packages/smartmaps/smartmaps-gl/v2/umd/smartmaps-gl.min.js"></script>

    <style>
      /* Custom styles for the application */
      body {
        font-family: "Inter", sans-serif;
        background-color: #f9fafb; /* bg-gray-50 */
        display: flex;
        justify-content: center;
        padding: 1rem 0;
      }

      .main-container {
        width: 100%;
        max-width: 420px;
        background-color: white;
      }

      #map {
        width: 100%;
        height: 250px; /* Fixed height for the map */
      }

      /* Custom styling for the popup to match the image */
      .company-popup .maplibregl-popup-content {
        background-color: white;
        border-radius: 0.5rem; /* rounded-lg */
        padding: 0.75rem 1rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        font-size: 1rem;
        color: #374151; /* text-gray-700 */
      }

      .company-popup .maplibregl-popup-tip {
        border-top-color: white;
      }

      /* Hide the default MapLibre close button */
      .company-popup .maplibregl-popup-close-button {
        display: none;
      }

      /* Custom marker styling */
      .shipping-marker {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ef4444" width="36px" height="36px"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>');
        width: 36px;
        height: 36px;
        background-size: contain;
        cursor: pointer;
      }

      .mt-8 {
        margin-top: 0.5rem !important;
      }
    </style>
  </head>
  <body>
    <div class="main-container">
      <!-- Header -->
      <header class="p-4 border-b">
        <h1 class="text-3xl font-extrabold" style="color: #18345c">
          SmartOrders
        </h1>
      </header>

      <main class="bg-gray-50 p-4">
        <!-- Order Summary Toggle -->
        <div class="flex justify-between items-center text-lg">
          <div class="flex items-center space-x-2 text-gray-700">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-6 w-6"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4z"
              />
            </svg>
            <span class="font-semibold">Bestellübersicht anzeigen</span>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-5 w-5"
              viewBox="0 0 20 20"
              fill="currentColor"
            >
              <path
                fill-rule="evenodd"
                d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                clip-rule="evenodd"
              />
            </svg>
          </div>
          <span class="font-bold">14,99 €</span>
        </div>

        <!-- Confirmation Message -->
        <div class="flex items-center space-x-4 mt-8">
          <div
            class="flex-shrink-0 w-12 h-12 rounded-full border-2 border-blue-500 flex items-center justify-center"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-8 w-8 text-blue-500"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M5 13l4 4L19 7"
              />
            </svg>
          </div>
          <div>
            <p class="text-xs text-gray-500">Bestätigungsnr. FQQ28VT0M</p>
            <p class="text-2xl font-bold text-gray-800">Danke, Name!</p>
          </div>
        </div>

        <!-- Card with Map and Details -->
        <div
          class="mt-8 bg-white border border-gray-200 rounded-lg overflow-hidden"
        >
          <div id="map"></div>
          <div class="p-4">
            <h2 class="text-xl font-bold text-gray-800">
              Deine Bestellung wurde bestätigt
            </h2>
            <p class="mt-1 text-gray-600">
              Du erhältst zur Bestätigung in Kürze eine E-Mail mit deiner
              Bestellnummer.
            </p>
          </div>
        </div>

        <!-- Order Details -->
        <div class="mt-8 bg-white border border-gray-200 rounded-lg p-4">
          <h3 class="text-lg font-bold text-gray-800">Bestelldetails</h3>
          <div class="mt-2">
            <p class="font-semibold text-gray-700">Kontaktinformation</p>
            <p class="text-blue-600">mail@smartorders.de</p>
          </div>
        </div>
      </main>
    </div>

    <script>
      // =============================================================
      // ORDER CONFIRMATION MAP
      // Displays a delivery location on an interactive map with a
      // custom SVG marker and styled popup showing the shipping address.
      //
      // APIs used:
      //   - SmartMaps GL JS (Map, Marker, Popup, NavigationControl)
      // =============================================================

      // --- DATA & CONFIGURATION ---
      const shippingLocation = {
        lng: 8.43937,
        lat: 49.02168,
        city: "Karlsruhe",
      };

      // --- MAP INITIALIZATION ---
      const map = new smartmapsgl.Map({
        apiKey:
          "[INSERT API-KEY]",
        container: "map",
        // Using a free, public tile source from Stadia Maps.
        style: "essential",
        center: [shippingLocation.lng, shippingLocation.lat],
        zoom: 13,
      });

      // --- CREATE POPUP ---
      const popup = new smartmapsgl.Popup({
        offset: 25,
        closeButton: false, // The default close button is hidden via CSS
        className: "company-popup",
      }).setHTML(`
            <div class="flex items-start">
                <div class="flex-grow">
                    <p class="text-sm text-gray-500">Lieferadresse</p>
                    <p class="font-bold text-base">${shippingLocation.city}</p>
                </div>
                <button onclick="popup.remove()" class="ml-2 text-gray-400 hover:text-gray-700">&times;</button>
            </div>
        `);

      map.on("load", () => {
        // Add zoom controls
        map.addControl(
          new smartmapsgl.NavigationControl({
            showCompass: false, // Hide the compass control
          }),
          "top-right"
        );

        // Disable map rotation
        map.dragRotate.disable();
        map.touchZoomRotate.disableRotation();

        // --- CREATE CUSTOM MARKER ---
        const markerEl = document.createElement("div");
        markerEl.className = "shipping-marker";

        // --- ADD MARKER AND POPUP TO MAP ---
        new smartmapsgl.Marker(markerEl)
          .setLngLat([shippingLocation.lng, shippingLocation.lat])
          .setPopup(popup)
          .addTo(map);

        // Open the popup by default
        popup.addTo(map);

        // Make the popup object globally accessible so the inline onclick can find it
        window.popup = popup;
      });
    </script>
  </body>
</html>