Advanced Geospatial Visualization: Architecting a Time-Series Virus Spread Map with JavaScript and a PHP Backend

Full report

On this page

The visualization of epidemiological data demands platforms capable of rendering dynamic, high-density spatial intelligence over time. Static maps provide only a limited snapshot of a contagion, failing to capture the velocity, directional spread, and containment phases critical to outbreak analysis and public health response. To accurately represent the progression of a viral spread, systems must leverage a continuous time-series animation mapped onto a geographic coordinate system. This requires a robust, decoupled architecture where a secure backend serves temporal geospatial data, and a highly responsive frontend animates this data seamlessly. The following architectural analysis details the paradigm for constructing a dynamic, web-based virus spread map. This solution employs a PHP backend utilizing PHP Data Objects (PDO) to serve a RESTful JSON API, coupled with a frontend powered by the Leaflet JavaScript library and the Leaflet.heat plugin. By integrating custom JavaScript animation engines, temporal data chunking, and interactive timeline controls, the architecture allows for the nuanced simulation of viral hotspots expanding and contracting across global or regional geographic bounding boxes.

Architectural Foundations of Spatiotemporal WebGIS

A web-based geographic information system (WebGIS) designed for high-frequency temporal updates operates on a client-server architecture optimized for low latency and high rendering performance. The rendering of time-series epidemiological data is computationally expensive; therefore, the system must rigidly enforce a separation of concerns. The architecture is broadly divided into three distinct operational tiers. The first tier is the Data Persistence Tier, typically a relational database such as MySQL or PostgreSQL, optionally enhanced with spatial extensions like PostGIS. This tier stores the raw viral outbreak data. Essential fields include latitude, longitude, intensity (such as case count or infection rate), and a highly indexed timestamp. The performance of the entire system hinges on the efficiency of this tier in executing temporal range queries. The second tier is the Application Logic Tier, powered by a PHP-driven RESTful API. This backend queries the database, formats the result sets into spatial structures, and serves the data over HTTP. This layer handles all security mechanisms, Cross-Origin Resource Sharing (CORS) negotiation, input validation, and JSON serialization. By abstracting the database behind an API, the architecture protects sensitive epidemiological data and provides a standardized consumption interface. The third and final tier is the Presentation and Rendering Tier, executed entirely within the client's browser using JavaScript. The frontend fetches the JSON payload, initializes the geographic base map utilizing the Leaflet library, and employs a custom animation loop to iterate through the time-series data. This tier dynamically redraws an HTML5 Canvas heatmap to simulate the physical spread of the virus over time. By strictly separating data retrieval from the visualization mechanics, the application can scale to handle massive datasets, relying on the backend for spatial filtering and the frontend for hardware-accelerated rendering.

Constructing the PHP Backend API

The backend is responsible for establishing a secure connection to the database, executing targeted queries to retrieve the temporal spatial data, and outputting a machine-readable JSON response. Modern API development requires a robust server environment; PHP 8.0 or higher is highly recommended to leverage advanced features, coupled with the ext-json and ext-pdo extensions which are fundamental to the operation1.

Database Schema and Temporal Indexing

Before the API can serve data, the underlying database must be structured to accommodate rapid temporal queries. A standard relational table for viral events requires a schema optimized for the precise geographic and chronological nature of the data.

Because the JavaScript frontend will request data chronologically to power the animation, the report\_date column must be heavily indexed. When a user interactively scrubs a timeline slider, the API must rapidly execute SELECT queries utilizing BETWEEN operators on this timestamp. Without proper indexing, full table scans will cripple the API's response time, breaking the fluidity of the frontend animation.

Secure Database Connectivity via PDO

PHP Data Objects (PDO) provides a consistent, database-agnostic interface for accessing databases in PHP. When dealing with epidemiological data—which may be subject to public querying based on user-defined date ranges—preventing SQL injection is paramount. PDO achieves this security standard through the use of prepared statements, which strictly separate the SQL logic from the user-supplied filtering parameters2. The connection string, known as the Data Source Name (DSN), is established with parameters denoting the server address, database name, character set, and credentials. To ensure robust error handling, the PDO instance must be explicitly configured to throw exceptions upon encountering errors. This is achieved by setting the PDO::ATTR\_ERRMODE attribute to PDO::ERRMODE\_EXCEPTION. Furthermore, fetching data as associative arrays (PDO::FETCH\_ASSOC) minimizes PHP memory overhead and directly aligns with the required JSON output structure3. When the API receives a request to retrieve virus spread data, the database call typically requests all records ordered chronologically. In a production implementation, the API accepts URL parameters, such as ?start\_date=2020-01-01\&end\_date=2020-12-31, to filter the result set. The PDO prepared statement binds these parameters securely, executes the query, and stores the results in a primary PHP array.

