Add Submission Cells

client/src/components/MapTiles.jsx

@@ -9,17 +9,14 @@ import Spawnpoint from './spawnpoints/Spawnpoint.jsx'
 import Portal from './portals/Portal.jsx'
 import Weather from './weather/Weather.jsx'
 import S2Cell from './s2Cell/S2Cell.jsx'
+import SubmissionCell from './submissionCells/SubmissionCells.jsx'
 
 const MapTiles = ({ map, settings }) => {
   const [bounds, setBounds] = useState({
-    _southWest: {
-      lat: settings.map.startLat - 0.025,
-      lng: settings.map.startLon - 0.025
-    },
-    _northEast: {
-      lat: settings.map.startLat + 0.025,
-      lng: settings.map.startLon + 0.025
-    }
+    minLat: settings.map.startLat - 0.025,
+    maxLat: settings.map.startLat + 0.025,
+    minLon: settings.map.startLon - 0.025,
+    maxLon: settings.map.startLon + 0.025
   })
   const [selected, setSelected] = useState({
     gyms: settings.map.filters.gyms,
@@ -31,14 +28,20 @@ const MapTiles = ({ map, settings }) => {
     pokemon: settings.map.filters.pokemon,
     portals: settings.map.filters.portals,
     scanCells: settings.map.filters.scanCells,
-    s2Cells: settings.map.filters.submissionCells,
+    submissionCells: settings.map.filters.submissionCells,
     weather: settings.map.filters.weather,
     scanAreas: settings.map.filters.scanAreas,
     devices: settings.map.filters.devices
   })
 
   const onMove = useCallback(() => {
-    setBounds(map.getBounds())
+    const mapBounds = map.getBounds()
+    setBounds({
+      minLat: mapBounds._southWest.lat - 0.01,
+      maxLat: mapBounds._northEast.lat + 0.01,
+      minLon: mapBounds._southWest.lng - 0.01,
+      maxLon: mapBounds._northEast.lng + 0.01
+    })
   }, [map])
 
   useEffect(() => {
@@ -60,7 +63,8 @@ const MapTiles = ({ map, settings }) => {
       {selected.pokestops && <Pokestop bounds={bounds} />}
       {selected.pokemon && <Pokemon bounds={bounds} />}
       {selected.portals && <Portal bounds={bounds} />}
-      {selected.s2Cells && <S2Cell bounds={bounds} />}
+      {selected.scanCells && <S2Cell bounds={bounds} />}
+      {selected.submissionCells && <SubmissionCell bounds={bounds} />}
       {selected.spawnpoints && <Spawnpoint bounds={bounds} />}
       {selected.weather && <Weather bounds={bounds} />}
       <Nav

client/src/components/gyms/Gym.jsx

@@ -10,12 +10,7 @@ import PopupContent from './Popup.jsx'
 
 const Gym = ({ bounds }) => {
   const { loading, error, data } = useQuery(Query.getAllGyms(), {
-    variables: {
-      minLat: bounds._southWest.lat,
-      minLon: bounds._southWest.lng,
-      maxLat: bounds._northEast.lat,
-      maxLon: bounds._northEast.lng
-    }
+    variables: bounds
   })
 
   return (

client/src/components/layout/Drawer.jsx

@@ -30,7 +30,7 @@ const DrawerMenu = ({ drawer, toggleDrawer, selected, setSelected }) => {
     { name: 'Pokemon', icon: <ArrowForwardIos />, meta: 'pokemon' },
     { name: 'Ingress Portals', icon: <ArrowForwardIos/>, meta: 'portals' },
     { name: 'Scan-Cells', icon: <ArrowForwardIos />, meta: 'scanCells' },
-    { name: 'S2-Cells', icon: <ArrowForwardIos />, meta: 's2Cells' },
+    { name: 'Wayfarer', icon: <ArrowForwardIos />, meta: 'submissionCells' },
     { name: 'Weather', icon: <ArrowForwardIos />, meta: 'weather' },
     { name: 'ScanAreas', icon: <ArrowForwardIos />, meta: 'scanAreas' },
     { name: 'Devices', icon: <ArrowForwardIos />, meta: 'devices' }

client/src/components/pokemon/Pokemon.jsx

@@ -10,12 +10,7 @@ import PopupContent from './Popup.jsx'
 
 const Pokemon = ({ bounds }) => {
   const { loading, error, data } = useQuery(Query.getAllPokemon(), {
-    variables: {
-      minLat: bounds._southWest.lat,
-      minLon: bounds._southWest.lng,
-      maxLat: bounds._northEast.lat,
-      maxLon: bounds._northEast.lng
-    }
+    variables: bounds
   })
 
   return (

client/src/components/pokestops/Pokestop.jsx

@@ -10,12 +10,7 @@ import PopupContent from './Popup.jsx'
 
 const Pokestop = ({ bounds }) => {
   const { loading, error, data } = useQuery(Query.getAllPokestops(), {
-    variables: {
-      minLat: bounds._southWest.lat,
-      minLon: bounds._southWest.lng,
-      maxLat: bounds._northEast.lat,
-      maxLon: bounds._northEast.lng
-    }
+    variables: bounds
   })
 
   return (

client/src/components/portals/Portal.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Popup, CircleMarker } from 'react-leaflet'
+import { Popup, Circle } from 'react-leaflet'
 import MarkerClusterGroup from 'react-leaflet-markercluster'
 
 import { useQuery } from '@apollo/client'
@@ -10,28 +10,23 @@ import PopupContent from './Popup.jsx'
 
 const Portal = ({ bounds }) => {
   const { loading, error, data } = useQuery(Query.getAllPortals(), {
-    variables: {
-      minLat: bounds._southWest.lat,
-      minLon: bounds._southWest.lng,
-      maxLat: bounds._northEast.lat,
-      maxLon: bounds._northEast.lng
-    }
+    variables: bounds
   })
   return (
     <MarkerClusterGroup
       disableClusteringAtZoom={16}
     >
       {data && data.portals.map(portal => {
         return (
-          <CircleMarker
+          <Circle
             key={portal.id}
             center={[portal.lat, portal.lon]}
             radius={20}
             pathOptions={marker(portal)}>
             <Popup position={[portal.lat, portal.lon]}>
               <PopupContent portal={portal} />
             </Popup>
-          </CircleMarker>
+          </Circle>
         )
       })}
     </MarkerClusterGroup>

client/src/components/s2Cell/S2Cell.jsx

@@ -10,12 +10,7 @@ import getPolyVector from '../../services/getPolyVector'
 
 const S2Cell = ({ bounds }) => {
   const { loading, error, data } = useQuery(Query.getAllS2Cells(), {
-    variables: {
-      minLat: bounds._southWest.lat,
-      minLon: bounds._southWest.lng,
-      maxLat: bounds._northEast.lat,
-      maxLon: bounds._northEast.lng
-    }
+    variables: bounds
   })
 
   return (

client/src/components/spawnpoints/Spawnpoint.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Popup, CircleMarker } from 'react-leaflet'
+import { Popup, Circle } from 'react-leaflet'
 import MarkerClusterGroup from 'react-leaflet-markercluster'
 
 import { useQuery } from '@apollo/client'
@@ -10,12 +10,7 @@ import PopupContent from './Popup.jsx'
 
 const Spawnpoint = ({ bounds }) => {
   const { loading, error, data } = useQuery(Query.getAllSpawnpoints(), {
-    variables: {
-      minLat: bounds._southWest.lat,
-      minLon: bounds._southWest.lng,
-      maxLat: bounds._northEast.lat,
-      maxLon: bounds._northEast.lng
-    }
+    variables: bounds
   })
 
   return (
@@ -24,15 +19,15 @@ const Spawnpoint = ({ bounds }) => {
     >
       {data && data.spawnpoints.map(spawnpoint => {
         return (
-          <CircleMarker
+          <Circle
             key={spawnpoint.id}
             center={[spawnpoint.lat, spawnpoint.lon]}
             radius={1}
             pathOptions={marker(spawnpoint)}>
             <Popup position={[spawnpoint.lat, spawnpoint.lon]}>
               <PopupContent spawnpoint={spawnpoint} />
             </Popup>
-          </CircleMarker>
+          </Circle>
         )
       })}
     </MarkerClusterGroup>

client/src/components/submissionCells/Popup.jsx

@@ -0,0 +1,30 @@
+import { Typography } from '@material-ui/core';
+import { ThemeProvider } from '@material-ui/styles';
+import React from 'react'
+import theme from '../layout/theme';
+
+const SubmissionCellPopup = ({ cell }) => {
+  console.log(cell)
+  return (
+    <ThemeProvider theme={theme}>
+      <Typography>
+        {cell.level}
+      </Typography>
+      <Typography>
+        {cell.id}
+      </Typography>
+      <Typography>
+        {cell.count}
+      </Typography>
+      <Typography>
+        {cell.count_pokestops}
+      </Typography>
+      <Typography>
+        {cell.count_gyms}
+      </Typography>
+
+    </ThemeProvider>
+  )
+}
+
+export default SubmissionCellPopup

client/src/components/submissionCells/SubmissionCells.jsx

@@ -0,0 +1,80 @@
+import React from 'react'
+import { Popup, Polygon, Circle, Tooltip } from 'react-leaflet'
+
+import { useQuery } from '@apollo/client'
+import Query from '../../services/Query.js'
+
+import getPolyVector from '../../services/getPolyVector'
+import getPlacementCells from './data/getPlacementCells.js'
+import getTypeCells from './data/getTypeCells.js'
+
+import placementStyle from './placementStyle.js'
+import PopupContent from './Popup.jsx'
+import typeStyle from './typeStyle.js'
+
+const SubmissionCell = ({ bounds }) => {
+  const { loading, error, data } = useQuery(Query.getAllSubmissionCells(), {
+    variables: bounds
+  })
+
+  let cells = {
+    placementCells: {
+      cells: [],
+      rings: []
+    },
+    typeCells: []
+  }
+
+  if (data) {
+    cells = {
+      placementCells: getPlacementCells(bounds, data.pokestops, data.gyms),
+      typeCells: getTypeCells(bounds, data.pokestops, data.gyms)
+    }
+  }
+
+  return (
+    <>
+      {cells.placementCells.rings.map(ring => {
+        return (
+          <Circle
+            key={ring.id}
+            center={[ring.lat, ring.lon]}
+            radius={20}
+            interactive={false}>
+          </Circle>
+        )
+      })}
+      {cells.placementCells.cells.map(cell => {
+        return (
+          <Polygon
+            key={cell.id}
+            positions={getPolyVector(cell.id, 'polygon')}
+            pathOptions={placementStyle(cell.blocked)}
+            interactive={false}>
+          </Polygon>
+        )
+      })}
+      {cells.typeCells.map(cell => {
+        return (
+          <Polygon
+            key={cell.id}
+            positions={getPolyVector(cell.id, 'polygon')}
+            pathOptions={typeStyle(cell)}>
+            <Popup
+              position={[cell.lat, cell.lon]}>
+              <PopupContent cell={cell} />
+            </Popup>
+            <Tooltip
+              position={[cell.lat, cell.lon]}
+              direction='center'
+              permanent>
+              {cell.count}
+            </Tooltip>
+          </Polygon>
+        )
+      })}
+    </>
+  )
+}
+
+export default SubmissionCell

client/src/components/submissionCells/data/Ring.js

@@ -0,0 +1,10 @@
+class Ring {
+  constructor(lat, lon, radius) {
+      this.id = `${lat}-${lon}-${radius}`;
+      this.lat = lat;
+      this.lon = lon;
+      this.radius = radius;
+  }
+}
+
+export default Ring

client/src/components/submissionCells/data/getPlacementCells.js

@@ -0,0 +1,47 @@
+import { S2LatLng, S2RegionCoverer, S2CellId, S2LatLngRect } from 'nodes2ts'
+import getPolyVector from '../../../services/getPolyVector.js'
+import Ring from './Ring.js'
+
+export default function (bounds, pokestops, gyms) {
+  const allStops = pokestops.filter(x => x.sponsor_id === null || x.sponsor_id === 0)
+  const allGyms = gyms.filter(x => x.sponsor_id === null || x.sponsor_id === 0)
+  const stopCoords = allStops.map(x => { return { 'lat': x.lat, 'lon': x.lon } })
+  const gymCoords = allGyms.map(x => { return { 'lat': x.lat, 'lon': x.lon } })
+  const allCoords = gymCoords.concat(stopCoords)
+
+  const regionCoverer = new S2RegionCoverer()
+  regionCoverer.minLevel = 17
+  regionCoverer.maxLevel = 17
+  const region = S2LatLngRect.fromLatLng(
+    S2LatLng.fromDegrees(bounds.minLat, bounds.minLon),
+    S2LatLng.fromDegrees(bounds.maxLat, bounds.maxLon)
+  )
+  const indexedCells = {}
+  const coveringCells = regionCoverer.getCoveringCells(region)
+  for (let i = 0; i < coveringCells.length; i++) {
+    const cell = coveringCells[i]
+    const polygon = getPolyVector(cell.id)
+    const cellId = BigInt(cell.id).toString()
+    indexedCells[cellId] = {
+      'id': cellId,
+      'level': 17,
+      'blocked': false,
+      'polygon': polygon
+    }
+  }
+  for (let i = 0; i < allCoords.length; i++) {
+    const coord = allCoords[i]
+    const level17Cell = S2CellId.fromPoint(S2LatLng.fromDegrees(coord.lat, coord.lon).toPoint()).parentL(17)
+    const cellId = BigInt(level17Cell.id).toString()
+    const cell = indexedCells[cellId]
+    if (cell) {
+      cell.blocked = true
+    }
+  }
+  const rings = allCoords.map(x => new Ring(x.lat, x.lon, 20))
+
+  return {
+    cells: Object.values(indexedCells),
+    rings: rings
+  }
+}