diff --git a/src/client/components/TopBar.js b/src/client/components/TopBar.js
index 0c1943b776aa1c23182a7a0e8b720c1cc191a0a5..9f0a40293337cde96bd3e1c79fcac5b0f742ce66 100644
--- a/src/client/components/TopBar.js
+++ b/src/client/components/TopBar.js
@@ -16,7 +16,16 @@ import Switch from '@material-ui/core/Switch';
 import PlaceIcon from '@material-ui/icons/Place';
 
 
-const styles = () => ({
+import Radio from '@material-ui/core/Radio';
+import RadioGroup from '@material-ui/core/RadioGroup';
+
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormControl from '@material-ui/core/FormControl';
+import FormLabel from '@material-ui/core/FormLabel';
+
+
+
+const styles = theme => ({
   toolBar: {
     display: 'flex',
     justifyContent: 'flex-start',
@@ -34,33 +43,26 @@ const styles = () => ({
   },
   navTabs: {
     marginLeft: 'auto'
-  }
+  },
+  formControl: {
+    margin: theme.spacing.unit * 3,
+  },
+  group: {
+    margin: `${theme.spacing.unit}px 0`,
+  },
 });
 
 class TopBar extends React.Component {
   state = {
     anchorEl: null,
-    checked: ['cluster'],
   };
 
   handleClick = event => {
     this.setState({ anchorEl: event.currentTarget });
   };
 
-  handleToggle = value => () => {
-    const { checked } = this.state;
-    const currentIndex = checked.indexOf(value);
-    const newChecked = [...checked];
-
-    if (currentIndex === -1) {
-      newChecked.push(value);
-    } else {
-      newChecked.splice(currentIndex, 1);
-    }
-
-    this.setState({
-      checked: newChecked,
-    });
+  handleChange = event => {
+    this.props.updateMapMode(event.target.value);
   };
 
   handleClose = () => {
@@ -88,20 +90,20 @@ class TopBar extends React.Component {
             open={Boolean(anchorEl)}
             onClose={this.handleClose}
           >
-            <MenuList className={classes.menuList}>
-              <MenuItem>
-                <ListItemIcon>
-                  <PlaceIcon />
-                </ListItemIcon>
-                <ListItemText primary="Cluster markers" />
-                <ListItemSecondaryAction>
-                  <Switch
-                    onChange={this.handleToggle('cluster')}
-                    checked={this.state.checked.indexOf('cluster') !== -1}
-                  />
-                </ListItemSecondaryAction>
-              </MenuItem>
-            </MenuList>
+            <FormControl component="fieldset" className={classes.formControl}>
+              <FormLabel component="legend">Map mode</FormLabel>
+              <RadioGroup
+                aria-label="Map mode"
+                name="map"
+                className={classes.group}
+                value={this.props.mapMode}
+                onChange={this.handleChange}
+              >
+                <FormControlLabel value="cluster" control={<Radio />} label="Clustered markers" />
+                <FormControlLabel value="noCluster" control={<Radio />} label="Markers" />
+                <FormControlLabel value="heatmap" control={<Radio />} label="Heatmap" />
+              </RadioGroup>
+            </FormControl>
           </Menu>
           <img className={classes.namesampoLogo} src='img/logos/namesampo.png' alt='NameSampo logo'/>
           {this.props.oneColumnView &&
@@ -118,6 +120,8 @@ class TopBar extends React.Component {
 TopBar.propTypes = {
   classes: PropTypes.object.isRequired,
   oneColumnView: PropTypes.bool.isRequired,
+  mapMode: PropTypes.string.isRequired,
+  updateMapMode: PropTypes.func.isRequired,
 };
 
 export default withStyles(styles)(TopBar);
diff --git a/src/client/containers/MapApp.js b/src/client/containers/MapApp.js
index d95358d255a4e84421674a5e40f775306d48222e..f7b932f8671440210935bd7c2b4f0b2689a0e17f 100644
--- a/src/client/containers/MapApp.js
+++ b/src/client/containers/MapApp.js
@@ -124,7 +124,7 @@ let MapApp = (props) => {
   }
 
   let map = '';
-  if (mapMode === 'heatMap') {
+  if (mapMode === 'heatmap') {
     map = (
       <GMap
         results={props.results}
@@ -151,7 +151,11 @@ let MapApp = (props) => {
   return (
     <div className={classes.root}>
       <div className={classes.appFrame}>
-        <TopBar oneColumnView={oneColumnView} />
+        <TopBar
+          oneColumnView={oneColumnView}
+          mapMode={props.mapMode}
+          updateMapMode={props.updateMapMode}
+        />
         <div className={classes.mainContainer}>
           <div className={oneColumnView ? classes.resultTableOneColumn : classes.resultTable}>
             <VirtualizedTable
@@ -235,6 +239,7 @@ MapApp.propTypes = {
   geoJSONKey: PropTypes.number,
   getGeoJSON: PropTypes.func.isRequired,
   updateResultFormat: PropTypes.func.isRequired,
+  updateMapMode: PropTypes.func.isRequired,
   resultFormat: PropTypes.string.isRequired,
   mapMode: PropTypes.string.isRequired,
   results: PropTypes.array,
diff --git a/src/client/reducers/search.js b/src/client/reducers/search.js
index 2ae9b582d6fc20e6fb0560960e2cafbaba808e4d..1660889db7a995464a3ef05e40944cc0fbe9f5f1 100644
--- a/src/client/reducers/search.js
+++ b/src/client/reducers/search.js
@@ -50,8 +50,8 @@ export const INITIAL_STATE = {
   suggestions: [],
   suggestionsQuery: '',
   fetchingSuggestions: false,
-  //results: [],
-  results: sampleResults,
+  results: [],
+  //results: sampleResults,
   resultsFilter: {
     'label': new Set(),
     'modifier': new Set(),