JSON Serialization and Data Formatting

Data transfer between the PHP backend and the JavaScript frontend relies universally on JavaScript Object Notation (JSON). JSON provides a lightweight, fast, and universally parseable data exchange format perfectly suited for asynchronous API responses1. Once the geospatial records are fetched via PDO, they must be formatted into a structure the frontend animation engine can easily parse. The optimal data structure for an animated heatmap is a nested array or a grouped object representing temporal "frames." Each frame represents a specific interval, such as a day or a week, and contains an array of points active during that specific time. Alternatively, the API can return a flat array of all points with their respective timestamps, delegating the complex temporal grouping and sorting logic entirely to the frontend JavaScript. To convert the PHP associative array into a JSON payload, the native json\_encode() function is utilized4. Before outputting the JSON string, the PHP script must declare the appropriate HTTP content type using the header() function, specifically header('Content-Type: application/json')1. This critical step instructs the receiving client browser to parse the payload strictly as JSON data, rather than attempting to render it as raw HTML or plain text. Failure to set this header often results in silent failures within the JavaScript fetch() promise chain.

Cross-Origin Resource Sharing (CORS) Security

A common architectural hurdle in decoupled API development is the browser's Same-Origin Policy. This security mechanism restricts a web page from making XMLHttpRequests or Fetch API calls to a domain different from the one that served the web page itself. If the Leaflet frontend application is hosted on https://viz.health-domain.com and the PHP API resides on https://api.health-domain.com, the browser will inherently block the data request. To resolve this, the PHP API must implement Cross-Origin Resource Sharing (CORS) by emitting specific HTTP headers in its response5. The most critical header is Access-Control-Allow-Origin. While setting this header to a wildcard (\*) permits access from any domain—which is common during local development or for entirely open public APIs—best practices dictate restricting access strictly to known, trusted origins in production environments5. Furthermore, modern browsers execute a "pre-flight" request using the HTTP OPTIONS method before executing the primary GET or POST request. This pre-flight request checks if the server permits the actual request. The API must intercept this OPTIONS request and immediately respond with the allowed methods and headers, terminating the script before executing the heavy database query5.

By placing these header declarations at the absolute beginning of the PHP execution script—prior to any JSON output or database interaction—the API ensures that the asynchronous JavaScript fetch() calls from the Leaflet interface operate smoothly without triggering browser-enforced security exceptions6.

Front-End Geographic Framework: Leaflet Visualization

With the temporal data exposed and secured via the PHP API, the frontend architecture focuses on the rendering and manipulation of geographic visualization. Leaflet is a leading open-source JavaScript library designed specifically for mobile-friendly, interactive maps. It is exceptionally lightweight, performant, and provides an extensive plugin ecosystem that is crucial for specialized rendering tasks like heatmapping and temporal animation9.

Map Initialization and Tile Layers

The foundation of the visual interface is the Leaflet Map instance, initialized by binding it to a designated HTML \<div\> container in the Document Object Model (DOM). The map's starting state requires a geographic center, defined by a latitude and longitude array, and an initial zoom level10. Because the core Leaflet library focuses strictly on mapping logic and does not contain native map imagery or cartography, a tile layer must be explicitly added to the map instance. Tile layers load pre-rendered raster images or vector data from external providers (such as OpenStreetMap, Mapbox, or ESRI) based on the user's current geographic bounds and zoom level. The map utilizes a Coordinate Reference System (CRS), which defaults to L.CRS.EPSG3857 (Spherical Mercator). This CRS dictates the mathematical projection used to translate real-world spherical geographic coordinates into flat screen pixels11. The initialization script sets the initial view over the epicenter of the viral outbreak or a global view, mounts the base tiles, and ensures proper attribution is displayed for the tile provider. Advanced initialization may also define maxBounds to restrict the user from panning away from the relevant outbreak zone, keeping the analytical focus intact11.

The Inadequacy of Discrete Markers

