Skip to content

How to Create a Walking Directions Map Billboard

A walking directions map billboard shows a live map with a route drawn from the billboard's location to your nearest store, restaurant, venue, or point of interest. It's one of the most compelling location-based formats in DOOH advertising — showing viewers not just where your location is, but exactly how to get there on foot.

Prerequisites

  • A Lucit account with access to the Template Designer
  • A MapBox API key (free tier supports DOOH use cases — sign up at mapbox.com)
  • Your destination location's latitude and longitude coordinates
  • Basic familiarity with the Template Designer canvas and JavaScript tab

What You'll Build

A billboard creative that: 1. Detects the billboard's coordinates automatically from its registered location in Lucit 2. Pulls walking directions from the screen to your location via MapBox Directions API 3. Renders a live map with the walking route drawn on it 4. Displays estimated walking distance and time

Step 1: Get Your MapBox API Key

  1. Sign up at mapbox.com
  2. Go to Account → Access Tokens
  3. Create a new access token with the following scopes:
  4. styles:read
  5. directions:read
  6. Copy the token — you'll paste it into the JavaScript below

Step 2: Get Your Destination Coordinates

For the location you want to route viewers to, you need decimal latitude and longitude:

  • Use maps.google.com, right-click your location, and click the coordinates at the top of the context menu
  • Or use the MapBox Studio interface to find precise coordinates

Example: 

Latitude:  41.8827  (Chicago store example)
Longitude: -87.6233

