Add latLng for explicit Feed geo point

server/lib/orcasite/radio_legacy/radio_legacy.ex

@@ -5,7 +5,7 @@ defmodule Orcasite.RadioLegacy do
 
  import Ecto.Query, warn: false
  alias Orcasite.Repo
- alias Orcasite.RadioLegacy.{Feed, Detection, Candidate}
+ alias Orcasite.RadioLegacy.{Detection, Candidate}
 
  def verify_can_submit_detection(
  feed_id,

server/lib/orcasite_web/graphql/types/feed.ex

@@ -20,6 +20,16 @@ defmodule OrcasiteWeb.Types.Feed do
  end)
  end
 
+ field :longitude_latitude, non_null(:json) do
+ resolve(fn
+ %{location_point: %{coordinates: {lng, lat}}}, _, _ ->
+ {:ok, %{lng: lng, lat: lat}}
+
+ _, _, _ ->
+ {:ok, %{}}
+ end)
+ end
+
  field :thumb_url, non_null(:string) do
  resolve(fn %{node_name: node_name}, _, _ ->
  {:ok, feed_s3_url(node_name, "thumbnail.png")}

ui/src/components/Map.tsx

@@ -17,7 +17,7 @@ export default function Map({
  feeds,
 }: {
  setMap?: (map: LeafletMap) => void
- currentFeed?: Pick<Feed, 'slug' | 'locationPoint'>
+ currentFeed?: Pick<Feed, 'slug' | 'longitudeLatitude'>
  feeds: FeedsQuery['feeds']
 }) {
  const router = useRouter()
@@ -50,7 +50,7 @@ export default function Map({
  {feeds.map((feed) => (
  <Marker
  key={feed.slug}
- position={feed.locationPoint.coordinates}
+ position={feed.longitudeLatitude}
  icon={
  feed.slug === currentFeed?.slug
  ? hydrophoneActiveIcon

ui/src/components/MapLayout.tsx

@@ -20,6 +20,7 @@ const feedFromSlug = (feedSlug: string) => ({
  name: feedSlug,
  slug: feedSlug,
  nodeName: feedSlug,
+ longitudeLatitude: {lng: -122.3, lat: 47.6},
  // TODO: figure out which coordinates to use for dynamic feeds
  locationPoint: {
  coordinates: [47.6, -122.3],
@@ -46,7 +47,7 @@ function MapLayout({ children }: { children: ReactNode }) {
  useEffect(() => {
  if (feed && feed.slug !== currentFeed?.slug) {
  setCurrentFeed(feed)
- map?.panTo(feed.locationPoint.coordinates)
+ map?.panTo(feed.longitudeLatitude)
  }
  }, [feed, map, currentFeed])
 

ui/src/components/Player/Player.tsx

@@ -22,7 +22,7 @@ export default function Player({
 }: {
  currentFeed?: Pick<
  Feed,
- 'id' | 'slug' | 'nodeName' | 'name' | 'locationPoint'
+ 'id' | 'slug' | 'nodeName' | 'name' | 'locationPoint' | 'longitudeLatitude'
  >
 }) {
  const [playerStatus, setPlayerStatus] = useState<PlayerStatus>('idle')
@@ -153,7 +153,7 @@ export default function Player({
  </Box>
  <Box sx={{ mx: 4, flexGrow: 1, textAlign: 'end' }}>
  {currentFeed &&
- `${currentFeed.locationPoint.coordinates[0]}, ${currentFeed.locationPoint.coordinates[1]}`}
+ `${currentFeed.longitudeLatitude["lng"]}, ${currentFeed.longitudeLatitude["lat"]}`}
  </Box>
  </Box>
  )

ui/src/graphql/generated/index.ts

@@ -105,6 +105,7 @@ export type Feed = {
  id: Scalars['ID']['output']
  introHtml: Scalars['String']['output']
  locationPoint: Scalars['Json']['output']
+ longitudeLatitude: Scalars['Json']['output']
  mapUrl: Scalars['String']['output']
  name: Scalars['String']['output']
  nodeName: Scalars['String']['output']
@@ -254,6 +255,7 @@ export type FeedQuery = {
  slug: string
  nodeName: string
  locationPoint: any
+ longitudeLatitude: any
  introHtml: string
  thumbUrl: string
  mapUrl: string
@@ -271,6 +273,7 @@ export type FeedsQuery = {
  slug: string
  nodeName: string
  locationPoint: any
+ longitudeLatitude: any
  thumbUrl: string
  mapUrl: string
  }>
@@ -335,6 +338,7 @@ export const FeedDocument = `
  slug
  nodeName
  locationPoint
+ longitudeLatitude
  introHtml
  thumbUrl
  mapUrl
@@ -363,6 +367,7 @@ export const FeedsDocument = `
  slug
  nodeName
  locationPoint
+ longitudeLatitude
  thumbUrl
  mapUrl
  }

ui/src/graphql/queries/getFeed.graphql

@@ -5,6 +5,7 @@ query feed($slug: String!) {
  slug
  nodeName
  locationPoint
+ longitudeLatitude
  introHtml
  thumbUrl
  mapUrl

ui/src/graphql/queries/listFeeds.graphql

@@ -5,6 +5,7 @@ query feeds {
  slug
  nodeName
  locationPoint
+ longitudeLatitude
  thumbUrl
  mapUrl
  }