Hello all, looking for some community advice and help here to implement this concept. I'm essentially trying to replicate what snap maps does and display multiple users locations via a marker on a map dependent on distance. My end goal is to implement this with Mapbox's indoor maps for businesses to see whos at which desk and have the ability to message that person. For example, you get to work and need to speak with Bob 10 desks down, but not sure if theyre at work yet so you open the app. This is what I have so far via Chatgpt for the widget and reading the code it looks correct, but haven't figured out how to implement it quite yet. What am I missing to populate this? I'm assuming I need to build a function for updateActiveUsers that determines whether the variable goal "Within 100 feet" is true or false? This is the main concept of the app and I'm having a hard time trying to get it working. Any help is much appreciated :D
import 'package:flutter/material.dart';
import 'package:mapbox_gl/mapbox_gl.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Active Users Map',
home: MapScreen(),
);
}
}
class MapScreen extends StatefulWidget {
@override
_MapScreenState createState() => _MapScreenState();
}
class _MapScreenState extends State<MapScreen> {
MapboxMapController mapController;
LatLng _currentLocation;
List<LatLng> _activeUserLocations = [];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Active Users Map'),
),
body: _buildMap(),
);
}
Widget _buildMap() {
return MapboxMap(
accessToken: "YOUR_MAPBOX_ACCESS_TOKEN",
onMapCreated: _onMapCreated,
initialCameraPosition: CameraPosition(
target: LatLng(0, 0),
zoom: 10,
),
myLocationEnabled: true,
onMyLocationChange: _onMyLocationChange,
markers: _buildMarkers(),
);
}
void _onMapCreated(MapboxMapController controller) {
mapController = controller;
}
void _onMyLocationChange(LocationData location) {
setState(() {
_currentLocation = LatLng(location.latitude, location.longitude);
_updateActiveUsers();
});
}
List<Marker> _buildMarkers() {
List<Marker> markers = [];
// Add marker for the current user
markers.add(Marker(
markerId: MarkerId("current_user"),
position: _currentLocation,
infoWindow: InfoWindow(title: "You are here"),
icon: BitmapDescriptor.defaultMarker,
));
// Add markers for active users
_activeUserLocations.forEach((userLocation) {
markers.add(Marker(
markerId: MarkerId("user_${userLocation.latitude}_${userLocation.longitude}"),
position: userLocation,
infoWindow: InfoWindow(title: "Active User"),
icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueGreen),
));
});
return markers;
}
void _updateActiveUsers() {
// Replace this with your logic to fetch active users within 100 feet
// Dummy data for demonstration
_activeUserLocations = [
LatLng(37.7749, -122.4194),
LatLng(37.7755, -122.4184),
// Add more users as needed
];
mapController.clearMarkers();
mapController.addMarkers(_buildMarkers());
}
}