/* layout */
body {
max-width: 1200px;
margin: 0 auto;
padding-top: 15px;
}
.row {
display: flex;
flex-direction: row;
width: 100%;
}
.col {
flex: 1;
padding: 15px;
}
.row > .col:first-child {
border-right: 1px solid #ccc;
max-width: 400px;
}
.row > .col:last-child {
background: #fafafa;
}
@media all and (max-width: 767px) {
.row {
flex-direction: column;
}
.row > .col:first-child {
border-right: none;
max-width: none;
}
}
const { Component } = React
const {
ReactiveBase,
SelectedFilters,
} = ReactiveSearch;
const {
ReactiveMap,
GeoDistanceDropdown,
} = ReactiveMaps;
class MyApp extends Component {
render () {
return (
<ReactiveBase
app="reactivemap_demo"
credentials="y4pVxY2Ok:c92481e2-c07f-4473-8326-082919282c18"
type="meetupdata1"
mapKey="AIzaSyBQdVcKCe0q_vOBDUvJYpzwGpt_d_uTj4Q"
>
<div className="row">
<div className="col">
<GeoDistanceDropdown
title="Location"
componentId="GeoDistanceDropdown"
placeholder="Search Location"
dataField="location"
unit="mi"
URLParams
data={[
{ distance: 100, label: 'Under 100 miles' },
{ distance: 200, label: 'Under 200 miles' },
{ distance: 500, label: 'Under 500 miles' },
{ distance: 1000, label: 'Under 1000 miles' },
]}
/>
</div>
<div className="col">
<SelectedFilters />
<ReactiveMap
componentId="map"
dataField="location"
defaultMapStyle="Light Monochrome"
title="Reactive Maps"
defaultZoom={13}
defaultCenter={{ lat: 37.74, lng: -122.45 }}
react={{
and: 'GeoDistanceDropdown',
}}
/>
</div>
</div>
</ReactiveBase>
);
}
}
ReactDOM.render(
<MyApp />,
document.getElementById('root')
);
View Compiled