Type Alias TMapynaBaseConfig

TMapynaBaseConfig: {
    closedFreehand: boolean;
    clustering: {
        enabled: boolean;
        googleMapOptions: Omit<MarkerClustererOptions, "markers" | "map">;
        leafletOptions: MarkerClusterGroupOptions;
    };
    controllerSpace: number;
    controllers: {
        draw: keyof typeof EControllersPosition;
        layers: keyof typeof EControllersPosition;
        view: keyof typeof EControllersPosition;
        zoomX: keyof typeof EControllersPosition;
    };
    data: unknown;
    defaultCenter:
        | {
            lat: number;
            lng: number;
        }
        | LatLngLiteral
        | google.maps.LatLng
        | null;
    defaultView: "map" | "satellite";
    defaultZoom: number | null;
    drawing: {
        payload: any;
        style: {
            fillColor: string;
            fillOpacity: number;
            strokeColor: string;
            strokeOpacity: number;
            strokeWeight: number;
        };
    };
    elementId: string;
    gMapId: string | null;
    idKey: string;
    infoWindow: TInfoWindow;
    latitudeKey: string;
    layers: {
        neighbourhoods?: Partial<Omit<TMapynaLayer, "markerStyles">>;
        schools?: Partial<TMapynaLayer>;
        zipcodes?: Partial<Omit<TMapynaLayer, "markerStyles">>;
        [key: string]: any;
    };
    loading: {
        className: string;
        position: keyof typeof EControllersPosition;
        space: number;
    };
    longitudeKey: string;
    markerStyles: TMapynaMarkerStyle[];
    notify: TMapynaNotify;
    priceKey: string;
    priceRender: ((price: number) => string) | null;
    rfEnabled: boolean;
    rfIntegration: {
        apiBase?: string;
        layers?: {
            neighbourhoods?: Partial<Pick<TMapynaLayer,
                | "latitudeKey"
                | "longitudeKey"
                | "idKey"
                | "infoWindow">>;
            schools?: Partial<Pick<TMapynaLayer,
                | "latitudeKey"
                | "longitudeKey"
                | "idKey"
                | "infoWindow">>;
            zipcodes?: Partial<Pick<TMapynaLayer,
                | "latitudeKey"
                | "longitudeKey"
                | "idKey"
                | "infoWindow">>;
            [key: string]: any;
        };
        token: (() => Promise<string> | null) | Promise<string> | null;
    };
    scripts: {
        googleMapMarkerClustererScriptSource: string;
        googleMapMarkerSpiderfierScriptSource: string;
        leafletMarkerClustererDefaultStyleSource: string;
        leafletMarkerClustererScriptSource: string;
        leafletMarkerClustererStyleSource: string;
    };
    scrollWheel: boolean;
    spiderfy: {
        enabled: boolean;
        options: {
            circleFootSeparation: number;
            circleSpiralSwitchover: number;
            keepSpiderfied: boolean;
            markersWontHide: boolean;
            markersWontMove: boolean;
            nearbyDistance: number;
            spiralFootSeparation: number;
            spiralLengthFactor: number;
            spiralLengthStart: number;
        };
        zoom: number | null;
    };
    zoomAfterDrawing: boolean;
}

