Map Render

The MapRender component is needed to enable all the Maps features in Crono.
The component is responsible for selecting the vector or raster map tile and for automating the process of a new Map initialization.

Install:

import { MapRender } from "@matchplat/crono";

<MapRender />;

Props

The available props for the component are:

export interface MapRenderProps {
  /** @param {center?: LngLatLike | undefined, zoom?: number | undefined, bounds?: LngLatBoundsLike | undefined}} [defaultValues] set default values for the map */
  defaultValues?: {
    center?: LngLatLike | undefined;
    zoom?: number | undefined;
    bounds?: LngLatBoundsLike | undefined;
  };
  /** @param {string} [height] height of the map container */
  height?: string;
  /** @param {string} [width] width of the map container */
  width?: string;
  /** @param {object} [styles] react CSS styles */
  styles?: CSSProperties | undefined;
  /** @param {GetMapInfo} [getMapInfo] get zoom and bounds from the map */
  getMapInfo?: GetMapInfo;
  /** @param {boolean} [centerClickedMarker] center the Map on the clicked Marker with animation */
  centerClickedMarker?: boolean;
  /** @param {string | StyleSpecification} [mapTile] set map Tile for server styles */
  mapTile?: string | StyleSpecification;
  /** @param {LngLatLike} [mapCenter] set map center */
  setMapCenter?: LngLatLike;
  /** @param {number} [mapZoom] set the zoom of the map */
  setMapZoom?: number;
  /** @param {LngLatBoundsLike | undefined} [setMapBounds] set the boundigs box of the map */
  setMapBounds?: LngLatBoundsLike | undefined;
  /** @param {boolean} [canFullScreen] if you want to disable the full screen button */
  canFullScreen?: boolean;
  /** @param {GeoJson} [geoJson] set the Markers on the map */
  geoJson?: GeoJson;
  /** @param {GeoJsonModeSelectionType} [geoJsonModeSelection] select layers of data */
  geoJsonModeSelection?: GeoJsonModeSelectionType;
  /** @param {'green' | 'blue' | 'red'} [heatmapPalette] select a palette for the heatmap */
  heatmapPalette?: Palette;
  /** @param {activateControls: boolean, activeColor: CronoColor, inactiveColor: CronoColor, activateSave} [isDraw] draw controls */
  setPolygon?: {
    activateControls: boolean;
    activeColor?: CronoColor;
    inactiveColor?: CronoColor;
    activateSave?: boolean;
  };
  /** @param {{center: {lng: number, lat: number}, radius: number, color: CronoColor}} [setCircle] create a Circle layer on the map */
  setCircle?: {
    center: { lng: number; lat: number };
    radius: number;
    color?: CronoColor;
  };
  /** @param {{coordinates: { lng: number, lat: number } | undefined, width?: string, height?: string}} [streetViewData] activate and set Street View */
  streetViewData?: {
    activateControls: boolean;
    coordinates: { lng: number; lat: number } | undefined;
    width?: string;
    height?: string;
  };
  /** @param {{ activateControl: boolean }} [heatClusterToggle] show controls to switch between heatmap and clusters */
  heatClusterToggle?: {
    activateControl: boolean;
    onToggleCluster: OnToggleCluster;
  };
  /** @param {boolean} [disableStyleSwitcher] disable the Style Switcher control */
  disableStyleSwitcher?: boolean;
  /** @param {boolean} [isLoading] map is loading data */
  isLoading?: boolean;
}

geoJson

The geoJson props is needed to work with markers and layers, like the heatmap.
It's a standardized "json kind" data structure used to work with maps on the web.

Crono's geoJson structure:

type GeoJson = {
  type: string;
  features: {
    type: string;
    properties: {
      id: string;
      size?: { width: string; height: string };
      fillColor?: string;
      icons?: { people: boolean; like: boolean };
      Tooltip?: { tooltip: JSX.Element; html?: string };
      tooltipOffset?: number;
      count: number;
    };
    geometry: {
      type: string;
      coordinates: [number, number];
    };
  }[];
};

Marker's type

A single marker is:

type GeoJsonMarker = {
  type: string;
  properties: {
    id: string;
    size?: { width: string; height: string };
    fillColor?: string;
    icons?: { people: boolean; like: boolean };
    Tooltip?: { tooltip: JSX.Element; html?: string };
    tooltipOffset?: number;
    count: number;
  };
  geometry: {
    type: string;
    coordinates: [number, number];
  };
};

geoJsonModeSelection

You can choose between different kinds of rendering for the geoJson file.
Actually Pointers or Heatmap are available for rendering.

Markers and Clusters

Check the Markers doc

Heatmap

Check the Heatmap doc