diff --git a/client/src/views/Home/index.jsx b/client/src/views/Home/index.jsx index 972481a..c9591a3 100644 --- a/client/src/views/Home/index.jsx +++ b/client/src/views/Home/index.jsx @@ -1,18 +1,21 @@ import { Link } from 'react-router-dom' import React, { useState, useEffect } from 'react' -import { Map, TileLayer } from 'react-leaflet' +import { CircleMarker, Popup, Map, TileLayer } from 'react-leaflet' import { coordsOakland } from 'src/constants' import { Button, Form, Header } from 'semantic-ui-react' import HeatmapLayer from './HeatmapLayer' import { graphql } from 'react-apollo' import gql from 'graphql-tag' +const POINT_INTENSITY = 300; + const listReportsQuery = gql` query { listReports { id lat lng + description } } ` @@ -81,17 +84,25 @@ const Home = ({ data: { loading, listReports } }) => { - [report.lat, report.lng])} - longitudeExtractor={m => m[1]} - latitudeExtractor={m => m[0]} - intensityExtractor={m => parseFloat(m[2])} - radius={12} - /> + {listReports && + [report.lat, report.lng])} + longitudeExtractor={m => m[1]} + latitudeExtractor={m => m[0]} + intensityExtractor={m => POINT_INTENSITY} + radius={12} + max={POINT_INTENSITY / 100} + /> + } + { listReports && listReports.filter(r => !!r.description).map(report => ( + + { report.description } + + ))}