Type declaration

  • closedFreehand: boolean

    Determines whether the freehand drawing mode creates closed shapes (polygons) during the drawing process. By default, the closedFreehand option is set to false, indicating that the shapes are open (polylines) during the drawing process

    Default

    false
  • clustering: {
        enabled: boolean;
        googleMapOptions: Omit<MarkerClustererOptions, "markers" | "map">;
        leafletOptions: MarkerClusterGroupOptions;
    }

    Configuration for marker clustering

  • controllerSpace: number

    The spacing between map controllers

    Default

    7
  • controllers: {
        draw: keyof typeof EControllersPosition;
        layers: keyof typeof EControllersPosition;
        view: keyof typeof EControllersPosition;
        zoomX: keyof typeof EControllersPosition;
    }

    Allows to customize the positions of various controls in your application

    Default

    {
       * zoomX: EControllersPosition.TOP_RIGHT,
       * view: EControllersPosition.TOP_RIGHT,
       * draw: EControllersPosition.RIGHT_TOP,
       * layers: EControllersPosition.RIGHT_TOP
       * }
  • data: unknown

    The data that will be displayed on the map

    Note: This is only for demo purpose

    Default

    null
  • defaultCenter:
        | {
            lat: number;
            lng: number;
        }
        | LatLngLiteral
        | google.maps.LatLng
        | null

    The default center coordinates of the map. It specifies the initial latitude and longitude to center the map when it loads. The value should be an object with the lat and lng properties representing the latitude and longitude, respectively. Alternatively, it can be set to null to allow the map to load based on the coordinates of the markers and the map's bounds will be automatically adjusted to fit the marker data.

    Required if setting defaultZoom

    Default

    null
  • defaultView: "map" | "satellite"

    The default view of the map. It specifies the initial view of the map when it loads. The value can be either 'map' or 'satellite'.

    Default

    'map'
  • defaultZoom: number | null

    The default zoom level of the map. It specifies the initial zoom level when the map loads.

    Note: defaultZoom can only be set if defaultCenter is defined.

    Default

    null
  • drawing: {
        payload: any;
        style: {
            fillColor: string;
            fillOpacity: number;
            strokeColor: string;
            strokeOpacity: number;
            strokeWeight: number;
        };
    }

    Configuration for the drawn shape

    Default

    style: {
         strokeColor: "#e74c3c",
         strokeOpacity: 0.9,
         strokeWeight: 4,
         fillColor: "transparent",
         fillOpacity: 0
       },
       payload: null
    • payload: any

      The initial payload of the drawn shape

      Todo

      need to be implemented

    • style: {
          fillColor: string;
          fillOpacity: number;
          strokeColor: string;
          strokeOpacity: number;
          strokeWeight: number;
      }

      The style options for the drawn shape.

      • fillColor: string
      • fillOpacity: number
      • strokeColor: string
      • strokeOpacity: number
      • strokeWeight: number
  • elementId: string

    The ID of the HTML element where the map will be rendered.

    Default

    "mapyna"
  • gMapId: string | null

    The Map ID of the Google Map if using Google Maps. This is required for advanced marker functionality.

    See

    https://developers.google.com/maps/documentation/get-map-id

  • idKey: string

    The key in the data source representing the unique identifier of each marker

    Default

    'id'
  • infoWindow: TInfoWindow

    Configuration for info windows

    Note: To populate the content of the info window, you can use either the dataKey option or the render function. Only one of them should be filled, and if both are provided, the render function takes priority **

  • latitudeKey: string

    The key in the data source representing the latitude of each marker

    Default

    'lat'
  • layers: {
        neighbourhoods?: Partial<Omit<TMapynaLayer, "markerStyles">>;
        schools?: Partial<TMapynaLayer>;
        zipcodes?: Partial<Omit<TMapynaLayer, "markerStyles">>;
        [key: string]: any;
    }

    The option allows to configure different layers for the map. Each layer can have its own settings, including the layer type, visibility, label, zoom level, and fetch callback

    • [key: string]: any
    • Optionalneighbourhoods?: Partial<Omit<TMapynaLayer, "markerStyles">>
    • Optionalschools?: Partial<TMapynaLayer>
    • Optionalzipcodes?: Partial<Omit<TMapynaLayer, "markerStyles">>
  • loading: {
        className: string;
        position: keyof typeof EControllersPosition;
        space: number;
    }

    Configuration for loading indicator

    • className: string

      The class name of the loading indicator

      Default

      'mapyna-loading'
    • position: keyof typeof EControllersPosition

      The position of the loading indicator

      Default

      'LEFT_TOP'
    • space: number

      The spacing between the loading indicator and the map

      Default

      7
  • longitudeKey: string

    The key in the data source representing the longitude of each marker

    Default

    'lng'
  • markerStyles: TMapynaMarkerStyle[]

    An array of marker styles

  • notify: TMapynaNotify

    Configuration for showing custom messages on the map

  • priceKey: string

    The key in the data source representing the price of each marker

    Default

    'price'
  • priceRender: ((price: number) => string) | null

    A function that renders the price marker

    Param: price

    The price of the marker

    Returns

    The customized price for the marker

    Example

    return Intl.NumberFormat("en-US", {
         style: "currency",
         currency: "USD",
         maximumFractionDigits: 0
       }).format(price)
  • rfEnabled: boolean

    Determines whether RealityFeed integration is enabled

    Default

    false
  • rfIntegration: {
        apiBase?: string;
        layers?: {
            neighbourhoods?: Partial<Pick<TMapynaLayer,
                | "latitudeKey"
                | "longitudeKey"
                | "idKey"
                | "infoWindow">>;
            schools?: Partial<Pick<TMapynaLayer,
                | "latitudeKey"
                | "longitudeKey"
                | "idKey"
                | "infoWindow">>;
            zipcodes?: Partial<Pick<TMapynaLayer,
                | "latitudeKey"
                | "longitudeKey"
                | "idKey"
                | "infoWindow">>;
            [key: string]: any;
        };
        token: (() => Promise<string> | null) | Promise<string> | null;
    }

    Configuration options for RealityFeed integration

    • OptionalapiBase?: string

      The base URL of the RealityFeed API

      Default

      "https://api.realityfeed.com"
    • Optionallayers?: {
          neighbourhoods?: Partial<Pick<TMapynaLayer,
              | "latitudeKey"
              | "longitudeKey"
              | "idKey"
              | "infoWindow">>;
          schools?: Partial<Pick<TMapynaLayer,
              | "latitudeKey"
              | "longitudeKey"
              | "idKey"
              | "infoWindow">>;
          zipcodes?: Partial<Pick<TMapynaLayer,
              | "latitudeKey"
              | "longitudeKey"
              | "idKey"
              | "infoWindow">>;
          [key: string]: any;
      }

      Allows to override specific layer options with the RF data. When the rfEnabled option is set to true, the layer options specified within the layers property will override the corresponding options in the main layers option of the library config

      • [key: string]: any
      • Optionalneighbourhoods?: Partial<Pick<TMapynaLayer,
            | "latitudeKey"
            | "longitudeKey"
            | "idKey"
            | "infoWindow">>
      • Optionalschools?: Partial<Pick<TMapynaLayer,
            | "latitudeKey"
            | "longitudeKey"
            | "idKey"
            | "infoWindow">>
      • Optionalzipcodes?: Partial<Pick<TMapynaLayer,
            | "latitudeKey"
            | "longitudeKey"
            | "idKey"
            | "infoWindow">>
    • token: (() => Promise<string> | null) | Promise<string> | null

      The authentication token for the RealityFeed API

      Note: If the token is not provided, the map will not be able to fetch the data from the API

      Default

      null
  • scripts: {
        googleMapMarkerClustererScriptSource: string;
        googleMapMarkerSpiderfierScriptSource: string;
        leafletMarkerClustererDefaultStyleSource: string;
        leafletMarkerClustererScriptSource: string;
        leafletMarkerClustererStyleSource: string;
    }

    An Object contains URLs of external scripts required for the library

  • scrollWheel: boolean

    Determines whether the scroll wheel zoom functionality is enabled.

    Default

    true
  • spiderfy: {
        enabled: boolean;
        options: {
            circleFootSeparation: number;
            circleSpiralSwitchover: number;
            keepSpiderfied: boolean;
            markersWontHide: boolean;
            markersWontMove: boolean;
            nearbyDistance: number;
            spiralFootSeparation: number;
            spiralLengthFactor: number;
            spiralLengthStart: number;
        };
        zoom: number | null;
    }

    Configuration for spiderfying

    Note: Only available in Google Map

    • enabled: boolean

      Determines whether spiderfying is enabled

      Default

      true
    • options: {
          circleFootSeparation: number;
          circleSpiralSwitchover: number;
          keepSpiderfied: boolean;
          markersWontHide: boolean;
          markersWontMove: boolean;
          nearbyDistance: number;
          spiralFootSeparation: number;
          spiralLengthFactor: number;
          spiralLengthStart: number;
      }

      The options for spiderfying

      Default

      {
              markersWontMove: true,
              markersWontHide: true,
              keepSpiderfied: true,
              circleSpiralSwitchover : 9,
              spiralFootSeparation: 26,
              spiralLengthStart: 11,
              spiralLengthFactor: 4,
              circleFootSeparation: 23,
              nearbyDistance: 20
              }
      • circleFootSeparation: number
      • circleSpiralSwitchover: number
      • keepSpiderfied: boolean
      • markersWontHide: boolean
      • markersWontMove: boolean
      • nearbyDistance: number
      • spiralFootSeparation: number
      • spiralLengthFactor: number
      • spiralLengthStart: number
    • zoom: number | null

      zoom value to start spiderfying

      Default

      12
  • zoomAfterDrawing: boolean

    Determines whether the map zooms to the drawn shape after drawing is completed.

    Default

    false

Settings

Member Visibility