{"action":"opened","issue":{"url":"https://api.github.com/repos/OpenGov/react-leaflet-heatmap-layer/issues/3","repository_url":"https://api.github.com/repos/OpenGov/react-leaflet-heatmap-layer","labels_url":"https://api.github.com/repos/OpenGov/react-leaflet-heatmap-layer/issues/3/labels{/name}","comments_url":"https://api.github.com/repos/OpenGov/react-leaflet-heatmap-layer/issues/3/comments","events_url":"https://api.github.com/repos/OpenGov/react-leaflet-heatmap-layer/issues/3/events","html_url":"https://github.com/OpenGov/react-leaflet-heatmap-layer/issues/3","id":169200375,"number":3,"title":"this.props.map undefined if HeatMap component is nested inside LayersControl","user":{"login":"ruta-goomba","id":9166447,"avatar_url":"https://avatars.githubusercontent.com/u/9166447?v=3","gravatar_id":"","url":"https://api.github.com/users/ruta-goomba","html_url":"https://github.com/ruta-goomba","followers_url":"https://api.github.com/users/ruta-goomba/followers","following_url":"https://api.github.com/users/ruta-goomba/following{/other_user}","gists_url":"https://api.github.com/users/ruta-goomba/gists{/gist_id}","starred_url":"https://api.github.com/users/ruta-goomba/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ruta-goomba/subscriptions","organizations_url":"https://api.github.com/users/ruta-goomba/orgs","repos_url":"https://api.github.com/users/ruta-goomba/repos","events_url":"https://api.github.com/users/ruta-goomba/events{/privacy}","received_events_url":"https://api.github.com/users/ruta-goomba/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2016-08-03T18:28:47Z","updated_at":"2016-08-03T18:28:47Z","closed_at":null,"body":"The heat map renders fine if the component is directly inside the react-leaflet <Map> component, e.g.:\r\n\r\n```\r\n<Map center={[52.629729, -1.131592]} zoom={6}>\r\n      <HeatmapLayer\r\n            points={this.props.points}\r\n            longitudeExtractor={m => m['location'][0]}\r\n            latitudeExtractor={m => m['location'][1]}\r\n            gradient={gradient}\r\n            intensityExtractor={m => m['weight']}\r\n      />\r\n</Map>\r\n```\r\n\r\nHowever, if it is nested inside the react-leaflet <LayersControl> component (see example below), get an error 'Uncaught TypeError: Cannot read property 'getSize' of undefined'. It seems like this.props.map is not passed down to react-leaflet-heatmap-layer <HeatmapLayer> component in this case.\r\n\r\n```\r\n<Map center={[52.629729, -1.131592]} zoom={6}>\r\n   <LayersControl position=\"topright\">\r\n       <Overlay>\r\n           <HeatmapLayer\r\n                points={this.props.points}\r\n                longitudeExtractor={m => m['location'][0]}\r\n                latitudeExtractor={m => m['location'][1]}\r\n                gradient={gradient}\r\n                intensityExtractor={m => m['weight']}\r\n            />\r\n       </Overlay>\r\n  </LayersControl>\r\n</Map>\r\n```\r\n\r\nThese are the file imports for reference:\r\n```\r\n\r\nimport React, {PropTypes} from 'react';\r\nimport { Map, TileLayer, Marker, LayersControl} from 'react-leaflet';\r\nconst { BaseLayer, Overlay } = LayersControl;\r\nimport { divIcon, point } from 'leaflet';\r\nimport HeatmapLayer from 'react-leaflet-heatmap-layer';\r\n```\r\n"}}
{"actor":{"display_login":"ruta-goomba"}}