Step 3: Create the Template

  1. In Lucit, go to Templates → + New Template
  2. Choose your dimensions
  3. Add an Image element spanning most of the canvas — this will be filled by the map
  4. Add text elements for:
  5. Walking distance label (e.g., #walk-distance)
  6. Walking time label (e.g., #walk-time)
  7. Location name / CTA (e.g., #location-name)
  8. Give the Image element the ID: map-container

Step 4: Add the MapBox Walking Directions JavaScript

Click the <> icon on the canvas, open the JS tab, and paste:

registerDesignerFormattingFunction(
  'renderWalkingMap',
  function(element, dataValue, dataObject, elementSettings, cssSelector) {

    // =====================================================
    // CONFIGURATION
    // =====================================================
    var MAPBOX_TOKEN = 'pk.YOUR_MAPBOX_TOKEN_HERE';
    var DESTINATION_LAT = 41.8827;   // Your location's latitude
    var DESTINATION_LNG = -87.6233;  // Your location's longitude
    var LOCATION_NAME = 'Our Store';
    var MAP_STYLE = 'mapbox/streets-v12';  // or 'mapbox/dark-v11', 'mapbox/light-v11'
    // =====================================================

    var doc = element.ownerDocument;

    // Get billboard's coordinates from the Lucit data object
    // These are populated automatically from the screen's registered location
    var originLat = dataObject['digital_board.location.lat'] || null;
    var originLng = dataObject['digital_board.location.lng'] || null;

    if (!originLat || !originLng) {
      // Fallback: show static map centered on destination
      renderStaticMap(doc, MAPBOX_TOKEN, DESTINATION_LAT, DESTINATION_LNG, MAP_STYLE);
      return;
    }

    // Build MapBox Directions API URL for walking route
    var directionsUrl = 'https://api.mapbox.com/directions/v5/mapbox/walking/'
      + originLng + ',' + originLat + ';'
      + DESTINATION_LNG + ',' + DESTINATION_LAT
      + '?geometries=geojson&access_token=' + MAPBOX_TOKEN;

    // Fetch the route, then render a static map with the route overlay
    fetch(directionsUrl)
      .then(function(response) { return response.json(); })
      .then(function(routeData) {
        if (!routeData.routes || routeData.routes.length === 0) {
          renderStaticMap(doc, MAPBOX_TOKEN, DESTINATION_LAT, DESTINATION_LNG, MAP_STYLE);
          return;
        }

        var route = routeData.routes[0];
        var distanceMeters = route.distance;
        var durationSeconds = route.duration;

        // Convert to human-readable values
        var distanceFt = Math.round(distanceMeters * 3.28084);
        var distanceMi = (distanceMeters / 1609.34).toFixed(1);
        var durationMin = Math.ceil(durationSeconds / 60);

        // Update text elements if they exist
        var walkDistance = doc.querySelector('#walk-distance');
        var walkTime = doc.querySelector('#walk-time');
        var locationName = doc.querySelector('#location-name');

        if (walkDistance) {
          walkDistance.textContent = distanceFt < 1000
            ? distanceFt + ' ft'
            : distanceMi + ' mi';
        }

        if (walkTime) {
          walkTime.textContent = durationMin + ' min walk';
        }

        if (locationName) {
          locationName.textContent = LOCATION_NAME;
        }

        // Encode the route geometry for the static map overlay
        var encoded = encodeURIComponent(JSON.stringify(route.geometry));

        // Build MapBox Static Image URL with route overlay
        var center = DESTINATION_LNG + ',' + DESTINATION_LAT;
        var mapUrl = 'https://api.mapbox.com/styles/v1/' + MAP_STYLE + '/static/'
          + 'geojson(' + encoded + '),'
          + 'pin-l-star+f00(' + DESTINATION_LNG + ',' + DESTINATION_LAT + '),'
          + 'pin-s-circle+00f(' + originLng + ',' + originLat + ')'
          + '/auto/800x400@2x?access_token=' + MAPBOX_TOKEN;

        // Set the image element src to the rendered map
        var mapEl = doc.querySelector('#map-container');
        if (mapEl && mapEl.tagName === 'IMG') {
          mapEl.src = mapUrl;
        }
      })
      .catch(function(err) {
        renderStaticMap(doc, MAPBOX_TOKEN, DESTINATION_LAT, DESTINATION_LNG, MAP_STYLE);
      });
  },
  []
);

// Helper: render a simple static map (no route) as a fallback
function renderStaticMap(doc, token, lat, lng, style) {
  var mapUrl = 'https://api.mapbox.com/styles/v1/' + style + '/static/'
    + 'pin-l-star+f00(' + lng + ',' + lat + ')'
    + '/' + lng + ',' + lat + ',15,0/800x400@2x?access_token=' + token;

  var mapEl = doc.querySelector('#map-container');
  if (mapEl && mapEl.tagName === 'IMG') {
    mapEl.src = mapUrl;
  }
}

Step 5: Assign the Function to the Map Image Element

  1. Select the Image element (#map-container) on the canvas
  2. In the right panel, under On Render → Formatting Function, select renderWalkingMap
  3. Preview the template — the map should render with the route drawn from screen location to destination

Step 6: Multi-Location Support

If you have multiple locations and want each screen to route to its nearest location (not a single fixed destination), use the Nearest Location Data via Google Sheets app:

  1. Go to Apps & Data → ADD NEW
  2. Select Nearest Location Data via Google Sheets
  3. Add all your location coordinates to the sheet
  4. The app automatically calculates the nearest location to each screen and exposes:
  5. nearest_location.lat
  6. nearest_location.lng
  7. nearest_location.name
  8. nearest_location.address

Modify the JavaScript to read from these variables instead of hardcoded coordinates:

var DESTINATION_LAT = parseFloat(dataObject['nearest_location.lat']) || 41.8827;
var DESTINATION_LNG = parseFloat(dataObject['nearest_location.lng']) || -87.6233;
var LOCATION_NAME = dataObject['nearest_location.name'] || 'Our Store';

Best Practices

  • Map style: Dark maps (mapbox/dark-v11) work well for nighttime display; light maps for daytime
  • Walking context: This format works best for downtown, pedestrian-dense, and transit-adjacent screens where walking is a realistic option
  • Driving context: For highway or suburban screens, consider a driving directions format instead — modify mapbox/walking to mapbox/driving in the directions URL
  • Distance threshold: If the screen is more than 1 mile from the destination, walking directions may not be the best format — consider routing to a drive-to CTA instead