Add S2 Scan Cells

client/src/components/MapTiles.jsx

@@ -8,16 +8,17 @@ import Nav from './layout/Nav.jsx'
 import Spawnpoint from './spawnpoints/Spawnpoint.jsx'
 import Portal from './portals/Portal.jsx'
 import Weather from './weather/Weather.jsx'
+import S2Cell from './s2Cell/S2Cell.jsx'
 
 const MapTiles = ({ map, settings }) => {
   const [bounds, setBounds] = useState({
-    _southWest: { 
-      lat: settings.map.startLat-0.025, 
-      lng: settings.map.startLon-0.025 
+    _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
+    _northEast: {
+      lat: settings.map.startLat + 0.025,
+      lng: settings.map.startLon + 0.025
     }
   })
   const [selected, setSelected] = useState({
@@ -59,6 +60,7 @@ 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.spawnpoints && <Spawnpoint bounds={bounds} />}
       {selected.weather && <Weather bounds={bounds} />}
       <Nav

client/src/components/s2Cell/Popup.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const S2CellPopup = ({ cell }) => {
+  return (
+    <>
+    {cell.id}
+    </>
+  )
+}
+
+export default S2CellPopup

client/src/components/s2Cell/S2Cell.jsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { Popup, Polygon } from 'react-leaflet'
+
+import { useQuery } from '@apollo/client'
+import Query from '../../services/Query.js'
+
+import marker from './marker.js'
+import PopupContent from './Popup.jsx'
+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
+    }
+  })
+
+  return (
+    <>
+      {data && data.s2Cells.map(cell => {
+        return (
+          <Polygon
+            key={cell.id}
+            positions={getPolyVector(cell.id, 'polygon')}
+            pathOptions={marker(cell.updated)}>
+            <Popup position={[cell.latitude, cell.longitude]}>
+              <PopupContent cell={cell} />
+            </Popup>
+          </Polygon>
+        )
+      })}
+    </>
+  )
+}
+
+export default S2Cell

client/src/components/s2Cell/marker.js

@@ -0,0 +1,13 @@
+export default function (cellUpdated) {
+  const ago = (new Date()).getTime() - (cellUpdated * 1000)
+  const value = ago <= 150000 ? 0 : Math.min((ago - 150000) / 750000, 1)
+  const hue = ((1 - value) * 120).toString(10)
+
+  return {
+    fillColor: ['hsl(', hue, ',100%,50%)'].join(''),
+    color: 'black',
+    opacity: 0.75,
+    fillOpacity: 0.5,
+    weight: 0.5
+  }
+}

client/src/components/weather/Weather.jsx

@@ -1,13 +1,12 @@
 import React from 'react'
-import { Popup, Polygon, Polyline, Marker } from 'react-leaflet'
+import { Popup, Polyline, Marker } from 'react-leaflet'
 
 import { useQuery } from '@apollo/client'
 import Query from '../../services/Query.js'
 
 import marker from './marker.js'
 import PopupContent from './Popup.jsx'
