import React from 'react'
import PropTypes from 'prop-types'
import { Map, TileLayer, GeoJSON } from 'react-leaflet'
import MarkerClusterGroup from 'react-leaflet-markercluster'
import MapFooter from './MapFooter'
import Info from './Info'
import Details from '../details/Details'
import Search from '../search/SearchContainer'
import NavigationContainer from '../navigation/NavigationContainer'
import { initClusterIcon, initMarker } from './MarkerCluster'

const MapComponent = ({
  zoom,
  position,
  padding,
  bounds,
  minZoom,
  maxZoom,
  apiKey,
  currentPlace,
  showInfo,
  data
}) => (
  <div>
    <div className="map-container">
      <div className="leaflet-control-container">
        <div className="custom-controls">
          <Search />
        </div>
      </div>
      <Map
        className="map"
        zoom={zoom}
        center={position}
        boundsOptions={{ paddingTopLeft: padding }}
        bounds={bounds}
        minZoom={minZoom}
        maxZoom={maxZoom}
      >
        <TileLayer
          url={`//{s}.tiles.mapbox.com/v3/${apiKey}/{z}/{x}/{y}.png`}
          attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
        />

        <MarkerClusterGroup
          highlight={currentPlace && currentPlace.id}
          iconCreateFunction={initClusterIcon}
          maxClusterRadius={50}
        >
          {data && <GeoJSON data={data} pointToLayer={initMarker} />}
        </MarkerClusterGroup>
      </Map>
    </div>

    <NavigationContainer />

    {currentPlace.id && <Details place={currentPlace} />}

    {showInfo && <Info />}

    <MapFooter />
  </div>
)

MapComponent.propTypes = {
  data: PropTypes.shape({ type: PropTypes.string.isRequired }).isRequired, // geojson
  position: PropTypes.objectOf(PropTypes.number),
  padding: PropTypes.arrayOf(PropTypes.number),
  bounds: PropTypes.arrayOf(PropTypes.array),
  zoom: PropTypes.number.isRequired,
  minZoom: PropTypes.number.isRequired,
  maxZoom: PropTypes.number.isRequired,
  currentPlace: PropTypes.shape(),
  apiKey: PropTypes.string.isRequired,
  showInfo: PropTypes.bool.isRequired
}

MapComponent.defaultProps = {
  currentPlace: {},
  position: undefined,
  bounds: undefined,
  padding: []
}

export default MapComponent

@@ -1388,24 +1388,221 @@
    %7B
-data && %3CGeoJSON
+/* TODO the timestamp key forces rerender of the geoJSON layer.%0A          find a better solution to indicate that the layer should be replaced, eg by setting a changed flag? */%7D%0A          %3CGeoJSON key=%7BDate.now()%7D
  dat
@@ -1638,17 +1638,16 @@
 rker%7D /%3E
-%7D
 %0A       
@@ -1929,27 +1929,16 @@
 uired %7D)
-.isRequired
 , // geo
@@ -2318,16 +2318,16 @@
 ired%0A%7D%0A%0A
-
 MapCompo
@@ -2348,16 +2348,68 @@
 ops = %7B%0A
+  data: %7B type: 'featureCollection', features: %5B%5D%7D,%0A
   curren

Fix refresh of GeoJSON layer.