Installation

yard add sympler-map

Note: You must also have the following package installed in your project as a dependency.

• react-map-gl

Getting Started

import React, { useState, useRef } from "react";
import SymplerMap from "sympler-map";
import { ViewportProps, PointerEvent } from "react-map-gl";

// Create the type of response that will be used throughout the map
interface Response {
  lat: number;
  long: number;
  emotion_scores: {
    disgust: number;
    sadness: number;
    anger: number;
    joy: number;
    surprise: number;
    fear: number;
  };
  primary_emotion:
    | "anger"
    | "sadness"
    | "fear"
    | "joy"
    | "surprise"
    | "disgust";
}

// Create the response from the map
interface Results {
  results: Response[];
  event: PointerEvent;
}

const users: Response[] = [
  ...
];

function App() {
  const [responses] = useState(users);
  const [viewport, updateViewport] = useState({
    longitude: -43.9,
    latitude: 41.3,
    zoom: 2
  });

  const mapRef = useRef(null);

  function handleMapClick(results: Results) {
    console.log({ results });
  }

  function handleMapMove(viewport: ViewportProps) {
    updateViewport(viewport);
  }

  return (
    <div style={{ width: "100vw", height: "100vh", position: "relative" }}>
      <SymplerMap<Response>
        mapRef={mapRef}
        viewport={viewport as ViewportProps}
        responses={responses}
        onMapClick={handleMapClick}
        onMapMove={handleMapMove}
        mapboxToken={// provided by Mapbox}
      />
    </div>
  );
}

export default App;

API

| Prop | | Type | Description | | :--------------: | -------- | :------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | | mapRef | required | React.RefObject<MapGL> | This is an ref that you create and will be forwarded to the Map itself, allowing you access to internal APIs. | | viewport | required | ViewportProps | This is the state of the viewport. Initially you can pass it an object like { long: number, lat: number, zoom: number } and when the map first loads it will be centered on this location. | | responses | required | UserResponse[] | The individual responses to render onto the map. Each response must include the following keys { lat: number, long: number, emotion_scores: EmotionScores, primary_emotion: EmotionType }. More info on this here: link. | | emotions | | EmotionType[] | This is an array of all emotions (ie: ["joy", "anger"...]) that you'd render to the map. | | filteredEmotions | | EmotionType[] | This is an array of all emotions that you would like to filter on. Pass an empty array ([]) to not filter on any emotions and display all. | | onMapClick | required | (responses: UserResponses[]) => void | This function is called every time the map is clicked. If there are responses, they are made available in this callback. | | onMapMove | required | (viewport: ViewportProps) => void | This function is called every time the map is moved. The latest viewport data is made available in this callback, in which your local viewport state should be updated with these values. | | onMapChange | | (state: ExtraState) => void | | | onMapLoad | | () => void | | | mapboxToken | required | string | The access token provided by Mapbox. | | children | | | Any JSX you'd like to render inside of the map. |

Errors

TypeError: Cannot read property 'heatmap' of undefined

It's likely you are supplying the map with emotions it does not support. Current we only handle anger (red), surprise (orange), joy (yellow), disgust (green), sadness (blue), fear (purple). Make sure you are only passing in a value from this list.