-import getPolygon from '../../services/getPolygon.js'
-import getPolyline from '../../services/getPolyline.js' 
+import getPolyVector from '../../services/getPolyVector.js' 
 
 const Weather = ({ bounds }) => {
   const { loading, error, data } = useQuery(Query.getAllWeather(), {
@@ -25,7 +24,7 @@ const Weather = ({ bounds }) => {
         return (
           <Polyline
             key={cell.id}
-            positions={getPolyline(cell.id)}
+            positions={getPolyVector(cell.id, 'polyline')}
             pathOptions={{ color: 'green', opacity: 0.5 }}>
             <Marker icon={marker(cell)} position={[cell.latitude, cell.longitude]}>
               <Popup position={[cell.latitude, cell.longitude]}>

client/src/services/Query.js

@@ -5,7 +5,7 @@ import { getAllPokemon } from './data/pokemon.js'
 import { getAllSpawnpoints } from './data/spawnpoint.js'
 import { getAllPortals } from './data/portal.js' 
 import { getAllWeather } from './data/weather.js'
-
+import { getAllS2Cells } from './data/s2Cell.js'
 class Query {
 
   static getAllDevices() {
@@ -28,6 +28,10 @@ class Query {
     return getAllPortals
   }
 
+  static getAllS2Cells() {
+    return getAllS2Cells
+  }
+
   static getAllSpawnpoints() {
     return getAllSpawnpoints
   }

client/src/services/data/s2Cell.js

@@ -0,0 +1,14 @@
+import { gql } from '@apollo/client'
+
+const getAllS2Cells = gql`
+  query Data($minLat: Float!, $minLon: Float!, $maxLat: Float!, $maxLon: Float!) {
+    s2Cells(minLat: $minLat, minLon: $minLon, maxLat: $maxLat, maxLon: $maxLon) {
+      id
+      center_lat
+      center_lon
+      updated
+    }
+  }
+`
+
+export { getAllS2Cells }

client/src/services/getPolygon.js → client/src/services/getPolyVector.js

@@ -1,6 +1,6 @@
 import { S2LatLng, S2Cell, S2CellId, S2Point } from 'nodes2ts';
 
-export default function (s2cellId) {
+export default function (s2cellId, type) {
   const s2cell = new S2Cell(new S2CellId(BigInt(s2cellId).toString()))
   const polygon = []
   for (let i = 0; i <= 3; i++) {
@@ -12,6 +12,9 @@ export default function (s2cellId) {
       latLng.lngDegrees
     ])
   }
+  if (type === 'polyline') {
+    polygon.push(polygon[0])
+  }
 
   return polygon
 }

server/src/models/S2Cell.js

@@ -0,0 +1,9 @@
+import { Model } from 'objection'
+
+class S2Cell extends Model {
+  static get tableName() {
+    return 's2cell'
+  }
+}
+
+export default S2Cell

server/src/models/index.js

@@ -2,7 +2,8 @@ import Device from './Device.js'
 import Gym from './Gym.js'
 import Pokestop from './Pokestop.js'
 import Pokemon from './Pokemon.js'
-import Portal from './Portal.js' 
+import Portal from './Portal.js'
+import S2Cell from './S2Cell.js'
 import Spawnpoint from './Spawnpoint.js'
 import Weather from './Weather.js' 
 
@@ -12,6 +13,7 @@ export {
   Pokestop,
   Pokemon,
   Portal,
+  S2Cell,
   Spawnpoint,
   Weather
 }

server/src/schema/pokemon.js

@@ -12,7 +12,7 @@ const PvpType = new GraphQLObjectType({
 })
 
 export default new GraphQLObjectType({
-  name: 'PokemonDetails',
+  name: 'Pokemon',
   fields: () => ({
     id: { type: GraphQLID },
     lat: { type: GraphQLFloat },

server/src/schema/s2Cell.js

@@ -0,0 +1,12 @@
+import { GraphQLObjectType, GraphQLInt, GraphQLFloat, GraphQLString } from 'graphql'
+
+export default new GraphQLObjectType({
+  name: 'S2Cell',
+  fields: () => ({
+    id: { type: GraphQLString },
+    level: { type: GraphQLInt },
+    center_lat: { type: GraphQLFloat },
+    center_lon: { type: GraphQLFloat },
+    updated: { type: GraphQLInt }
+  })
+})

server/src/schema/schema.js

@@ -6,9 +6,10 @@ import GymType from './gym.js'
 import PokestopType from './pokestop.js'
 import PokemonType from './pokemon.js'
 import PortalType from './portals.js'
+import s2CellType from './s2Cell.js'
 import SpawnpointType from './spawnpoint.js'
 import WeatherType from './weather.js'
-import { Device, Gym, Pokemon, Pokestop, Portal, Spawnpoint, Weather } from '../models/index.js'
+import { Device, Gym, Pokemon, Pokestop, Portal, S2Cell, Spawnpoint, Weather } from '../models/index.js'
 
 const minMaxArgs = {
   minLat: { type: GraphQLFloat },
@@ -80,6 +81,18 @@ const RootQuery = new GraphQLObjectType({
           .andWhereBetween('lon', [args.minLon, args.maxLon])
       }
     },
+    s2Cells: {
+      type: new GraphQLList(s2CellType),
+      args: minMaxArgs,
+      async resolve(parent, args) {
+        return await S2Cell.query()
+          .select(['*', ref('id')
+            .castTo('CHAR')
+            .as('id')])
+          .whereBetween('center_lat', [args.minLat, args.maxLat])
+          .andWhereBetween('center_lon', [args.minLon, args.maxLon])
+      }
+    },
     spawnpoints: {
       type: new GraphQLList(SpawnpointType),
       args: minMaxArgs,