Standard WebGIS tutorials often demonstrate mapping by plotting discrete markers (e.g., pin icons or small SVG circles) at specific coordinates12. While this is effective for visualizing static locations like hospitals or testing centers, it is fundamentally inadequate for modeling viral spread. When visualizing an outbreak, thousands or millions of data points rapidly accumulate. Plotting a distinct marker for each viral case results in severe visual clutter; the markers overlap entirely, obscuring the geographic basemap and making it impossible to discern the true density of the outbreak. The map becomes an unreadable block of solid color. While clustering algorithms (like Leaflet.markercluster) can group these points into numbered badges when zoomed out, they fail to visually represent the continuous, radiating nature of an airborne or highly transmissible contagion. To accurately depict density and intensity, the architecture must transition from discrete markers to continuous rasterized heatmaps.

The Heatmap Rendering Engine: Leaflet.heat

Heatmaps solve the density visualization problem by rendering continuous color gradients based on the spatial concentration of data points. Instead of drawing distinct shapes, the engine calculates the proximity of points and assigns a color based on a defined gradient scale, representing areas of high infection density as "hot" colors (reds and purples) and low-density areas as "cold" colors (blues and yellows). The Leaflet.heat plugin is a highly optimized, minimalist, and exceptionally fast solution for rendering these layers within the Leaflet ecosystem14. It operates by leveraging the HTML5 Canvas element to draw the heatmap, entirely bypassing the DOM overhead associated with rendering thousands of SVG elements. Under the hood, Leaflet.heat utilizes a secondary library called simpleheat to manage the canvas context14. To achieve its high performance, it does not calculate the radial gradient for every single coordinate individually. Instead, it clusters proximal points into a mathematically defined grid; it calculates the aggregate intensity for each grid cell and then applies a global blur filter to smooth the transitions, creating the continuous heatmap visual14.

Epidemiological Configuration Parameters

The visual interpretation of the viral spread is highly dependent on the configuration parameters passed to the L.heatLayer() constructor. These technical parameters must be carefully tuned to accurately represent the epidemiological characteristics of the specific virus being modeled14.

The Leaflet.heat plugin automatically renders this canvas element into Leaflet's overlayPane by default14. This structural decision ensures that the heatmap sits perfectly above the geographic tile layer, but remains positioned below any interactive popups, tooltips, or UI controls the user might interact with.

Animating the Spatiotemporal Spread

Displaying a single, static heatmap of all historical virus cases creates a false analytical impression of a simultaneous, massive global infection event. To accurately analyze the dynamics of a contagion, the visualization must progress linearly through time. The map must demonstrate how hotspots emerge, migrate along transportation corridors, compound in urban centers, and eventually dissipate due to containment measures or population immunity.

The Dynamics of setLatLngs()

The primary technical challenge in WebGIS animation is updating the visual state rapidly without crippling the browser's main execution thread. If the JavaScript logic were to completely destroy the heatmap layer and instantiate a brand new L.heatLayer for every day of the outbreak, the constant DOM manipulation and garbage collection would result in severe memory leaks, browser freezing, and visual screen tearing17. The animation is made possible by the dynamic updating of the heatmap's internal dataset. The Leaflet.heat plugin exposes a critical, high-performance method for this exact purpose: setLatLngs(latlngs)14. This method replaces the existing spatial data array with a new array of geographic points. Crucially, calling setLatLngs() internally triggers the redraw() method, which simply clears the existing HTML5 Canvas context and rapidly repaints the grid with the new data14. Because setLatLngs() bypasses the destruction and recreation of Leaflet layer objects, it allows developers to create a high-framerate, frame-by-frame animation, shifting the spatial coordinates smoothly over time15.

Structuring the Animation Engine

To drive the temporal data into the heatmap, the frontend JavaScript requires a dedicated time-series engine. First, the JavaScript utilizes the modern fetch() API to call the PHP backend, retrieving the complete JSON payload of the viral timeline. Once the data resides locally in browser memory, a custom object class—often conceptualized as an AnimationPlayer—manages the complex temporal state20. The core of the animation engine relies on asynchronous JavaScript looping mechanisms, such as setInterval() or window.requestAnimationFrame(), to advance a global "playhead" variable. Assuming the fetched viral data is logically grouped into daily arrays, the engine functions through the following sequential pipeline:

1. Initialization: The global playhead index is set to 0, representing the absolute chronological start of the outbreak dataset.

2. Tick Execution: Every n milliseconds (which defines the user-perceived playback speed), the interval function increments the playhead10.

3. Frame Rendering: The system queries the JSON payload and extracts the array of spatial coordinates corresponding to the current playhead index.

4. Canvas Update: The extracted data array is passed directly to heatLayer.setLatLngs(). This forces the Leaflet map to visually update, rendering that specific day's infection state onto the screen15.

