react-mapfilter/commonjs/MapView/ObservationLayer.js

These components are designed for viewing data in Mapeo. They share a common interface:

"use strict";

var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");

var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");

_Object$defineProperty(exports, "__esModule", {
  value: true
});

exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));

var _reduce = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/reduce"));

var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));

var _react = _interopRequireWildcard(require("react"));

var _reactMapboxGl = require("react-mapbox-gl");

// @flow
var observationSourceId = 'mapeo-observations-internal'; // const labelStyleLayer = {
//   id: 'labels',
//   type: 'symbol',
//   source: 'features',
//   layout: {
//     'text-field': '',
//     'text-allow-overlap': true,
//     'text-ignore-placement': true,
//     'text-size': 9,
//     'text-font': ['DIN Offc Pro Bold', 'Arial Unicode MS Bold']
//   },
//   paint: {
//     'text-color': '#fff',
//     'text-halo-color': 'rgba(100,100,100, 0.3)',
//     'text-halo-width': 0.3
//   }
// }

var pointStyleLayer = {
  id: 'points',
  type: 'circle',
  sourceId: observationSourceId,
  paint: {
    // make circles larger as the user zooms from z12 to z22
    'circle-radius': {
      base: 1.5,
      stops: [[7, 5], [18, 25]]
    },
    'circle-color': '#ff0000',
    'circle-opacity': 0.75,
    'circle-stroke-width': 1.5,
    'circle-stroke-color': '#ffffff',
    'circle-stroke-opacity': 0.9
  }
};
var pointHoverStyleLayer = {
  id: 'points-hover',
  type: 'circle',
  sourceId: observationSourceId,
  paint: (0, _assign.default)({}, pointStyleLayer.paint, {
    'circle-opacity': ['case', ['boolean', ['feature-state', 'hover'], false], 1, 0],
    'circle-stroke-width': 2.5,
    'circle-stroke-color': '#ffffff',
    'circle-stroke-opacity': ['case', ['boolean', ['feature-state', 'hover'], false], 1, 0]
  })
};

function observationsToGeoJsonSource(observations
/*: Observation[]*/
)
/*: GeoJsonSource*/
{
  return {
    type: 'geojson',
    data: {
      type: 'FeatureCollection',
      features: (0, _reduce.default)(observations).call(observations, function (acc, obs, i) {
        // Skip if null or undefined
        if (obs.lat == null || obs.lon == null) return acc;
        var point
        /*: FeaturePoint2D*/
        = {
          id: i,
          type: 'Feature',
          geometry: {
            type: 'Point',
            coordinates: [obs.lon, obs.lat]
          },
          properties: {
            id: obs.id
          }
        };
        acc.push(point);
        return acc;
      }, [])
    }
  };
}

var noop = function noop() {};

var ObservationLayer = function ObservationLayer(_ref) {
  var observations = _ref.observations,
      _ref$onClick = _ref.onClick,
      onClick = _ref$onClick === void 0 ? noop : _ref$onClick,
      onMouseLeave = _ref.onMouseLeave,
      onMouseMove = _ref.onMouseMove,
      _ref$print = _ref.print,
      print = _ref$print === void 0 ? false : _ref$print;
  var hovered = (0, _react.useRef)(null);
  var map = (0, _react.useContext)(_reactMapboxGl.MapContext);
  var geoJsonSource = (0, _react.useMemo)(function () {
    return observationsToGeoJsonSource(observations);
  }, [observations]);
  var handleMouseMove = (0, _react.useCallback)(function (e) {
    if (print) return;
    map.getCanvas().style.cursor = e.features.length ? 'pointer' : '';
    if (e.features.length === 0) return;

    if (hovered.current) {
      map.setFeatureState({
        source: observationSourceId,
        id: hovered.current
      }, {
        hover: false
      });
    }

    hovered.current = e.features[0].id;
    map.setFeatureState({
      source: observationSourceId,
      id: hovered.current
    }, {
      hover: true
    });
    onMouseMove(e);
  }, [map, onMouseMove, print]);
  var handleMouseLeave = (0, _react.useCallback)(function (e) {
    if (print) return;

    if (hovered.current) {
      map.setFeatureState({
        source: observationSourceId,
        id: hovered.current
      }, {
        hover: false
      });
    }

    hovered.current = null;
    map.getCanvas().style.cursor = '';
    onMouseLeave(e);
  }, [map, onMouseLeave, print]);
  var handleClick = (0, _react.useCallback)(function (e) {
    if (print) return;
    if (e.features.length === 0) return;
    onClick(e.features[0].properties.id);
  }, [onClick, print]);
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactMapboxGl.Source, {
    id: observationSourceId,
    geoJsonSource: geoJsonSource
  }), /*#__PURE__*/_react.default.createElement(_reactMapboxGl.Layer, (0, _extends2.default)({}, pointStyleLayer, {
    onClick: handleClick,
    onMouseMove: handleMouseMove,
    onMouseLeave: handleMouseLeave
  })), /*#__PURE__*/_react.default.createElement(_reactMapboxGl.Layer, pointHoverStyleLayer));
};

var _default = ObservationLayer;
exports.default = _default;
//# sourceMappingURL=ObservationLayer.js.map