npm install grove-react-map-components
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.
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.
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
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
.geometryor.locationproperties, which can then contain either an array as.coordinatesor an object with.lat | .latitudeand.long | .longitude. Optionally may include.typeand.featureTypefor styling and selection filtering. The entire feature object will be stored on the resulting map feature as.datastyleMap: 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
fitwith a FeatureLayer that may potentially contain a single feature.layerName: string Used for debugging purposes. Optional
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 maplonLat (default:
[-95.79, 34.48]) - center of the mapzoom (default:
4) - zoom of the map