5. Looping and Termination: Once the playhead reaches the end of the time-series array, the animation logic evaluates whether to halt playback or reset the playhead to zero for continuous looping21.

By dynamically adjusting the interval duration passed to the looping function, analysts can control the playback speed, viewing months or years of viral spread in mere seconds of screen time.

Algorithmic Simulation of Infection Dynamics

A rudimentary animation script that strictly plots only the newly reported cases on a specific day results in a flickering, disjointed visual experience. Real-world epidemiological outbreaks do not appear for a single day and vanish instantly; active cases persist, radiate outward to secondary contacts over several days, and eventually recover, perish, or are contained. To visually simulate this epidemiological reality within the Leaflet environment, the animation engine must employ a mathematical "heat-up and cool-down" algorithm across the temporal frames17. Rather than simply replacing the map data with a snapshot of Day X, the engine maintains a continuous, running array of "active" points. When a new viral case enters the timeline from the JSON data, it is injected into the active array and assigned an initial weight (intensity) of zero. Over subsequent animation ticks, the JavaScript logic loops through the active array and incrementally increases the weight of new points. This simulates the escalating severity, viral shedding, and transmission potential of an active cluster—referred to as the "heat-up" effect17. Once a point reaches its maximum defined intensity, a boolean flag flips, and its weight is gradually decreased over a longer series of subsequent ticks. This represents medical intervention, recovery, or local containment measures taking effect—the "cool-down" effect17. When a point's calculated weight reaches absolute zero, the engine prunes it from the active array entirely, optimizing rendering performance by removing dormant data17. This logic can be expressed in a decay formula executed during each animation tick. If the algorithm dictates that a point heats up by [Figure omitted from source export] per interval and cools down by [Figure omitted from source export] per interval, a single viral node will spike rapidly in intensity over just over one second of playback (representing an explosive initial outbreak), but linger as a fading hotspot for ten seconds (representing the long tail of recovery and localized lingering cases)17. Because new infections are continuously injected into the active array as the timeline progresses, overlapping points natively aggregate their weights on the Canvas. The resulting visual is deeply organic and highly analytical, naturally highlighting metropolitan areas where prolonged transmission events compound over multiple days, creating persistent, deep red zones on the map.

Interactive Timeline and User Controls

While a continuous, automated animation loop is highly beneficial for high-level presentations, spatial analysts and epidemiologists require granular interactive controls. They must be able to scrub through time manually, pause the simulation at critical milestones (such as the date a specific public policy was enacted), and examine specific temporal bounds23. Integrating a timeline slider successfully ties the automated JavaScript animation loop to manual user inputs.

Implementing the Timeline Slider Mechanics

The user interface requires an HTML range input (\<input type="range" class="slider"\>), which serves as the physical timeline scrubber24. The min attribute of the slider represents the start of the outbreak (index 0), the max attribute maps to the total length of the temporal arrays in the JSON payload, and the value dictates the current chronological position24. While third-party Leaflet plugins such as Leaflet.TimeDimension or leaflet-timeline-slider offer pre-built UI solutions9, a custom Vanilla JavaScript implementation often provides superior architectural flexibility, ensuring total control over the heatmap's setLatLngs() integration and the heat-up algorithm. When the user manually clicks and drags the slider, an oninput or onchange event listener fires rapidly within the JavaScript execution context24. This event performs several synchronized actions to maintain state consistency:

1. Pause Automation: It immediately calls clearInterval() to halt the automated animation loop, preventing the engine from conflicting with the user's manual scrub20.

2. Update Playhead: It updates the global playhead variable to match the numerical integer value emitted by the slider.

3. Calculate and Redraw: It passes the new index to the algorithmic engine, recalculating the active points array for that specific historical moment, and pushes the data to the heatmap via setLatLngs(). This ensures the map visually tracks the slider's movement in real-time, providing immediate visual feedback24.

4. Update UI Metadata: It queries the JSON payload for the timestamp associated with the new index and updates an associated DOM text label, displaying the exact date being viewed by the user24.

To resume the automated animation, a distinct "Play" button triggers a function that re-initializes the setInterval logic, continuing seamlessly from the slider's current dropped position20.

Specifying and Analyzing Temporal Ranges

