phayes0289's avatar

A better way to show the icons on a map for “INCIDENTs” without blinking caused by the re-query

I have a Laravel app that is using javascript to display a Google map with several layers. One of those layers is an “Incident” layer. The Incident layer displays a particular icon based on the type of incident that is currently in progress (active) within the City limits. Right now, I have the app displaying the currently “open” incidents, with an update occurring every sixty seconds. The issue is that there is a “blinking” effect either caused by the speed of the query or a coding factor that I do not see. It clear is occuring because of the query and the reloading of the data and replacing the icons. I would appreciate any suggestions on how to clean this up and make it work better.

Here is my map.blade.php file:

Here is my x-google-map component included in the code above.

Here is my index.js file, included above:

// resources/js/maps/index.js
import '../../sass/maps/map.scss'; // this ensures it’s included
import './map-loader.js';
import './layers/city-boundaries.js';
import './layers/fire-districts.js';
import './layers/hydrants.js';
import './layers/address-points.js';
import './layers/fire-stations.js';
import './layers/active-incidents.js';

And here is the active-incidents.js

And here is my overall map-reload file required to load the map and all its elements.:

My web route looks like this:

Route::get('/api/map/incidents', [CadIncidentController::class, 'activeIncidents']);

and the controller method looks like this:

    public function activeIncidents()
    {
        $incidents = CadIncident::with(['vehicles' => function ($query) {
            // Optionally filter vehicles here (e.g., only active ones)
            $query->select('id', 'cadincident_id', 'vehicle_name', 'time_call_cleared');
        }])
            ->whereNull('time_call_closed')
            ->get()
            ->map(function ($incident) {
                // Optionally add an icon URL using your helper
                $incident->icon = getIncidentIcon($incident->incident_type);
                return $incident;
            });

        return response()->json($incidents);
    }
0 likes
1 reply
LaryAI's avatar
LaryAI
AI
1 year ago
Level 58

To address the flickering issue when updating the incident markers on your Google Map, you can optimize the process by updating only the markers that have changed, rather than clearing and re-adding all markers every time. Here's a step-by-step approach to achieve this:

  1. Track Existing Markers: Maintain a map of existing markers keyed by a unique identifier (e.g., incident ID). This allows you to efficiently update only the markers that have changed.

  2. Update Only Changed Markers: When fetching new incident data, compare it with the existing markers. Update the position or icon of existing markers if they have changed, add new markers for new incidents, and remove markers for incidents that are no longer active.

  3. Avoid Clearing All Markers: Instead of clearing all markers and re-adding them, only remove the markers that are no longer needed.

Here's how you can implement these changes in your active-incidents.js file:

Key Changes:

  • Map for Markers: Use a Map to store markers keyed by incident ID for efficient updates.
  • Conditional Updates: Only update the position or icon of a marker if it has changed.
  • Selective Removal: Remove only those markers that are no longer present in the new data.

This approach minimizes the flickering by only updating the necessary parts of the map, leading to a smoother user experience.

Please or to participate in this conversation.