next-maps

The MAP_CONSTANTS object provides default configuration values for map animations and search functionality.

Fly-to settings:

• ZOOM: Default zoom level of 14.
• SPEED: Default animation speed of 4.
• DURATION: Default animation duration in milliseconds of 1000.

Search settings:

• DEBOUNCE_MS: Search input debounce delay of 400ms.
• DEFAULT_LIMIT: Maximum number of search results returned (5).
• DEFAULT_COUNTRY: Default country code for searches ("US").
• DEFAULT_PROXIMITY: Default geographic coordinates for proximity-based searches (defaults to San Francisco: [-122.4194, 37.7749]).

export const MAP_CONSTANTS = {
  FLY_TO: {
    ZOOM: 14,
    SPEED: 4,
    DURATION: 1000,
  },
  SEARCH: {
    DEBOUNCE_MS: 400,
    DEFAULT_LIMIT: 5,
    DEFAULT_COUNTRY: "US",
    DEFAULT_PROXIMITY: [-122.4194, 37.7749] as [number, number],
  },
} as const;

When providing a LocationFeature to the LocationPopup component, the following properties in the properties object are used to populate the UI:

• name: The display name of the location.
• full_address or address: The physical address.
• poi_category: An array of strings used for category badges and icon selection.
• brand: A string representing the brand name (displayed if different from the name).
• operational_status: A string (e.g., active) used to show an 'Open' or status badge.
• maki: A string used to look up a specific icon in the iconMap.
• mapbox_id: Used to display a truncated ID in the footer.
• coordinates: An object containing latitude and longitude (fallback if geometry.coordinates is missing).

Coordinates can also be provided via geometry.coordinates as [longitude, latitude].

{
  "properties": {
    "name": "string",
    "full_address": "string",
    "address": "string",
    "poi_category": ["string"],
    "brand": ["string"],
    "operational_status": "string",
    "maki": "string",
    "mapbox_id": "string",
    "coordinates": {
      "latitude": "number",
      "longitude": "number"
    }
  },
  "geometry": {
    "coordinates": ["number", "number"]
  }
}

The LocationPopup component is used to display a detailed information popup for a specific location on a Mapbox map. It renders a popup containing the location's name, address, brand, operational status, categories, and coordinates.

It expects a location prop of type LocationFeature. The component automatically resolves coordinates from geometry.coordinates or properties.coordinates and determines the appropriate icon using the iconMap utility based on the maki property or poi_category array.

import { LocationPopup } from "@/components/location-popup";
import { LocationFeature } from "@/lib/mapbox/utils";

// Example usage within a map component
function MyMap() {
  const selectedLocation: LocationFeature = {
    properties: {
      name: "Coffee Shop",
      full_address: "123 Main St",
      poi_category: ["cafe", "food"],
      operational_status: "active",
      mapbox_id: "mapbox_12345"
    },
    geometry: {
      coordinates: [-122.4194, 37.7749]
    }
  };

  return <LocationPopup location={selectedLocation} />;
}

The LocationFeature type defines the structure of a GeoJSON Feature representing a specific location. It includes geometry (Point) and a detailed properties object containing metadata such as name, address, context (country, region, etc.), and coordinates.

export type LocationFeature = {
  type: "Feature";
  geometry: {
    type: "Point";
    coordinates: [number, number];
  };
  properties: {
    name: string;
    name_preferred?: string;
    mapbox_id: string;
    feature_type: string;
    address?: string;
    full_address?: string;
    place_formatted?: string;
    context: {
      country?: { name: string; country_code: string; country_code_alpha_3: string };
      region?: { name: string; region_code: string; region_code_full: string };
      postcode?: { name: string };
      district?: { name: string };
      place?: { name: string };
      locality?: { name: string };
      neighborhood?: { name: string };
      address?: { name: string; address_number?: string; street_name?: string };
      street?: { name: string };
    };
    coordinates: {
      latitude: number;
      longitude: number;
      accuracy?: string;
      routable_points?: { name: string; latitude: number; longitude: number; note?: string }[];
    };
    language?: string;
    maki?: string;
    poi_category?: string[];
    poi_category_ids?: string[];
    brand?: string[];
    brand_id?: string[];
    external_ids?: Record<string, string>;
    metadata?: Record<string, unknown>;
    bbox?: [number, number, number, number];
    operational_status?: string;
  };
};