I am developing a crime map using Firebase React Native. I would like to save on Firebase the coordinates of the marker generated by the user once he/she touches the map (including other fields such as crime type, details, etc.) So once the markers are saved onto Firebase, I would like to show them to other users on the same map, also displaying the previously mentioned fields as information.

Is this possible? If so, what is the best way to achieve this? Users back-end has been implemented, including react-native-maps library for google maps.

CodePudding user response：

Assume that you have 2 categories of users:

1. GROUP A USERS: Reporting crimes with information includes crime scene location coordinates.

2. GROUP B USERS: Monitoring reported crimes with instant updates of the crime scene on the map.

With Firebase'Firestore, create a collection named crimes, where the app adds new reported crimes reported by GROUP A USER as a document.

Each crime document must contain coordinates of the location of the crime scene.react-native-maps has onPress event props which return coordinates on the map where the user taps.

crime's document should look like :

const crime = {
type:"CRIME_TYPE",
coordinates:{
longitude:30,0988,
latitude:-1.98777,
//... more details
}

Add this document when the user reports a crime

// Define reported crime document information
const crime = {
type:"CRIME_TYPE",
coordinates:{
longitude:30,0988,
latitude:-1.98777,
}
//... more details
}


// Firestore crimes collection reference
const  crimesRef  = firestore.collection('crimes')

// add new reported crime document in collection
crimesRef.add(crime)

At this stage, the user has reported (submitted) a crime. We need to notify GROUP B USERS about the new reported crime.

GROUP B USERS should subscribe to the crimes collection especially when a new document is added.

firestore.collection("crimes")
    .onSnapshot((snapshot) => {
        snapshot.docChanges().forEach((change) => {
            if (change.type === "added") {
                console.log("New reported crime: ", change.doc.data());
                // add logic to update map with new reported crime data

            }
            if (change.type === "modified") {
                console.log("Modified crime : ", change.doc.data());
            }
            if (change.type === "removed") {
                console.log("Removed crime: ", change.doc.data());
            }
        });
    });

I didn't cover all implementation details, this's only a brief overview.