{"size": 2073, "ext": "js", "max_stars_repo_path": "src/webapp/components/QuadrantMap.js", "max_stars_repo_name": "sandfort/mutual-aid-app", "max_stars_repo_stars_event_min_datetime": "2020-04-02T20:08:07.000Z", "max_stars_repo_stars_event_max_datetime": "2021-03-15T03:10:57.000Z", "max_issues_repo_path": "src/webapp/components/QuadrantMap.js", "max_issues_repo_name": "sandfort/mutual-aid-app", "max_issues_repo_issues_event_min_datetime": "2020-03-29T18:14:40.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-27T07:51:08.000Z", "max_forks_repo_path": "src/webapp/components/QuadrantMap.js", "max_forks_repo_name": "sandfort/mutual-aid-app", "max_forks_repo_forks_event_min_datetime": "2020-04-06T23:43:10.000Z", "max_forks_repo_forks_event_max_datetime": "2020-12-29T02:13:34.000Z"}
{"max_stars_count": 22, "max_issues_count": 127, "max_forks_count": 20, "avg_line_length": 23.5568181818, "max_line_length": 66, "alphanum_fraction": 0.5233960444}
import React from "react";
import { Feature, Layer, Source } from "react-mapbox-gl";
import { LngLat } from "mapbox-gl";
import quadrantsGeoJSON from "lib/assets/crownheights.json";
import { findBounds } from "webapp/helpers/mapbox-coordinates";
import BasicMap from "./BasicMap";
import {
  CROWN_HEIGHTS_BOUNDS,
  CROWN_HEIGHTS_CENTER_COORD,
} from "../helpers/map-constants";

const QuadrantsLayers = () => {
  return (
    <>
      {/* load geojson source */}
      <Source
        id="quadrants_src"
        geoJsonSource={{
          type: "geojson",
          data: quadrantsGeoJSON,
        }}
      />

      {/* fill quadrants */}
      <Layer
        sourceId="quadrants_src"
        type="fill"
        paint={{
          "fill-color": {
            type: "identity",
            property: "fill",
          },
          "fill-opacity": 0.25,
        }}
      />

      {/* label quadrants */}
      <Layer
        sourceId="quadrants_src"
        type="symbol"
        layout={{
          "text-field": {
            type: "identity",
            property: "id",
          },
          "text-size": 20,
        }}
      />
    </>
  );
};

const QuadrantMap = ({ locations = [], containerStyle = {} }) => {
  const lnglats = locations.map(
    (location) => new LngLat(location.lng, location.lat)
  );
  const bounds =
    lnglats.length > 0
      ? findBounds([...CROWN_HEIGHTS_BOUNDS, ...lnglats])
      : CROWN_HEIGHTS_BOUNDS;

  return (
    <BasicMap
      center={CROWN_HEIGHTS_CENTER_COORD}
      bounds={bounds}
      containerStyle={containerStyle}
    >
      <QuadrantsLayers />
      {/* display marker for current address if exists */}
      {lnglats.map(({ lng, lat, code }, i) => {
        return (
          <Layer
            key={code}
            type="symbol"
            id={`marker-${i}`}
            layout={{ "icon-image": "star-15", "icon-size": 1.5 }}
          >
            <Feature coordinates={[lng, lat]} />
          </Layer>
        );
      })}
    </BasicMap>
  );
};

export default QuadrantMap;
export { QuadrantsLayers };
