ReactiveOpenStreetMap
A ReactiveOpenStreetMap
creates a data-driven map UI component using React-Leaflet. It is the key component for building map based experiences.
Example uses:
- showing a map of user checkins by city and topics for powering discovery based experiences.
- displaying restaurants filtered by a nearby distance query on a map.
Usage
Basic Usage
<ReactiveOpenStreetMap
componentId="MapUI"
dataField="location"
title="Venue Location Map"
/>
Usage With All Props
<ReactiveOpenStreetMap
componentId="MapUI"
dataField="location"
title="Venue Location Map"
size={100}
defaultZoom={13}
onPopoverClick={this.onPopoverClick}
stream={true}
// 'react' defines when and how the map component should update
react={{
and: "CitySensor"
}}
// map events
renderData={this.renderData}
// less useful props
autoCenter={true}
/>
Props
-
componentId
String
unique identifier of the component, can be referenced in other components’react
prop. -
dataField
String
DB data field to be connected to the component’s UI view, usually of a geopoint (i.e. location) data type and used for rendering the markers on the map. -
size
Number
[optional] number of results to show in the map view, can be a number in the range [1, 1000]. Defaults to 100. -
defaultZoom
Number
[optional] preset map’s zoom level, accepts integer values between [0, 20]. 0 is the minimum zoom level, where you can see the entire globe. 20 is the maximum zoom level. Defaults to 13. -
defaultCenter
Object
[optional] preset map’s center position by specifying an object with validlat
andlng
values. This prop, when set, will cause the component to run a geo-distance query with a distance of 10mi (Refer:defaultRadius
andunit
prop to configure the distance). -
center
Object
[optional] set map’s center position by specifying an object with validlat
andlng
values. This prop, when set, will cause the component to run a geo-distance query with a distance of 10mi (Refer:defaultRadius
andunit
prop to configure the distance). -
defaultRadius
Number
[optional] used as distance value for the geo-distance query whendefaultCenter
orcenter
is set. It accepts all positive integers. -
loader
String or JSX
[optional] display to show the user while the data is loading, acceptsString
orJSX
markup. -
unit
String
[optional] unit for distance measurement, usesmi
(for miles) by default. Distance units can be specified from the following: -
showMarkers
Boolean
[optional] whether to show the markers on the map, defaults totrue
. Sometimes, it doesn’t make sense to display markers (when building a heatmap or weather map or a directions navigation map) -
showSearchAsMove
Boolean
[optional] whether to show the Search As I Move checkbox in the UI. Defaults totrue
. -
searchAsMove
Boolean
[optional] whether to set the Search As I Move checkbox. Defaults tofalse
. -
defaultPin
String
[optional] URL of the default marker pin image to be shown. It comes with a default image. Should only be set if you wish to use a custom marker. -
onPopoverClick
function
[optional] a function that takes one argument for getting a marker’s data and returns an HTML markup to be displayed in the popover box. -
autoClosePopover
Boolean
[optional] automatically closes the exisiting open popovers whenonPopoverClick
gets fired. Defaults tofalse
. -
stream
Boolean
[optional] whether to stream new result (aka realtime view) updates in the UI. Defaults tofalse
. -
react
Object
specify dependent components to reactively update GeoDistanceDropdown’s options. Read more about it here.-
key
String
one ofand
,or
,not
defines the combining clause.- and clause implies that the results will be filtered by matches from all of the associated component states.
- or clause implies that the results will be filtered by matches from at least one of the associated component states.
- not clause implies that the results will be filtered by an inverse match of the associated component states.
-
value
String or Array or Object
String
is used for specifying a single component by itscomponentId
.Array
is used for specifying multiple components by theircomponentId
.Object
is used for nesting other key clauses.
-
-
autoCenter
Boolean
[optional] whether to auto center the map based on the geometric center of all the location markers. Defaults tofalse
. -
streamAutoCenter
Boolean
[optional] whether to auto center the map based on the geometric center of all the location markers whilestream
prop is set totrue
. Defaults tofalse
. -
tileServer
String
[optional]Used to provide different style to OpenStreet Map. It accepts tiles url that is used for providing layering to map. For more tile servers you can check https://wiki.openstreetmap.org/wiki/Tile_servers.
Default
titleServer
url ishttps://{s}.tile.osm.org/{z}/{x}/{y}.png
.
Note
You will have to link css file for appropriate
tileServer
in your html file / component. For defaulttileServer
you can link following css<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.css" rel="stylesheet"/>
- className
String
CSS class to be injected on the component container. - style
Object
CSS style object to be applied to theReactiveOpenStreetMap
component. - renderData
function
event fired when one or more markers are indexed, updated or removed from the map. It takes an object with the following formats (label
,icon
,custom
):
// To render the given text in the marker
renderData={result => ({
label: result.title,
})}
// To render a marker image
renderData={result => ({
icon: 'https://i.imgur.com/NHR2tYL.png',
})}
// To render a custom markup (as label) in the marker position
renderData={result => ({
custom: (<div>{result.mag}</div>),
})}
- renderError
String or JSX or Function
[optional] can be used to render an error message in case of any error.
renderError={(error) => (
<div>
Something went wrong!<br/>Error details<br/>{error}
</div>
)
}
- onError
Function
[optional] gets triggered in case of an error and provides theerror
object, which can be used for debugging or giving feedback to the user if needed.
- **renderAllData** `function`
use to display results and map component together. Usage:
```js
renderAllData={(hits, streamHits, loadMore, renderMap, renderPagination) => {
// hits are the results returned from query.
// streamHits are the results which are returned only when stream prop is true.
// loadMore is used to load more results.
// renderMap is the function which is used to render Map.
// renderPagination is the function which is used to render Pagination like in ReactiveList.
return(
<>
{hits.map(hit => JSON.stringify(hit))}
{renderMap()}
</>
)
}
Demo
Styles
ReactiveOpenStreetMap
component supports innerClass
prop with the following keys:
title
input
list
checkboxContainer
checkbox
label
select
icon
count
button
pagination
active