sympler-map v1.0.8

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

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.