grove-react-map-components

Demo

Installation

npm install @marklogic-community/grove-react-map-components

MapContext

The MapContext is used to reference and manipulate the underlying OpenLayers map instance. It is a react context and, as such, is available to any component within the DOM hierarchy of the provider. Use a parent MapProvider so that all child map components will affect the same map instance. This allows multiple instances of a map to be created depending on the needs of the application. Grove-react-map-components use this context internally. Your custom components can also use them by importing MapContext and referencing it via useContext(MapContext) or contextType = MapContext in your React component.

<MapProvider>

The MapProvder is a required parent component that exposes the MapContext to its child components. It renders nothing directly and encapsulates an instance of a map. You can have multiple MapProviders instances.

<OpenLayersMap>

This is a basemap component that will create a map instance using OpenLayers API. It must appear within a MapProvider parent and supports the following properties:

projection: "EPSG:3857"

center: [-95.79, 34.48]

zoom: 4

minZoom: 0

maxZoom: 28

cssClass: "olMap"

bingAPIKey: undefined. If provided, will use Bing basemap instead of OSM

bingImagerySet: used to specify the Bing imagery set if bingAPIKey is provided. Defaults to "AerialWithLabels"

allowFullScreen: false If true, adds a full screen control to the map

showMousePosition: false If true, displays mouse position on the map

<FeatureLayer>

Used to add features to an existing base map. Must appear within a MapProvider. Can have multiple FeatureLayer components within a single map. They will be added to the map in the order they appear in the DOM. FeatureLayer removes its created map layer upon unmount of the component, therefore toggle the hidden property if layer order is important to your application. It supports the following properties:

features: array An array of features to display. Supports a variety of formats, but must include either .geometry or .location properties, which can then contain either an array as .coordinates or an object with .lat | .latitude and .long | .longitude. Optionally may include .type and .featureType for styling and selection filtering. The entire feature object will be stored on the resulting map feature as .data

styleMap: object an abstraction of OpenLayers style options. The map should be keyed by feature type. An example of a style definition is included in demo/index.js

cluster: object an object definition if clustering is desired. The structure of the object is passed to the cluster source. Optional

fit: false If true, will fit the map bounds to the extent of this layer when features are updated. Note: you may wish to set maxZoom on the map if using fit with a FeatureLayer that may potentially contain a single feature.

layerName: string Used for debugging purposes. Optional

<OpenLayersMap>

This component shows a geospatial map using OpenLayers API. It displays the geospatial facets set as a property of this component. It allows user to select areas of the map and emit a boundsChanged event if set.

facets - geospatial facets

geoFacetNames - only displays the geospatial facets from the specified names

boundsChanged(drawnBounds) - function called when the user draws points, polygons, and/or circles in the map

markerClick(uri) - function called when the user selects a marker in the map

class (default: olmap) - the css class of the map

lonLat (default: [-95.79, 34.48]) - center of the map

zoom (default: 4) - zoom of the map