@performant-software/geospatial 2.1.0-beta.2 → 2.1.0-beta.3

package/dist/index.es5.js

@@ -1,27 +1,25 @@
 import { j as e } from "./index.es13.js";
-import { useMap as i, PulsingMarkerLayer as o, MixedGeoJSONLayer as f } from "@peripleo/maplibre";
-import { useEffect as l } from "react";
-import { DEFAULT_FILL_STYLE as n, DEFAULT_POINT_STYLE as d, DEFAULT_STROKE_STYLE as u } from "./index.es45.js";
+import { useMap as o, PulsingMarkerLayer as f, MixedGeoJSONLayer as l } from "@peripleo/maplibre";
+import { useEffect as n } from "react";
+import { DEFAULT_FILL_STYLE as r, DEFAULT_POINT_STYLE as d, DEFAULT_STROKE_STYLE as m } from "./index.es45.js";
 import S from "./index.es9.js";
-const m = 2, s = (t) => {
-  const a = i();
-  return l(() => {
+const u = 2, s = (t) => {
+  const a = o();
+  return n(() => {
     if (a && t.data) {
-      const r = S.getBoundingBox(t.data, t.buffer);
-      a.fitBounds(r);
+      const i = S.getBoundingBox(t.data, t.buffer);
+      a.fitBounds(i);
     }
   }, [a, t.buffer, t.data]), /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    /* @__PURE__ */ e.jsx(
-      o,
+    t.animate && /* @__PURE__ */ e.jsx(
+      f,
       {
-        id: "current",
         data: t.data
       }
     ),
     /* @__PURE__ */ e.jsx(
-      f,
+      l,
       {
-        id: "current",
         data: t.data,
         fillStyle: t.fillStyle,
         strokeStyle: t.strokeStyle,
@@ -31,10 +29,10 @@ const m = 2, s = (t) => {
   ] });
 };
 s.defaultProps = {
-  buffer: m,
-  fillStyle: n,
+  buffer: u,
+  fillStyle: r,
   pointStyle: d,
-  strokeStyle: u
+  strokeStyle: m
 };
 export {
   s as default

package/dist/index.es5.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es5.js","sources":["../src/components/LocationMarker.js"],"sourcesContent":["// @flow\n\nimport { MixedGeoJSONLayer, PulsingMarkerLayer, useMap } from '@peripleo/maplibre';\nimport React, { useEffect } from 'react';\nimport { DEFAULT_FILL_STYLE, DEFAULT_POINT_STYLE, DEFAULT_STROKE_STYLE } from '../utils/MapStyles';\nimport MapUtils from '../utils/Map';\n\ntype Props = {\n  /**\n   * The number of miles to buffer the GeoJSON data.\n   */\n  buffer: number,\n\n  /**\n   * The GeoJSON data representing the location.\n   */\n  data: { [key: string]: any },\n\n  /**\n   * GeoJSON layer fill style.\n   */\n  fillStyle?: { [key: string]: any },\n\n  /**\n   * GeoJSON layer point style.\n   */\n  pointStyle?: { [key: string]: any },\n\n  /**\n   * GeoJSON layer stroke style\n   */\n  strokeStyle?: { [key: string]: any }\n};\n\nconst DEFAULT_BUFFER = 2;\n\n/**\n * This component renders a location marker to be used in a Peripleo context.\n */\nconst LocationMarker = (props: Props) => {\n  const map = useMap();\n\n  /**\n   * Sets the bounding box on the map.\n   */\n  useEffect(() => {\n    if (map && props.data) {\n      const boundingBox = MapUtils.getBoundingBox(props.data, props.buffer);\n      map.fitBounds(boundingBox);\n    }\n  }, [map, props.buffer, props.data]);\n\n  return (\n    <>\n      <PulsingMarkerLayer\n        id='current'\n        data={props.data}\n      />\n      <MixedGeoJSONLayer\n        id='current'\n        data={props.data}\n        fillStyle={props.fillStyle}\n        strokeStyle={props.strokeStyle}\n        pointStyle={props.pointStyle}\n      />\n    </>\n  );\n};\n\nLocationMarker.defaultProps = {\n  buffer: DEFAULT_BUFFER,\n  fillStyle: DEFAULT_FILL_STYLE,\n  pointStyle: DEFAULT_POINT_STYLE,\n  strokeStyle: DEFAULT_STROKE_STYLE\n};\n\nexport default LocationMarker;\n"],"names":["DEFAULT_BUFFER","LocationMarker","props","map","useMap","useEffect","boundingBox","MapUtils","jsxs","Fragment","jsx","PulsingMarkerLayer","MixedGeoJSONLayer","DEFAULT_FILL_STYLE","DEFAULT_POINT_STYLE","DEFAULT_STROKE_STYLE"],"mappings":";;;;;AAkCA,MAAMA,IAAiB,GAKjBC,IAAiB,CAACC,MAAiB;AACvC,QAAMC,IAAMC;AAKZ,SAAAC,EAAU,MAAM;AACV,QAAAF,KAAOD,EAAM,MAAM;AACrB,YAAMI,IAAcC,EAAS,eAAeL,EAAM,MAAMA,EAAM,MAAM;AACpE,MAAAC,EAAI,UAAUG,CAAW;AAAA,IAC3B;AAAA,EAAA,GACC,CAACH,GAAKD,EAAM,QAAQA,EAAM,IAAI,CAAC,GAI9BM,gBAAAA,EAAA,KAAAC,YAAA,EAAA,UAAA;AAAA,IAAAC,gBAAAA,EAAA;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH,MAAMT,EAAM;AAAA,MAAA;AAAA,IACd;AAAA,IACAQ,gBAAAA,EAAA;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH,MAAMV,EAAM;AAAA,QACZ,WAAWA,EAAM;AAAA,QACjB,aAAaA,EAAM;AAAA,QACnB,YAAYA,EAAM;AAAA,MAAA;AAAA,IACpB;AAAA,EACF,EAAA,CAAA;AAEJ;AAEAD,EAAe,eAAe;AAAA,EAC5B,QAAQD;AAAA,EACR,WAAWa;AAAA,EACX,YAAYC;AAAA,EACZ,aAAaC;AACf;"}
+{"version":3,"file":"index.es5.js","sources":["../src/components/LocationMarkers.js"],"sourcesContent":["// @flow\n\nimport { MixedGeoJSONLayer, PulsingMarkerLayer, useMap } from '@peripleo/maplibre';\nimport React, { useEffect } from 'react';\nimport { DEFAULT_FILL_STYLE, DEFAULT_POINT_STYLE, DEFAULT_STROKE_STYLE } from '../utils/MapStyles';\nimport MapUtils from '../utils/Map';\n\ntype Props = {\n  /**\n   * If `true`, the point marker will display with a pulsing animation.\n   */\n  animate?: boolean,\n\n  /**\n   * The number of miles to buffer the GeoJSON data.\n   */\n  buffer: number,\n\n  /**\n   * The GeoJSON data representing the location.\n   */\n  data: { [key: string]: any },\n\n  /**\n   * GeoJSON layer fill style.\n   */\n  fillStyle?: { [key: string]: any },\n\n  /**\n   * GeoJSON layer point style.\n   */\n  pointStyle?: { [key: string]: any },\n\n  /**\n   * GeoJSON layer stroke style\n   */\n  strokeStyle?: { [key: string]: any }\n};\n\nconst DEFAULT_BUFFER = 2;\n\n/**\n * This component renders a location marker to be used in a Peripleo context.\n */\nconst LocationMarkers = (props: Props) => {\n  const map = useMap();\n\n  /**\n   * Sets the bounding box on the map.\n   */\n  useEffect(() => {\n    if (map && props.data) {\n      const boundingBox = MapUtils.getBoundingBox(props.data, props.buffer);\n      map.fitBounds(boundingBox);\n    }\n  }, [map, props.buffer, props.data]);\n\n  return (\n    <>\n      { props.animate && (\n        <PulsingMarkerLayer\n          data={props.data}\n        />\n      )}\n      <MixedGeoJSONLayer\n        data={props.data}\n        fillStyle={props.fillStyle}\n        strokeStyle={props.strokeStyle}\n        pointStyle={props.pointStyle}\n      />\n    </>\n  );\n};\n\nLocationMarkers.defaultProps = {\n  buffer: DEFAULT_BUFFER,\n  fillStyle: DEFAULT_FILL_STYLE,\n  pointStyle: DEFAULT_POINT_STYLE,\n  strokeStyle: DEFAULT_STROKE_STYLE\n};\n\nexport default LocationMarkers;\n"],"names":["DEFAULT_BUFFER","LocationMarkers","props","map","useMap","useEffect","boundingBox","MapUtils","jsxs","Fragment","jsx","PulsingMarkerLayer","MixedGeoJSONLayer","DEFAULT_FILL_STYLE","DEFAULT_POINT_STYLE","DEFAULT_STROKE_STYLE"],"mappings":";;;;;AAuCA,MAAMA,IAAiB,GAKjBC,IAAkB,CAACC,MAAiB;AACxC,QAAMC,IAAMC;AAKZ,SAAAC,EAAU,MAAM;AACV,QAAAF,KAAOD,EAAM,MAAM;AACrB,YAAMI,IAAcC,EAAS,eAAeL,EAAM,MAAMA,EAAM,MAAM;AACpE,MAAAC,EAAI,UAAUG,CAAW;AAAA,IAC3B;AAAA,EAAA,GACC,CAACH,GAAKD,EAAM,QAAQA,EAAM,IAAI,CAAC,GAI5BM,gBAAAA,EAAA,KAAAC,YAAA,EAAA,UAAA;AAAA,IAAAP,EAAM,WACNQ,gBAAAA,EAAA;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,MAAMT,EAAM;AAAA,MAAA;AAAA,IACd;AAAA,IAEFQ,gBAAAA,EAAA;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,MAAMV,EAAM;AAAA,QACZ,WAAWA,EAAM;AAAA,QACjB,aAAaA,EAAM;AAAA,QACnB,YAAYA,EAAM;AAAA,MAAA;AAAA,IACpB;AAAA,EACF,EAAA,CAAA;AAEJ;AAEAD,EAAgB,eAAe;AAAA,EAC7B,QAAQD;AAAA,EACR,WAAWa;AAAA,EACX,YAAYC;AAAA,EACZ,aAAaC;AACf;"}

package/dist/index.es62.js

@@ -1,4 +1,4 @@
-import { __exports as a } from "./index.es225.js";
+import { __exports as a } from "./index.es198.js";
 function i(r, s) {
   for (var o = 0; o < s.length; o++) {
     const e = s[o];

package/dist/index.es63.js

@@ -1,10 +1,10 @@
 import * as l from "react";
 import { useContext as b, useState as E, useRef as c, useEffect as x, useImperativeHandle as w, useMemo as y } from "react";
 import { MountedMapsContext as L } from "./index.es73.js";
-import m from "./index.es218.js";
-import I from "./index.es219.js";
-import C from "./index.es220.js";
-import g from "./index.es221.js";
+import m from "./index.es191.js";
+import I from "./index.es192.js";
+import C from "./index.es193.js";
+import g from "./index.es194.js";
 const R = l.createContext(null);
 function A(e, f, d) {
   const o = b(L), [i, p] = E(null), s = c(), { current: a } = c({ mapLib: null, map: null });

package/dist/index.es64.js

@@ -1,9 +1,9 @@
 import * as k from "react";
 import { memo as A, forwardRef as P, useContext as C, useRef as D, useMemo as M, useEffect as h, useImperativeHandle as y } from "react";
 import { createPortal as w } from "react-dom";
-import { applyReactStyle as x } from "./index.es222.js";
+import { applyReactStyle as x } from "./index.es195.js";
 import { MapContext as O } from "./index.es63.js";
-import { arePointsEqual as S } from "./index.es223.js";
+import { arePointsEqual as S } from "./index.es196.js";
 function q(o, E) {
   const { map: R, mapLib: b } = C(O), i = D({ props: o });
   i.current.props = o;

package/dist/index.es65.js

@@ -1,8 +1,8 @@
 import { createPortal as h } from "react-dom";
 import { memo as L, forwardRef as v, useContext as C, useMemo as f, useRef as x, useEffect as m, useImperativeHandle as N } from "react";
-import { applyReactStyle as M } from "./index.es222.js";
+import { applyReactStyle as M } from "./index.es195.js";
 import { MapContext as O } from "./index.es63.js";
-import { deepEqual as y } from "./index.es223.js";
+import { deepEqual as y } from "./index.es196.js";
 function r(t) {
   return new Set(t ? t.trim().split(/\s+/) : []);
 }

package/dist/index.es66.js

@@ -1,5 +1,5 @@
 import { memo as i, useEffect as r } from "react";
-import { applyReactStyle as e } from "./index.es222.js";
+import { applyReactStyle as e } from "./index.es195.js";
 import l from "./index.es12.js";
 function m(t) {
   const o = l(({ mapLib: n }) => new n.AttributionControl(t), {

package/dist/index.es67.js

@@ -1,5 +1,5 @@
 import { memo as o, useEffect as l } from "react";
-import { applyReactStyle as r } from "./index.es222.js";
+import { applyReactStyle as r } from "./index.es195.js";
 import c from "./index.es12.js";
 function i(t) {
   const n = c(({ mapLib: e }) => new e.FullscreenControl({

package/dist/index.es68.js

@@ -1,5 +1,5 @@
 import { memo as s, forwardRef as d, useRef as v, useImperativeHandle as _, useEffect as f } from "react";
-import { applyReactStyle as p } from "./index.es222.js";
+import { applyReactStyle as p } from "./index.es195.js";
 import m from "./index.es12.js";
 function b(e, c) {
   const a = v({ props: e }), l = m(({ mapLib: i }) => {

package/dist/index.es69.js

@@ -1,5 +1,5 @@
 import { memo as i, useEffect as e } from "react";
-import { applyReactStyle as l } from "./index.es222.js";
+import { applyReactStyle as l } from "./index.es195.js";
 import r from "./index.es12.js";
 function m(t) {
   const o = r(({ mapLib: n }) => new n.NavigationControl(t), {

package/dist/index.es70.js

@@ -1,5 +1,5 @@
 import { memo as m, useRef as u, useEffect as l } from "react";
-import { applyReactStyle as a } from "./index.es222.js";
+import { applyReactStyle as a } from "./index.es195.js";
 import f from "./index.es12.js";
 function r(t) {
   const i = f(({ mapLib: c }) => new c.ScaleControl(t), {

package/dist/index.es71.js

@@ -1,7 +1,7 @@
 import { useContext as m, useRef as L, useState as g, useMemo as x, useEffect as h } from "react";
 import { MapContext as b } from "./index.es63.js";
-import d from "./index.es224.js";
-import { deepEqual as l } from "./index.es223.js";
+import d from "./index.es197.js";
+import { deepEqual as l } from "./index.es196.js";
 function k(t, e, a, o) {
   if (d(a.id === o.id, "layer id changed"), d(a.type === o.type, "layer type changed"), a.type === "custom" || o.type === "custom")
     return;

package/dist/index.es72.js

@@ -1,8 +1,8 @@
 import * as u from "react";
 import { useContext as f, useRef as y, useState as m, useMemo as g, useEffect as S, cloneElement as h } from "react";
 import { MapContext as C } from "./index.es63.js";
-import s from "./index.es224.js";
-import { deepEqual as v } from "./index.es223.js";
+import s from "./index.es197.js";
+import { deepEqual as v } from "./index.es196.js";
 let x = 0;
 function U(t, e, a) {
   if (t.style && t.style._loaded) {

package/dist/index.es75.js

@@ -2,7 +2,7 @@ import r from "./index.es19.js";
 import n from "./index.es142.js";
 import f from "./index.es103.js";
 import { push as u } from "./index.es15.js";
-import m from "./index.es217.js";
+import m from "./index.es225.js";
 function l(o) {
   return n(f(o), function(t) {
     var i = r[t] = o[t];

package/dist/index.es82.js

@@ -1,4 +1,4 @@
-import t from "./index.es191.js";
+import t from "./index.es199.js";
 const e = t("String");
 export {
   e as default

package/dist/index.es83.js

@@ -1,4 +1,4 @@
-import e from "./index.es191.js";
+import e from "./index.es199.js";
 const t = e("Number");
 export {
   t as default

package/dist/index.es84.js

@@ -1,4 +1,4 @@
-import t from "./index.es191.js";
+import t from "./index.es199.js";
 const a = t("Date");
 export {
   a as default

package/dist/index.es85.js

@@ -1,4 +1,4 @@
-import e from "./index.es191.js";
+import e from "./index.es199.js";
 const o = e("RegExp");
 export {
   o as default

package/dist/index.es86.js

@@ -1,4 +1,4 @@
-import r from "./index.es191.js";
+import r from "./index.es199.js";
 const t = r("Error");
 export {
   t as default

package/dist/index.es87.js

@@ -1,4 +1,4 @@
-import o from "./index.es191.js";
+import o from "./index.es199.js";
 const e = o("Symbol");
 export {
   e as default

package/dist/index.es88.js

@@ -1,4 +1,4 @@
-import r from "./index.es191.js";
+import r from "./index.es199.js";
 const f = r("ArrayBuffer");
 export {
   f as default

package/dist/index.es89.js

@@ -1,4 +1,4 @@
-import r from "./index.es191.js";
+import r from "./index.es199.js";
 import i from "./index.es16.js";
 import a from "./index.es88.js";
 import { hasStringTagBug as e } from "./index.es17.js";

package/dist/index.es90.js

@@ -1,5 +1,5 @@
 import { nativeIsArray as r } from "./index.es15.js";
-import t from "./index.es191.js";
+import t from "./index.es199.js";
 const e = r || t("Array");
 export {
   e as default

package/dist/index.es93.js

@@ -1,7 +1,7 @@
 import { supportsArrayBuffer as i, nativeIsView as t, toString as a } from "./index.es15.js";
 import e from "./index.es89.js";
 import o from "./index.es114.js";
-import n from "./index.es193.js";
+import n from "./index.es201.js";
 var s = /\[object ((I|Ui)nt(8|16|32)|Float(32|64)|Uint8Clamped|Big(I|Ui)nt64)Array\]/;
 function f(r) {
   return t ? t(r) && !e(r) : n(r) && s.test(a.call(r));

package/dist/index.es94.js

@@ -1,4 +1,4 @@
-import e from "./index.es194.js";
+import e from "./index.es202.js";
 import i from "./index.es90.js";
 import m from "./index.es82.js";
 import n from "./index.es18.js";

package/dist/index.es96.js

@@ -1,13 +1,13 @@
 import m from "./index.es19.js";
 import { toString as g, SymbolProto as h } from "./index.es15.js";
-import j from "./index.es195.js";
+import j from "./index.es203.js";
 import D from "./index.es93.js";
 import y from "./index.es16.js";
 import { hasStringTagBug as V } from "./index.es17.js";
 import v from "./index.es89.js";
 import w from "./index.es98.js";
-import q from "./index.es192.js";
-import d from "./index.es196.js";
+import q from "./index.es200.js";
+import d from "./index.es204.js";
 var B = "[object DataView]";
 function c(e, r, f, n) {
   if (e === r)

package/dist/index.es97.js

@@ -1,4 +1,4 @@
-import e from "./index.es191.js";
+import e from "./index.es199.js";
 const a = e("WeakSet");
 export {
   a as default

package/dist/index.es98.js

@@ -1,7 +1,7 @@
 import e from "./index.es77.js";
 import { nativeKeys as f, hasEnumBug as m } from "./index.es15.js";
-import n from "./index.es192.js";
-import o from "./index.es198.js";
+import n from "./index.es200.js";
+import o from "./index.es206.js";
 function c(r) {
   if (!e(r))
     return [];

package/dist/index.es99.js

@@ -1,6 +1,6 @@
 import e from "./index.es77.js";
 import { hasEnumBug as f } from "./index.es15.js";
-import i from "./index.es198.js";
+import i from "./index.es206.js";
 function s(r) {
   if (!e(r))
     return [];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/geospatial",
-  "version": "2.1.0-beta.2",
+  "version": "2.1.0-beta.3",
   "description": "A package of components for all things map-related.",
   "license": "MIT",
   "main": "./dist/index.cjs.js",

package/src/components/{LocationMarker.js → LocationMarkers.js}

@@ -6,6 +6,11 @@ import { DEFAULT_FILL_STYLE, DEFAULT_POINT_STYLE, DEFAULT_STROKE_STYLE } from '.
 import MapUtils from '../utils/Map';
 
 type Props = {
+  /**
+   * If `true`, the point marker will display with a pulsing animation.
+   */
+  animate?: boolean,
+
   /**
    * The number of miles to buffer the GeoJSON data.
    */
@@ -37,7 +42,7 @@ const DEFAULT_BUFFER = 2;
 /**
  * This component renders a location marker to be used in a Peripleo context.
  */
-const LocationMarker = (props: Props) => {
+const LocationMarkers = (props: Props) => {
   const map = useMap();
 
   /**
@@ -52,12 +57,12 @@ const LocationMarker = (props: Props) => {
 
   return (
     <>
-      <PulsingMarkerLayer
-        id='current'
-        data={props.data}
-      />
+      { props.animate && (
+        <PulsingMarkerLayer
+          data={props.data}
+        />
+      )}
       <MixedGeoJSONLayer
-        id='current'
         data={props.data}
         fillStyle={props.fillStyle}
         strokeStyle={props.strokeStyle}
@@ -67,11 +72,11 @@ const LocationMarker = (props: Props) => {
   );
 };
 
-LocationMarker.defaultProps = {
+LocationMarkers.defaultProps = {
   buffer: DEFAULT_BUFFER,
   fillStyle: DEFAULT_FILL_STYLE,
   pointStyle: DEFAULT_POINT_STYLE,
   strokeStyle: DEFAULT_STROKE_STYLE
 };
 
-export default LocationMarker;
+export default LocationMarkers;

package/src/index.js

@@ -4,7 +4,7 @@
 export { default as DrawControl } from './components/DrawControl';
 export { default as GeoJsonLayer } from './components/GeoJsonLayer';
 export { default as LayerMenu } from './components/LayerMenu';
-export { default as LocationMarker } from './components/LocationMarker';
+export { default as LocationMarkers } from './components/LocationMarkers';
 export { default as MapControl } from './components/MapControl';
 export { default as MapDraw } from './components/MapDraw';
 export { default as RasterLayer } from './components/RasterLayer';

package/types/components/LocationMarker.js.flow

@@ -6,6 +6,11 @@ import { DEFAULT_FILL_STYLE, DEFAULT_POINT_STYLE, DEFAULT_STROKE_STYLE } from '.
 import MapUtils from '../utils/Map';
 
 type Props = {
+  /**
+   * If `true`, the point marker will display with a pulsing animation.
+   */
+  animate?: boolean,
+
   /**
    * The number of miles to buffer the GeoJSON data.
    */
@@ -52,12 +57,12 @@ const LocationMarker = (props: Props) => {
 
   return (
     <>
-      <PulsingMarkerLayer
-        id='current'
-        data={props.data}
-      />
+      { props.animate && (
+        <PulsingMarkerLayer
+          data={props.data}
+        />
+      )}
       <MixedGeoJSONLayer
-        id='current'
         data={props.data}
         fillStyle={props.fillStyle}
         strokeStyle={props.strokeStyle}

package/types/components/LocationMarkers.js.flow

@@ -0,0 +1,82 @@
+// @flow
+
+import { MixedGeoJSONLayer, PulsingMarkerLayer, useMap } from '@peripleo/maplibre';
+import React, { useEffect } from 'react';
+import { DEFAULT_FILL_STYLE, DEFAULT_POINT_STYLE, DEFAULT_STROKE_STYLE } from '../utils/MapStyles';
+import MapUtils from '../utils/Map';
+
+type Props = {
+  /**
+   * If `true`, the point marker will display with a pulsing animation.
+   */
+  animate?: boolean,
+
+  /**
+   * The number of miles to buffer the GeoJSON data.
+   */
+  buffer: number,
+
+  /**
+   * The GeoJSON data representing the location.
+   */
+  data: { [key: string]: any },
+
+  /**
+   * GeoJSON layer fill style.
+   */
+  fillStyle?: { [key: string]: any },
+
+  /**
+   * GeoJSON layer point style.
+   */
+  pointStyle?: { [key: string]: any },
+
+  /**
+   * GeoJSON layer stroke style
+   */
+  strokeStyle?: { [key: string]: any }
+};
+
+const DEFAULT_BUFFER = 2;
+
+/**
+ * This component renders a location marker to be used in a Peripleo context.
+ */
+const LocationMarkers = (props: Props) => {
+  const map = useMap();
+
+  /**
+   * Sets the bounding box on the map.
+   */
+  useEffect(() => {
+    if (map && props.data) {
+      const boundingBox = MapUtils.getBoundingBox(props.data, props.buffer);
+      map.fitBounds(boundingBox);
+    }
+  }, [map, props.buffer, props.data]);
+
+  return (
+    <>
+      { props.animate && (
+        <PulsingMarkerLayer
+          data={props.data}
+        />
+      )}
+      <MixedGeoJSONLayer
+        data={props.data}
+        fillStyle={props.fillStyle}
+        strokeStyle={props.strokeStyle}
+        pointStyle={props.pointStyle}
+      />
+    </>
+  );
+};
+
+LocationMarkers.defaultProps = {
+  buffer: DEFAULT_BUFFER,
+  fillStyle: DEFAULT_FILL_STYLE,
+  pointStyle: DEFAULT_POINT_STYLE,
+  strokeStyle: DEFAULT_STROKE_STYLE
+};
+
+export default LocationMarkers;

package/types/index.js.flow

@@ -4,7 +4,7 @@
 export { default as DrawControl } from './components/DrawControl';
 export { default as GeoJsonLayer } from './components/GeoJsonLayer';
 export { default as LayerMenu } from './components/LayerMenu';
-export { default as LocationMarker } from './components/LocationMarker';
+export { default as LocationMarkers } from './components/LocationMarkers';
 export { default as MapControl } from './components/MapControl';
 export { default as MapDraw } from './components/MapDraw';
 export { default as RasterLayer } from './components/RasterLayer';