Creating an Animation Map of Earthquakes in Kyrgyzstan using JavaScript Mapping APIs
Learning objectives:
At the end of the lesson, learners should be able to:
- Understand the differences between the ArcGIS Maps SDK for JavaScript, Google Maps API, and Leaflet.
- Understand how to create a web map using each of the three mapping APIs.
- Understand how to animate earthquake markers on the map using each of the three mapping APIs.
- Understand how to display popup information for each earthquake marker using each of the three mapping APIs.
- Understand how to customize marker appearance and popup content using each API.
Spatiotemporal visualization
In the previous level, we have discovered that the Kyrgyzstan has an untold history of seismic activity. The first step for the reduction of disaster risk is event documentation and mitigation. Unfolding history prepares society for the possible phenomena coming next. Inside this level, we focus on how temporal attribute of events can be implemented in web maps.
Phenomena in the world can be defined by their space location and the time they are at. Therefore, one can analyse not only spatial distribution but also their evolvement in time i.e., the spatiotemporal dynamics. Modern technology enables to use computational models to store, analyse, and visualize the complexity of spatiotemporal dynamics (Shaw & Ye, 2019).
Peuquet (1994) claims that any spatial process has a temporal element to be investigated, the evolvement depicts the cause-and-effect relationships and promotes the understanding of the phenomenon. Although, even nowadays, it is a critical question of how to visualize the phenomena in a spatiotemporal manner effectively and efficiently.
Prominent examples of spatiotemporal visualization are animated maps especially while dealing with web cartography. “The animated maps display time to illustrate the change in location, attributes, or existence over real time” (Fish, 2018). Specifically in this level, we will work with the sub-group of the animated maps i.e., the dynamic symbol map (Fish, 2018). The maps are very intuitive for the users as the temporal attribute is represented by time through utilization of the congruency principle (Tversky et al., 2002), compared to the representation of time through multiple static maps. However, map readers may experience a variety of cognitive limits such as an overload of their comprehension abilities or change blindness (Fish, 2018).
Dynamic variables of animated maps according to DiBiase et al. (1990) are the rate of change, order, and duration. These are true for all animated maps and should be adjusted according to the map’s purpose. Temporal legends complement the map application and change as the map changes. Well-designed temporal legend allows the user to identify what happened when (Kraak et al. 1997). The most popular is the slidebar temporal legend, however, Google Maps API enables utilisation of only the numerical-temporal legend through a calendar.
All in all, the animated map is an attractive and effective method of spatiotemporal visualization. The involvement of modern technologies enhances the understanding of spatial phenomena. This lesson will guide you through the current possibilities for mapping spatiotemporal dynamics via the three APIs available.
Have fun!
Data Collection:
The data for this lesson will be collected from the United States Geological Survey (USGS). The data will include information such as earthquake location, magnitude, depth, time, and date. Our primary data source will be the USGS, but we will also explore alternative sources, such as the European Union’s Emergency Management Service Copernicus mapping service.
ArcGIS Maps SDK for JavaScript
Google Maps API
Leaflet
Comparison between JavaScript Mapping API:
ArcGIS Maps SDK for JavaScript API
Google Maps API
Leaflet
Scope:
The ArcGIS Maps SDK for JavaScript provides a wide range of time-aware visualization options such as time-enabled layers, time slider widget, and filtering data by time. It also offers advanced mapping capabilities such as 3D visualization, real-time data, and geocoding.
Scope:
The Google Maps API offers basic time-aware visualization options such as a time widget and time filtering. It also provides custom styling, directions, and Street View.
Scope:
Leaflet offers basic time-aware visualization options such as a time slider plugin and filtering data by time. It is lightweight and easy to use, making it a good choice for beginners.
Limitations:
The ArcGIS Maps SDK for JavaScript requires a paid license for commercial use, and its advanced features may require a steep learning curve for beginners.
Limitations:
The Google Maps API requires an API key, and some of its features are limited to a certain number of requests per day. It also lacks more advanced time-series visualization options.
Limitations:
Leaflet lacks some advanced features such as 3D visualization and routing, and its time-series visualization options may not be as robust as other mapping APIs.
Conclusion:
In conclusion, learners in this lesson have gained a comprehensive understanding of web mapping using the ArcGIS Maps SDK for JavaScript, Google Maps API, and Leaflet. They have learned how to create a web map and animate earthquake markers using each of the three mapping APIs. By understanding the scope and limitations of each mapping API, learners can choose the best one for their use case, whether it is a simple time-slider widget or more advanced time-aware layers.
Further Learning:
To continue learning about time-series visualization using JavaScript mapping APIs, learners can explore other libraries and frameworks such as Mapbox, OpenLayers, and D3.js. They can also deepen their knowledge of time-series data analysis and visualization techniques, as well as optimization techniques for improving the performance of time-series visualization in web maps.
Documentation:
Community resources:
ArcGIS Maps SDK for JavaScript:
Google Maps API:
Leaflet
Tutorials and courses: ArcGIS Maps SDK for JavaScript:
Tutorials and courses: Google Maps API:
Tutorials and courses: Leaflet:
- How to draw maps by using Leaflet.js
- Introduction to Digital Mapping with Leaflet
- Leaflet – Adding Interactivity to Your Maps
- Leaflet: Creating Custom Plugins for Leaflet
- Leaflet Quick Start Guide
- Mapping API’s: Leaflet – Introduction to Legends
- Mapping API’s: Leaflet – Adding Google Basemap Layers
- Mapping API’s: Leaflet – Circles and Circle Markers
- Mapping API’s: Leaflet – Creating Polylines and Polygons
References:
- DiBiase, D., MacEachren, A. M., Krygier, J. B., and Reeves, C. (1992). Animation and the Role of Map Design in Scientific Visualization. Cartography and Geographic Information Science 19 (4): 201–14, 265–66.
- Fish, C. (2018). Spatiotemporal Representation. The Geographic Information Science & Technology Body of Knowledge (4th Quarter 2018 Edition), John P. Wilson (Ed.). DOI: 10.22224/gistbok/2018.4.6
- Kraak, M-J., Edsall, R., and MacEachren, A. M. (1997). Cartographic Animation and Legends for Temporal Maps: Exploration and or Interaction. In Proceedings of the 18th International Cartographic Conference, 1:253–261.
- Peuquet, D. J. (1994). It’s about Time: A Conceptual Framework for the Representation of Temporal Dynamics in Geographic Information Systems. Annals of the Association of American Geographers 84 (3): 441–461.
- Shaw, S-L. and Ye, X. (2019). Capturing Spatiotemporal Dynamics in Computational Modeling. The Geographic Information Science & Technology Body of Knowledge (1st Quarter 2019 Edition), John P. Wilson (Ed). DOI: 10.22224/gistbok/2019.1.6
- Tversky, B., Morrison, J. B., and Betrancourt, M. (2002). Animation: Can It Facilitate? International Journal of Human Computer Studies 57: 247–62.