Advanced epidemiological analysis often requires viewing cumulative data over specific periods, rather than instantaneous daily snapshots. The timeline mechanics can be architecturally adapted from a single-value slider to a dual-handled range slider. This allows analysts to define a highly specific temporal window—for example, mapping the cumulative viral spread exclusively between the initial emergence of a novel variant and the implementation of international travel restrictions. In this configuration, the timeline interface exposes a start limit and an end limit22. The JavaScript filtering logic iterates through the master JSON dataset and extracts all geographic points with timestamps falling between the slider's established start and end bounds. As the analyst shifts the entire window along the timeline, the heatmap continuously aggregates and disaggregates data. This dynamic windowing technique reveals the migrating geographic footprint of the virus for that specific era, independent of prior or subsequent waves22.

Performance Optimization and Edge Cases

Visualizing tens of thousands of dynamic points introduces significant processing overhead on the client browser. While Leaflet.heat is highly optimized due to its mathematical grid-clustering logic—which consolidates proximal points into a single rendered node before applying the expensive radial blur filter14—architectural bottlenecks can still occur in memory management, DOM repainting, and network latency.

Data Payload Management and Chunking

If the viral database contains millions of records spanning several years, attempting to transfer the entire dataset in a single JSON payload from the PHP API will cause immense network latency, potentially crashing the browser's memory heap during the JSON.parse() phase. To mitigate this, the architecture must implement intelligent data chunking or temporal pagination. Instead of loading the entire outbreak history at initialization, the JavaScript engine can request data from the PHP API in rolling temporal windows (e.g., fetching only 30 days of data at a time). The PHP API utilizes LIMIT and OFFSET clauses, or temporal bounding parameters, to deliver these chunks. As the timeline slider plays and approaches the end of the current local data buffer, an asynchronous fetch() call requests the next chronological chunk in the background. This lazy-loading approach ensures rapid initial map rendering while maintaining seamless playback capability for massive datasets.

Hardware Acceleration and Canvas Limitations

The HTML5 Canvas API, which powers Leaflet.heat, inherently utilizes hardware acceleration on modern browsers. However, executing the animation loop via standard setInterval forces the browser to calculate spatial updates regardless of the monitor's screen refresh rate, potentially leading to frame dropping and visual stuttering30. For high-fidelity, professional-grade animations, the standard setInterval should be replaced with window.requestAnimationFrame(). This native browser method synchronizes the complex spatial recalculations with the browser's internal repaint cycle (typically 60 frames per second)30. By binding the redraw() and setLatLngs() methods to requestAnimationFrame, the viral spread animation becomes remarkably fluid. This method delegates the heavy lifting to the GPU and preserves CPU cycles for manipulating the underlying data arrays30. Furthermore, modifying the map bounds while the animation is actively playing—such as when a user pans across the continent or zooms in on a specific city—requires the heatmap to recalculate its screen-to-geographic coordinate translations dynamically16. The Leaflet.heat plugin natively hooks into Leaflet's core moveend and zoomanim events to handle this process. It ensures the heatmap scales proportionally as the viewport changes30. Ensuring that maxZoom options are correctly configured during initialization prevents the browser from attempting to render infinitely small, highly intense clusters at extreme street-level magnification14.

Conclusion

The architecture required to visualize a viral spread over time demands a highly optimized synthesis of backend data provisioning and frontend spatial rendering. By utilizing a PHP backend with PDO, software architects ensure the secure, rapid, and indexed retrieval of time-series spatial data. This data is properly serialized into JSON and distributed under strict CORS policies, protecting the integrity of the epidemiological database while providing a standardized interface for consumption. On the frontend presentation layer, Leaflet provides the necessary geographic coordinate scaffolding and tile integration, while the Leaflet.heat plugin serves as the high-performance engine determining the visual intensity of the contagion. Through the implementation of custom JavaScript animation loops, sophisticated algorithmic heat-up and cool-down mechanics, and responsive interactive timeline sliders, raw static data is transformed into a fluid, analytical narrative. This decoupled, canvas-accelerated approach provides epidemiologists, policy makers, and spatial analysts with the interactive performance required to observe, track, and ultimately understand the complex geographic life cycles of viral outbreaks.

Works cited

1. Building a JSON CRUD API in PHP \- Zuplo, https://zuplo.com/learning-center/building-a-json-crud-api-in-php

2. Introduction to PDO and Prepared Statements for MySQL Queries \- YouTube, https://www.youtube.com/watch?v=Li90TQap1bc

3. How to: retrieve date and time types as PHP DateTime objects using the PDO\_SQLSRV driver \- PHP drivers for SQL Server | Microsoft Learn, https://learn.microsoft.com/en-us/sql/connect/php/how-to-retrieve-datetime-objects-using-pdo-sqlsrv-driver?view=sql-server-ver17

