IoT Device Location Map in Mobile App
Hundred sensors on map. Half online, third offline for three hours already, several with dead battery. User needs to see the problem in a second, tap specific sensor, see latest readings. This is standard IoT monitoring task — solved without exotic solutions.
Displaying devices on map
IoT device marker carries status: online, offline, warning, critical. Color coding — green/gray/yellow/red. Icon changes on update via WebSocket without map reload.
On Android Google Maps SDK: update marker BitmapDescriptor via marker.setIcon(getStatusIcon(device.status)). To avoid creating new Bitmap on every status update — cache icons for four statuses in HashMap<Status, BitmapDescriptor> on startup.
On iOS MapKit: reassign MKAnnotationView.image via mapView(_:viewFor:) on data change. For smooth color transition — UIView.transition(with:duration:options:animations:) on icon swap.
In Flutter via Google Maps Flutter plugin: Marker(icon: BitmapDescriptor.fromBytes(pngBytes)). Important: BitmapDescriptor.fromAssetImage is async, calling it on every marker update causes janks. Create all icons ahead in initState and cache.
Clustering with many devices
With 100+ devices in one viewport clustering is mandatory. For Flutter: google_maps_cluster_manager package. For Android native: com.google.maps.android:android-maps-utils with DefaultClusterRenderer. For iOS: GMUClusterManager from Maps Utils SDK.
Custom cluster render: show not just count, but status of "worst" device in cluster — if any critical, cluster is red. Lets dispatcher instantly see problem zones without opening each cluster.
Device detail screen
Tap marker — bottom sheet or navigation push with latest device data: coordinate, time of last packet, sensor readings, battery charge, signal level. Data requested on open via REST API /devices/{id}/latest, cached locally for 30 seconds.
Location history: if device is mobile (tracker, meter on vehicle) — track for last N hours. If stationary (sensor on building) — only current position and online status.
Real-time updates
WebSocket subscription for fleet updates. Don't redraw entire map on every message — update only changed markers. Diff approach: compare device.updatedAt and update only objects where timestamp changed.
On app close WebSocket closes. On return — recreated. Handle reconnect: exponential backoff (1 sec → 2 → 4 → 8 → max 30 sec).
Device search and filtering
Device list next to map — filter by status, type, group. On Flutter — ListView.builder with local filtering on List<Device>, no extra server requests. Search by device name — TextEditingController with 300 ms debounce.
On Android — RecyclerView with DiffUtil.Callback for optimal diff on update. Fast scroll through 200+ devices without lags via view recycling and @Stable annotations on models (Compose).
Sorting: by status (critical on top), by distance from user, by name. Distance sorting needs user's current location — request once on screen open, don't update constantly.
Timeline
Device map with clustering, color statuses, detail screen, and filtered list with ready API: 4 hours — 2 working days depending on marker customization and UI requirements. Cost calculated after requirements clarification.