Liquid, JavaScript, themes, sales channels
Hi,
I'm working on an app to track customer deliveries. I have completed a companion mobile app for Drivers which updates location data (lat/long) to Firebase/Firestore. I can see that data dynamically updating fine within a text label but I'm struggling to have the map update itself on data change.
Currently i'm using useEffect() to take a snap of the Firestore using onSnapshot().
Here is the sample index.js
import React from "react";
import { onSnapshot, collection} from "@firebase/firestore";
import { useEffect, useState } from "react";
import db from "./firebase";
import SimpleMap from "../map";
export default function Index() {
const [drivers, setDrivers] = useState([ { name: "Loading..", id: "initial"}]);
useEffect( () => {
onSnapshot(collection(db, "drivers"), (snapshot) =>
setDrivers(snapshot.docs.map((doc) => doc.data()) ));
}, [])
return (
<div>
<ul>
{drivers.map((user) => (
<li key={user.id}>
{ user.name } is at {user.lat}, {user.lng}
</li>
))}
</ul>
<SimpleMap />
</div>
);
}
and the Map.js component (ADD-YOUR-OWN-KEY = Google Maps API Key)
import React from "react";
import GoogleMapReact from 'google-map-react';
import CVG_CENTER from '../const/cvg_center';
export default function SimpleMap(){
return (
<div style={{ height: '100vh', width: '100%' }}>
<GoogleMapReact
bootstrapURLKeys={{ key: "ADD-YOUR-OWN-KEY" }}
center={CVG_CENTER}
zoom={13}
/>
</div>
);
}
It seems like I can find solutions for a lot of scenarios that don't apply to Shopify's pref stack. I've run into issues updating the map due to Next and ESLint. Is there a Shopify Node preferred approach to dynamically updating maps?
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024