4. How can i set a dynamic date for a JSON value? \- Stack Overflow, https://stackoverflow.com/questions/56718412/how-can-i-set-a-dynamic-date-for-a-json-value

5. Cross-Origin Request Headers(CORS) with PHP headers \- Stack Overflow, https://stackoverflow.com/questions/8719276/cross-origin-request-headerscors-with-php-headers

6. How to enable CORS with PHP \- Stack Overflow, https://stackoverflow.com/questions/47478642/how-to-enable-cors-with-php

7. Slim v4 \- CORS tuupola, https://discourse.slimframework.com/t/slim-v4-cors-tuupola/3763

8. Enable CORS on JSON API WordPress \- Stack Overflow, https://stackoverflow.com/questions/25702061/enable-cors-on-json-api-wordpress

9. Plugins \- Leaflet \- a JavaScript library for interactive maps, https://leafletjs.com/plugins.html

10. Animations with Leaflet \- Raster Maps \- Xweather, https://www.xweather.com/docs/maps/examples/leaflet-animation

11. Documentation \- Leaflet \- a JavaScript library for interactive maps, https://leafletjs.com/reference.html

12. Dynamically Showing and Hiding Markers in Leaflet \- Raymond Camden, https://www.raymondcamden.com/2024/09/24/dynamically-showing-and-hiding-markers-in-leaflet

13. Dynamically change Leaflet layer \- javascript \- GIS Stack Exchange, https://gis.stackexchange.com/questions/209504/dynamically-change-leaflet-layer

14. Leaflet/Leaflet.heat: A tiny, simple and fast heatmap plugin for Leaflet. \- GitHub, https://github.com/Leaflet/Leaflet.heat

15. leaflet4vaadin/src/main/java/com/vaadin/addon/leaflet4vaadin/plugins/heatmap/HeatLayer.java at master · Gubancs/leaflet4vaadin \- GitHub, https://github.com/Gubancs/leaflet4vaadin/blob/master/src/main/java/com/vaadin/addon/leaflet4vaadin/plugins/heatmap/HeatLayer.java

16. Leaflet.heat | A tiny, simple and fast heatmap plugin for Leaflet. \- GitHub Pages, http://leaflet.github.io/Leaflet.heat/

17. Animated Heatmap with Heatmap.js | Socrata \- Data & Insights, https://dev.socrata.com/blog/2014/10/01/animated-heatmap

18. remove leaflet heatmap layer with rCharts and shiny \- Stack Overflow, https://stackoverflow.com/questions/26752589/remove-leaflet-heatmap-layer-with-rcharts-and-shiny

19. Angular-Leaflet heatmap data update \- Stack Overflow, https://stackoverflow.com/questions/31339556/angular-leaflet-heatmap-data-update

20. Heatmap Animation Example \- Patrick Wied, https://www.patrick-wied.at/static/heatmapjs/example-heatmap-animation.html

21. Animated traveling map with Leaflet \- DEV Community, https://dev.to/bcaure/animated-traveling-map-with-leaflet-5fdf

22. Animating Data and Timelines \- MapsGL \- Xweather, https://www.xweather.com/docs/mapsgl/getting-started/animating-data

23. Animate points and/or polygons on leaflet map \- GIS Stack Exchange, https://gis.stackexchange.com/questions/229131/animate-points-and-or-polygons-on-leaflet-map

24. Leaflet- How to use time dimension plugin with image overlay \- GIS StackExchange, https://gis.stackexchange.com/questions/337975/leaflet-how-to-use-time-dimension-plugin-with-image-overlay

25. socib/Leaflet.TimeDimension: Add time dimension capabilities on a Leaflet map. \- GitHub, https://github.com/socib/Leaflet.TimeDimension

26. svitkin/leaflet-timeline-slider \- GitHub, https://github.com/svitkin/leaflet-timeline-slider/

27. rotate polygon around point in leaflet map \- javascript \- Stack Overflow, https://stackoverflow.com/questions/34967607/rotate-polygon-around-point-in-leaflet-map

28. TimeDimension with Leaflet and Python backend \- Stack Overflow, https://stackoverflow.com/questions/55036858/timedimension-with-leaflet-and-python-backend

29. Leaflet timeline in R | Boaz Sobrado's Website, https://boazsobrado.com/blog/2018/02/08/leaflet-timeline-in-r/

30. Leaflet.heat/src/HeatLayer.js at gh-pages · Leaflet/Leaflet.heat · GitHub, https://github.com/Leaflet/Leaflet.heat/blob/gh-pages/src/HeatLayer.js/