{"id":2030,"date":"2023-04-12T12:24:45","date_gmt":"2023-04-12T12:24:45","guid":{"rendered":"https:\/\/geopick.cityai.space\/?page_id=2030"},"modified":"2023-06-11T10:11:40","modified_gmt":"2023-06-11T10:11:40","slug":"advance","status":"publish","type":"page","link":"https:\/\/geopick.cityai.space\/index.php\/tutorials\/advance\/","title":{"rendered":"Level 3: Complex Data Visualization"},"content":{"rendered":"\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-0768ad2\" id=\"creating-an-animation-map-of-earthquakes-in-kyrgyzstan-using-java-script-mapping-ap-is\" data-block-id=\"0768ad2\"><h1 class=\"stk-block-heading__text has-text-align-center\">Creating an Animation Map of Earthquakes in Kyrgyzstan using JavaScript Mapping APIs<\/h1><\/div>\n\n\n\n<div class=\"wp-block-stackable-columns stk-block-columns stk-block stk-f766ce9\" data-block-id=\"f766ce9\"><div class=\"stk-row stk-inner-blocks stk-block-content stk-content-align stk-f766ce9-column\">\n<div class=\"wp-block-stackable-column stk-block-column stk-block-column--v3 stk-column stk-block-column--v2 stk-block stk-90d460c\" data-block-id=\"90d460c\"><style>@media screen and (min-width:768px){.stk-90d460c{flex:1 1 66.7% !important}}<\/style><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-90d460c-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-90d460c-inner-blocks\">\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-4f6174c\" id=\"learning-objectives\" data-block-id=\"4f6174c\"><h2 class=\"stk-block-heading__text\">Learning objectives:<\/h2><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-19f7b49\" data-block-id=\"19f7b49\"><p class=\"stk-block-text__text\">At the end of the lesson, learners should be able to:<\/p><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Understand the differences between the ArcGIS Maps SDK for JavaScript, Google Maps API, and Leaflet.<\/li>\n\n\n\n<li>Understand how to create a web map using each of the three mapping APIs.<\/li>\n\n\n\n<li>Understand how to animate earthquake markers on the map using each of the three mapping APIs.<\/li>\n\n\n\n<li>Understand how to display popup information for each earthquake marker using each of the three mapping APIs.<\/li>\n\n\n\n<li>Understand how to customize marker appearance and popup content using each API.<\/li>\n<\/ul>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-column stk-block-column stk-block-column--v3 stk-column stk-block-column--v2 stk-block stk-5cef5d0\" data-block-id=\"5cef5d0\"><style>@media screen and (min-width:768px){.stk-5cef5d0{flex:1 1 33.3% !important}}<\/style><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-5cef5d0-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-5cef5d0-inner-blocks\">\n<nav class=\"wp-block-stackable-table-of-contents stk-block-table-of-contents stk-block stk-e34fb8f\" data-block-id=\"e34fb8f\"><p class=\"stk-table-of-contents__title\">Table of Contents<\/p><ul class=\"stk-table-of-contents__table\"><li><a href=\"#learning-objectives\">Learning objectives:<\/a><\/li><li><a href=\"#spatiotemporal-visualization\">Spatiotemporal visualization<\/a><\/li><li><a href=\"#data-collection\">Data Collection:<\/a><ul><li><a href=\"#arc-gis-maps-sdk-for-java-script\">ArcGIS Maps SDK for JavaScript<\/a><\/li><li><a href=\"#google-maps-api\">Google Maps API<\/a><\/li><li><a href=\"#leaflet\">Leaflet<\/a><\/li><\/ul><\/li><li><a href=\"#comparison-between-java-script-mapping-api\">Comparison between JavaScript Mapping API: <\/a><ul><li><a href=\"#arc-gis-maps-sdk-for-java-script-api\">ArcGIS Maps SDK for JavaScript API<\/a><\/li><li><a href=\"#google-maps-api\">Google Maps API<\/a><\/li><li><a href=\"#leaflet\">Leaflet<\/a><\/li><\/ul><\/li><li><a href=\"#conclusion\">Conclusion:<\/a><\/li><li><a href=\"#further-learning\">Further Learning:<\/a><\/li><li><a href=\"#references\">References:<\/a><\/li><\/ul><\/nav>\n<\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-columns alignwide stk-block-columns stk-block stk-3479924\" data-block-id=\"3479924\"><div class=\"stk-row stk-inner-blocks stk-block-content stk-content-align stk-3479924-column alignwide\">\n<div class=\"wp-block-stackable-column stk-block-column stk-block-column--v3 stk-column stk-block-column--v2 stk-block stk-2bffdc0\" data-block-id=\"2bffdc0\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-2bffdc0-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-2bffdc0-inner-blocks\">\n<div class=\"wp-block-stackable-columns stk-block-columns stk-block stk-e0ac8f8\" data-block-id=\"e0ac8f8\"><style>.stk-e0ac8f8-column{--stk-column-gap:32px !important}<\/style><div class=\"stk-row stk-inner-blocks stk-block-content stk-content-align stk-e0ac8f8-column\">\n<div class=\"wp-block-stackable-column stk-block-column stk-block-column--v3 stk-column stk-block-column--v2 stk-block stk-c4a9e38\" data-block-id=\"c4a9e38\"><style>.stk-c4a9e38-container{margin-top:0px !important;margin-right:0px !important;margin-bottom:0px !important;margin-left:0px !important}@media screen and (min-width:768px){.stk-c4a9e38{flex:1 1 calc(69.6% - var(--stk-column-gap,0px) * 1 \/ 2 ) !important}}<\/style><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-c4a9e38-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-c4a9e38-inner-blocks\">\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Animated Maps: 120 Years of Earthquakes (4K)\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/Zy7eQQkUaJo?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><figcaption class=\"wp-element-caption\">Video used for illustrative purpose only. 120 Years of Earthquakes (Esri, 2019).<\/figcaption><\/figure>\n\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-55f3bef\" id=\"spatiotemporal-visualization\" data-block-id=\"55f3bef\"><h2 class=\"stk-block-heading__text\">Spatiotemporal visualization<\/h2><\/div>\n\n\n\n<p>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.&nbsp;<\/p>\n\n\n\n<p>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 &amp; Ye, 2019).<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>Prominent examples of spatiotemporal visualization are animated maps especially while dealing with web cartography. \u201c<em>The animated maps display time to illustrate the change in location, attributes, or existence over real time<\/em>\u201d (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).<\/p>\n\n\n\n<p>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&#8217;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, <em>Google Maps API<\/em> enables utilisation of only the numerical-temporal legend through a calendar.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>Have fun!<\/p>\n\n\n\n<div class=\"wp-block-stackable-button-group stk-block-button-group stk-block stk-f14979e\" data-block-id=\"f14979e\"><div class=\"stk-row stk-inner-blocks stk-block-content stk-button-group\">\n<div class=\"wp-block-stackable-button stk-block-button stk-block stk-a20e6b7\" data-block-id=\"a20e6b7\"><style>.stk-a20e6b7 .stk-button{background:var(--stk-global-color-98107,#7c75cc) !important}<\/style><a class=\"stk-link stk-button stk--hover-effect-darken\" href=\"http:\/\/gistbok.ucgis.org\/bok-topics\/spatiotemporal-representation\" target=\"_blank\" rel=\"noreferrer noopener\"><span class=\"stk-button__inner-text\">Learn more<\/span><\/a><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-7c74875\" id=\"data-collection\" data-block-id=\"7c74875\"><h2 class=\"stk-block-heading__text\">Data Collection:<\/h2><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-166ac4c\" data-block-id=\"166ac4c\"><p class=\"stk-block-text__text\">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 <a rel=\"noreferrer noopener\" href=\"https:\/\/emergency.copernicus.eu\/mapping\/#zoom=2&amp;lat=13.55015&amp;lon=47.78903&amp;layers=00B0T\" target=\"_blank\">European Union&#8217;s Emergency Management Service Copernicus<\/a> mapping service. <\/p><\/div>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-column stk-block-column stk-block-column--v3 stk-column stk-block-column--v2 stk-block stk-66ba30d\" data-block-id=\"66ba30d\"><style>.stk-66ba30d-container{margin-top:0px !important;margin-right:0px !important;margin-bottom:0px !important;margin-left:0px !important}@media screen and (min-width:768px){.stk-66ba30d{flex:1 1 calc(30.4% - var(--stk-column-gap,0px) * 1 \/ 2 ) !important}}<\/style><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-66ba30d-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-66ba30d-inner-blocks\">\n<div class=\"wp-block-stackable-card stk-block-card stk-block stk-10b388d is-style-horizontal\" data-block-id=\"10b388d\"><style>.stk-10b388d .stk-block-card__content{padding-left:24px !important}.stk-10b388d .stk-block-card__image{width:300px !important}@media screen and (max-width:767px){.stk-10b388d .stk-block-card__image{width:100px !important}}<\/style><div class=\"stk--no-padding stk-container stk-10b388d-container stk--no-background stk--no-padding\"><figure class=\"stk-block-card__image stk-img-wrapper stk-image--shape-stretch\"><img fetchpriority=\"high\" decoding=\"async\" class=\"stk-img wp-image-1187\" src=\"https:\/\/geopick.cityai.space\/wp-content\/uploads\/2023\/04\/esri-arcgis-server-geographic-information-system-arcmap-map-bda0316c266db1eeb3d8c04cf8d15e35.png\" width=\"509\" height=\"510\" srcset=\"https:\/\/geopick.cityai.space\/wp-content\/uploads\/2023\/04\/esri-arcgis-server-geographic-information-system-arcmap-map-bda0316c266db1eeb3d8c04cf8d15e35.png 509w, https:\/\/geopick.cityai.space\/wp-content\/uploads\/2023\/04\/esri-arcgis-server-geographic-information-system-arcmap-map-bda0316c266db1eeb3d8c04cf8d15e35-300x300.png 300w, https:\/\/geopick.cityai.space\/wp-content\/uploads\/2023\/04\/esri-arcgis-server-geographic-information-system-arcmap-map-bda0316c266db1eeb3d8c04cf8d15e35-150x150.png 150w, https:\/\/geopick.cityai.space\/wp-content\/uploads\/2023\/04\/esri-arcgis-server-geographic-information-system-arcmap-map-bda0316c266db1eeb3d8c04cf8d15e35-100x100.png 100w\" sizes=\"(max-width: 509px) 100vw, 509px\" \/><\/figure><div class=\"stk-block-card__content\"><div class=\"stk-block-content stk-inner-blocks\">\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-5a8a00e\" id=\"arc-gis-maps-sdk-for-java-script\" data-block-id=\"5a8a00e\"><h3 class=\"stk-block-heading__text has-text-align-center\">ArcGIS Maps SDK for JavaScript<\/h3><\/div>\n\n\n\n<div class=\"wp-block-stackable-button-group stk-block-button-group stk-block stk-ab6d757\" data-block-id=\"ab6d757\"><div class=\"stk-row stk-inner-blocks has-text-align-center stk-block-content stk-button-group\">\n<div class=\"wp-block-stackable-button stk-block-button has-text-align-right stk-block stk-760891a\" data-block-id=\"760891a\"><style>.stk-760891a .stk-button{background:var(--stk-global-color-98107,#7c75cc) !important}<\/style><a class=\"stk-link stk-button stk--hover-effect-darken\" href=\"https:\/\/geopick.cityai.space\/index.php\/tutorials\/advance\/arcgis-maps-sdk-for-javascript\/\"><span class=\"stk-button__inner-text\">Try it yourself<\/span><\/a><\/div>\n\n\n\n<div class=\"wp-block-stackable-button stk-block-button has-text-align-right stk-block stk-af4bae2\" data-block-id=\"af4bae2\"><style>.stk-af4bae2 .stk-button{background:var(--stk-global-color-98107,#7c75cc) !important}<\/style><a class=\"stk-link stk-button stk--hover-effect-darken\" href=\"https:\/\/geopick.cityai.space\/wp-content\/uploads\/2023\/05\/Level_3_ArcGIS_Maps_SDK.html\"><span class=\"stk-button__inner-text\">     Demo     <\/span><\/a><\/div>\n<\/div><\/div>\n<\/div><\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-card stk-block-card stk-block stk-937cad9 is-style-horizontal\" data-block-id=\"937cad9\"><style>.stk-937cad9 .stk-block-card__content{padding-left:24px !important}.stk-937cad9 .stk-block-card__image{width:300px !important}@media screen and (max-width:767px){.stk-937cad9 .stk-block-card__image{width:100px !important}}<\/style><div class=\"stk--no-padding stk-container stk-937cad9-container stk--no-background stk--no-padding\"><figure class=\"stk-block-card__image stk-img-wrapper stk-image--shape-stretch\"><img decoding=\"async\" class=\"stk-img wp-image-1191\" src=\"https:\/\/geopick.cityai.space\/wp-content\/uploads\/2023\/04\/icons8-google-500.png\" width=\"500\" height=\"500\" srcset=\"https:\/\/geopick.cityai.space\/wp-content\/uploads\/2023\/04\/icons8-google-500.png 500w, https:\/\/geopick.cityai.space\/wp-content\/uploads\/2023\/04\/icons8-google-500-300x300.png 300w, https:\/\/geopick.cityai.space\/wp-content\/uploads\/2023\/04\/icons8-google-500-150x150.png 150w, https:\/\/geopick.cityai.space\/wp-content\/uploads\/2023\/04\/icons8-google-500-100x100.png 100w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/figure><div class=\"stk-block-card__content\"><div class=\"stk-block-content stk-inner-blocks\">\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-16958f4\" id=\"google-maps-api\" data-block-id=\"16958f4\"><h3 class=\"stk-block-heading__text has-text-align-center\">Google Maps API<\/h3><\/div>\n\n\n\n<div class=\"wp-block-stackable-button-group stk-block-button-group stk-block stk-f81d487\" data-block-id=\"f81d487\"><div class=\"stk-row stk-inner-blocks has-text-align-center stk-block-content stk-button-group\">\n<div class=\"wp-block-stackable-button stk-block-button stk-block stk-8f4fb1c\" data-block-id=\"8f4fb1c\"><style>.stk-8f4fb1c .stk-button{background:var(--stk-global-color-98107,#7c75cc) !important}<\/style><a class=\"stk-link stk-button stk--hover-effect-darken\" href=\"https:\/\/geopick.cityai.space\/index.php\/google-maps-api\/\"><span class=\"stk-button__inner-text\">Try it yourself<\/span><\/a><\/div>\n\n\n\n<div class=\"wp-block-stackable-button stk-block-button stk-block stk-a9d46a8\" data-block-id=\"a9d46a8\"><style>.stk-a9d46a8 .stk-button{background:var(--stk-global-color-98107,#7c75cc) !important}<\/style><a class=\"stk-link stk-button stk--hover-effect-darken\" href=\"https:\/\/geopick.cityai.space\/wp-content\/uploads\/2023\/06\/Level_3_Google_Map_API.html\"><span class=\"stk-button__inner-text\">     Demo     <\/span><\/a><\/div>\n<\/div><\/div>\n<\/div><\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-card stk-block-card stk-block stk-2632133 is-style-horizontal\" data-block-id=\"2632133\"><style>.stk-2632133 .stk-block-card__content{padding-left:24px !important}.stk-2632133 .stk-block-card__image{width:300px !important}@media screen and (max-width:767px){.stk-2632133 .stk-block-card__image{width:100px !important}}<\/style><div class=\"stk--no-padding stk-container stk-2632133-container stk--no-background stk--no-padding\"><figure class=\"stk-block-card__image stk-img-wrapper stk-image--shape-stretch\"><img decoding=\"async\" class=\"stk-img wp-image-1189\" src=\"https:\/\/geopick.cityai.space\/wp-content\/uploads\/2023\/04\/pngwing.com_.png\" width=\"800\" height=\"800\" srcset=\"https:\/\/geopick.cityai.space\/wp-content\/uploads\/2023\/04\/pngwing.com_.png 800w, https:\/\/geopick.cityai.space\/wp-content\/uploads\/2023\/04\/pngwing.com_-300x300.png 300w, https:\/\/geopick.cityai.space\/wp-content\/uploads\/2023\/04\/pngwing.com_-150x150.png 150w, https:\/\/geopick.cityai.space\/wp-content\/uploads\/2023\/04\/pngwing.com_-768x768.png 768w, https:\/\/geopick.cityai.space\/wp-content\/uploads\/2023\/04\/pngwing.com_-600x600.png 600w, https:\/\/geopick.cityai.space\/wp-content\/uploads\/2023\/04\/pngwing.com_-100x100.png 100w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure><div class=\"stk-block-card__content\"><div class=\"stk-block-content stk-inner-blocks\">\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-dd86191\" id=\"leaflet\" data-block-id=\"dd86191\"><h3 class=\"stk-block-heading__text has-text-align-center\">Leaflet<\/h3><\/div>\n\n\n\n<div class=\"wp-block-stackable-button-group stk-block-button-group stk-block stk-eaf1b69\" data-block-id=\"eaf1b69\"><div class=\"stk-row stk-inner-blocks has-text-align-center stk-block-content stk-button-group\">\n<div class=\"wp-block-stackable-button stk-block-button stk-block stk-ac9bc8c\" data-block-id=\"ac9bc8c\"><style>.stk-ac9bc8c .stk-button{background:var(--stk-global-color-98107,#7c75cc) !important}<\/style><a class=\"stk-link stk-button stk--hover-effect-darken\" href=\"https:\/\/geopick.cityai.space\/index.php\/tutorials\/advance\/leaflet\/\"><span class=\"stk-button__inner-text\">Try it yourself<\/span><\/a><\/div>\n\n\n\n<div class=\"wp-block-stackable-button stk-block-button stk-block stk-634774b\" data-block-id=\"634774b\"><style>.stk-634774b .stk-button{background:var(--stk-global-color-98107,#7c75cc) !important}<\/style><a class=\"stk-link stk-button stk--hover-effect-darken\" href=\"https:\/\/geopick.cityai.space\/wp-content\/uploads\/2023\/05\/Level_3_Leaflet.html\"><span class=\"stk-button__inner-text\">     Demo     <\/span><\/a><\/div>\n<\/div><\/div>\n<\/div><\/div><\/div><\/div>\n<\/div><\/div><\/div>\n<\/div><\/div>\n<\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-columns stk-block-columns stk-block stk-5e37517\" data-block-id=\"5e37517\"><div class=\"stk-row stk-inner-blocks stk-block-content stk-content-align stk-5e37517-column\">\n<div class=\"wp-block-stackable-column stk-block-column stk-block-column--v3 stk-column stk-block-column--v2 stk-block stk-fce3aa6\" data-block-id=\"fce3aa6\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-fce3aa6-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-fce3aa6-inner-blocks\">\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-1b9bf51\" id=\"comparison-between-java-script-mapping-api\" data-block-id=\"1b9bf51\"><h2 class=\"stk-block-heading__text has-text-align-center\">Comparison between JavaScript Mapping API: <\/h2><\/div>\n\n\n\n<div class=\"wp-block-stackable-columns stk-block-columns stk-block stk-fca7932\" data-block-id=\"fca7932\"><div class=\"stk-row stk-inner-blocks stk-block-content stk-content-align stk-fca7932-column\">\n<div class=\"wp-block-stackable-column stk-block-column stk-block-column--v3 stk-column stk-block-column--v2 stk-block stk-563646d\" data-block-id=\"563646d\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-563646d-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-563646d-inner-blocks\">\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-1d9c3ba\" id=\"arc-gis-maps-sdk-for-java-script-api\" data-block-id=\"1d9c3ba\"><h3 class=\"stk-block-heading__text has-text-align-center\">ArcGIS Maps SDK for JavaScript API<\/h3><\/div>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-column stk-block-column stk-block-column--v3 stk-column stk-block-column--v2 stk-block stk-4ad03bd\" data-block-id=\"4ad03bd\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-4ad03bd-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-4ad03bd-inner-blocks\">\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-da8e639\" id=\"google-maps-api\" data-block-id=\"da8e639\"><h3 class=\"stk-block-heading__text has-text-align-center\">Google Maps API<\/h3><\/div>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-column stk-block-column stk-block-column--v3 stk-column stk-block-column--v2 stk-block stk-49ced08\" data-block-id=\"49ced08\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-49ced08-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-49ced08-inner-blocks\">\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-e20744b\" id=\"leaflet\" data-block-id=\"e20744b\"><h3 class=\"stk-block-heading__text has-text-align-center\">Leaflet<\/h3><\/div>\n<\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-columns stk-block-columns stk-block stk-3e09522\" data-block-id=\"3e09522\"><div class=\"stk-row stk-inner-blocks stk-block-content stk-content-align stk-3e09522-column\">\n<div class=\"wp-block-stackable-column stk-block-column stk-block-column--v3 stk-column stk-block-column--v2 stk-block stk-8792a0b\" data-block-id=\"8792a0b\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-8792a0b-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-8792a0b-inner-blocks\">\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-f54b543\" id=\"scope\" data-block-id=\"f54b543\"><h4 class=\"stk-block-heading__text has-text-align-center\">Scope:<\/h4><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-d207406\" data-block-id=\"d207406\"><p class=\"stk-block-text__text\">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.<\/p><\/div>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-column stk-block-column stk-block-column--v3 stk-column stk-block-column--v2 stk-block stk-e670cef\" data-block-id=\"e670cef\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-e670cef-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-e670cef-inner-blocks\">\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-5c6cb41\" id=\"scope\" data-block-id=\"5c6cb41\"><h4 class=\"stk-block-heading__text has-text-align-center\">Scope:<\/h4><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-c003bd7\" data-block-id=\"c003bd7\"><p class=\"stk-block-text__text\">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.<\/p><\/div>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-column stk-block-column stk-block-column--v3 stk-column stk-block-column--v2 stk-block stk-d0e3b6c\" data-block-id=\"d0e3b6c\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-d0e3b6c-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-d0e3b6c-inner-blocks\">\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-3814654\" id=\"scope\" data-block-id=\"3814654\"><h4 class=\"stk-block-heading__text has-text-align-center\">Scope:<\/h4><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-2ab4a60\" data-block-id=\"2ab4a60\"><p class=\"stk-block-text__text\">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.<\/p><\/div>\n<\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-columns stk-block-columns stk-block stk-acd8c2e\" data-block-id=\"acd8c2e\"><div class=\"stk-row stk-inner-blocks stk-block-content stk-content-align stk-acd8c2e-column\">\n<div class=\"wp-block-stackable-column stk-block-column stk-block-column--v3 stk-column stk-block-column--v2 stk-block stk-a859849\" data-block-id=\"a859849\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-a859849-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-a859849-inner-blocks\">\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-993a739\" id=\"limitations\" data-block-id=\"993a739\"><h4 class=\"stk-block-heading__text has-text-align-center\">Limitations:<\/h4><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-1ba191f\" data-block-id=\"1ba191f\"><p class=\"stk-block-text__text\">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.<\/p><\/div>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-column stk-block-column stk-block-column--v3 stk-column stk-block-column--v2 stk-block stk-5414705\" data-block-id=\"5414705\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-5414705-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-5414705-inner-blocks\">\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-23def97\" id=\"limitations\" data-block-id=\"23def97\"><h4 class=\"stk-block-heading__text has-text-align-center\">Limitations:<\/h4><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-422560b\" data-block-id=\"422560b\"><p class=\"stk-block-text__text\">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.<\/p><\/div>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-column stk-block-column stk-block-column--v3 stk-column stk-block-column--v2 stk-block stk-bb3207b\" data-block-id=\"bb3207b\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-bb3207b-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-bb3207b-inner-blocks\">\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-53b8e00\" id=\"limitations\" data-block-id=\"53b8e00\"><h4 class=\"stk-block-heading__text has-text-align-center\">Limitations:<\/h4><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-1c98a13\" data-block-id=\"1c98a13\"><p class=\"stk-block-text__text\">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.<\/p><\/div>\n<\/div><\/div><\/div>\n<\/div><\/div>\n<\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-columns stk-block-columns stk-block stk-a634d62\" data-block-id=\"a634d62\"><div class=\"stk-row stk-inner-blocks stk-block-content stk-content-align stk-a634d62-column\">\n<div class=\"wp-block-stackable-column stk-block-column stk-block-column--v3 stk-column stk-block-column--v2 stk-block stk-cc14c7d\" data-block-id=\"cc14c7d\"><style>@media screen and (min-width:768px){.stk-cc14c7d{flex:1 1 33.3% !important}}<\/style><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-cc14c7d-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-cc14c7d-inner-blocks\">\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-8b7ba08\" id=\"conclusion\" data-block-id=\"8b7ba08\"><h2 class=\"stk-block-heading__text\">Conclusion:<\/h2><\/div>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-column stk-block-column stk-block-column--v3 stk-column stk-block-column--v2 stk-block stk-e0b6777\" data-block-id=\"e0b6777\"><style>@media screen and (min-width:768px){.stk-e0b6777{flex:1 1 66.7% !important}}<\/style><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-e0b6777-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-e0b6777-inner-blocks\">\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-8c7fa7a\" data-block-id=\"8c7fa7a\"><p class=\"stk-block-text__text\">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.<\/p><\/div>\n<\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-e5f4915\" id=\"further-learning\" data-block-id=\"e5f4915\"><h2 class=\"stk-block-heading__text\">Further Learning:<\/h2><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-1a965b3\" data-block-id=\"1a965b3\"><p class=\"stk-block-text__text\">To continue learning about time-series visualization using JavaScript mapping APIs, learners can explore other libraries and frameworks such as <a href=\"https:\/\/www.mapbox.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Mapbox<\/a>, <a href=\"https:\/\/openlayers.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">OpenLayers<\/a>, and <a href=\"https:\/\/d3js.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">D3.js.<\/a> 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.<\/p><\/div>\n\n\n\n<div class=\"wp-block-stackable-columns stk-block-columns stk-block stk-33fd232\" data-block-id=\"33fd232\"><div class=\"stk-row stk-inner-blocks stk-block-content stk-content-align stk-33fd232-column\">\n<div class=\"wp-block-stackable-column stk-block-column stk-block-column--v3 stk-column stk-block-column--v2 stk-block stk-ae1b8d4\" data-block-id=\"ae1b8d4\"><style>@media screen and (min-width:768px){.stk-ae1b8d4{flex:1 1 calc(30% - var(--stk-column-gap,0px) * 1 \/ 2 ) !important}}<\/style><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-ae1b8d4-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-ae1b8d4-inner-blocks\">\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-a43b0c2\" id=\"documentation\" data-block-id=\"a43b0c2\"><h5 class=\"stk-block-heading__text has-text-align-center\">Documentation:<\/h5><\/div>\n\n\n\n<ul class=\"wp-block-list\" type=\"1\" start=\"1\">\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/\" target=\"_blank\">ArcGIS Maps SDK for JavaScript<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developers.google.com\/maps\/documentation\/javascript\/overview\" target=\"_blank\" rel=\"noreferrer noopener\">Google Maps API<\/a><\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/leafletjs.com\/reference-1.7.1.html\" target=\"_blank\">Leaflet<\/a><\/li>\n<\/ul>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-column stk-block-column stk-block-column--v3 stk-column stk-block-column--v2 stk-block stk-ccc224c\" data-block-id=\"ccc224c\"><style>@media screen and (min-width:768px){.stk-ccc224c{flex:1 1 calc(70% - var(--stk-column-gap,0px) * 1 \/ 2 ) !important}}<\/style><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-ccc224c-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-ccc224c-inner-blocks\">\n<div class=\"wp-block-stackable-columns stk-block-columns stk-block stk-61b12bd\" data-block-id=\"61b12bd\"><div class=\"stk-row stk-inner-blocks stk-block-content stk-content-align stk-61b12bd-column\">\n<div class=\"wp-block-stackable-column stk-block-column stk-block-column--v3 stk-column stk-block-column--v2 stk-block stk-3d12fc1\" data-block-id=\"3d12fc1\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-3d12fc1-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-3d12fc1-inner-blocks\">\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-527229a\" id=\"community-resources\" data-block-id=\"527229a\"><h5 class=\"stk-block-heading__text has-text-align-center\">Community resources:<\/h5><\/div>\n\n\n\n<div class=\"wp-block-stackable-columns stk-block-columns stk-block stk-c8a1021\" data-block-id=\"c8a1021\"><div class=\"stk-row stk-inner-blocks stk-block-content stk-content-align stk-c8a1021-column\">\n<div class=\"wp-block-stackable-column stk-block-column stk-block-column--v3 stk-column stk-block-column--v2 stk-block stk-b51b4dc\" data-block-id=\"b51b4dc\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-b51b4dc-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-b51b4dc-inner-blocks\">\n<p>ArcGIS Maps SDK for JavaScript:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.youtube.com\/playlist?list=PLGZUzt4E4O2LC0fQWf4T2iDhMXPi5Gh-_\" target=\"_blank\">Esri Community<\/a><\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/support.esri.com\/en\/Products\/Developers\/web-apis\/arcgis-api-for-javascript\/\" target=\"_blank\">Esri Technical Support<\/a><\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.esri.com\/training\/catalog\/search\/\" target=\"_blank\">Esri Training Catalog<\/a><\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/gis.stackexchange.com\/questions\/tagged\/arcgis-maps-sdk-javascript?tab=Newest\" target=\"_blank\">GIS Stack Exchange<\/a><\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/stackoverflow.com\/questions\/tagged\/arcgis+javascript\" target=\"_blank\">StackOverflow<\/a><\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/twitter.com\/EsriDevs\" target=\"_blank\">Twitter<\/a><\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.youtube.com\/playlist?list=PLGZUzt4E4O2LC0fQWf4T2iDhMXPi5Gh-_\" target=\"_blank\">YouTube<\/a><\/li>\n<\/ul>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-column stk-block-column stk-block-column--v3 stk-column stk-block-column--v2 stk-block stk-4e3873e\" data-block-id=\"4e3873e\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-4e3873e-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-4e3873e-inner-blocks\">\n<p>Google Maps API:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/developers.google.com\/maps\/developer-community#discord\" target=\"_blank\">Discord<\/a><\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/developers.google.com\/maps\/developer-community#github\" target=\"_blank\">GitHub<\/a><\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/developers.google.com\/maps\/developer-community#issue_tracker\" target=\"_blank\">Issue Tracker<\/a><\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/developers.google.com\/maps\/developer-community#stackoverflow\" target=\"_blank\">StackOverflow<\/a><\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/developers.google.com\/maps\/developer-community#twitter\" target=\"_blank\">Twitter<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developers.google.com\/maps\/developer-community#youtube\" target=\"_blank\" rel=\"noreferrer noopener\">YouTube<\/a><\/li>\n<\/ul>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-column stk-block-column stk-block-column--v3 stk-column stk-block-column--v2 stk-block stk-e22b326\" data-block-id=\"e22b326\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-e22b326-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-e22b326-inner-blocks\">\n<p>Leaflet<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/Leaflet\/Leaflet\" target=\"_blank\">GitHub <\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/stackoverflow.com\/questions\/tagged\/leaflet\" target=\"_blank\" rel=\"noreferrer noopener\">StackOverflow<\/a><\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/twitter.com\/LeafletJS\" target=\"_blank\">Twitter<\/a><\/li>\n<\/ul>\n<\/div><\/div><\/div>\n<\/div><\/div>\n<\/div><\/div><\/div>\n<\/div><\/div>\n<\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-columns stk-block-columns stk-block stk-1b40963\" data-block-id=\"1b40963\"><div class=\"stk-row stk-inner-blocks stk-block-content stk-content-align stk-1b40963-column\">\n<div class=\"wp-block-stackable-column stk-block-column stk-block-column--v3 stk-column stk-block-column--v2 stk-block stk-0568113\" data-block-id=\"0568113\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-0568113-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-0568113-inner-blocks\">\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-826ebf4\" id=\"tutorials-and-courses-arc-gis-maps-sdk-for-java-script\" data-block-id=\"826ebf4\"><h4 class=\"stk-block-heading__text has-text-align-center\">Tutorials and courses: ArcGIS Maps SDK for JavaScript:<\/h4><\/div>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-column stk-block-column stk-block-column--v3 stk-column stk-block-column--v2 stk-block stk-b246a1b\" data-block-id=\"b246a1b\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-b246a1b-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-b246a1b-inner-blocks\">\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-d648a30\" id=\"tutorials-and-courses-google-maps-api\" data-block-id=\"d648a30\"><h4 class=\"stk-block-heading__text has-text-align-center\">Tutorials and courses: Google Maps API:<\/h4><\/div>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-column stk-block-column stk-block-column--v3 stk-column stk-block-column--v2 stk-block stk-68852da\" data-block-id=\"68852da\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-68852da-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-68852da-inner-blocks\">\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-99c5e85\" id=\"tutorials-and-courses-leaflet\" data-block-id=\"99c5e85\"><h4 class=\"stk-block-heading__text has-text-align-center\">Tutorials and courses: Leaflet:<\/h4><\/div>\n<\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-columns stk-block-columns stk-block stk-f76590f\" data-block-id=\"f76590f\"><div class=\"stk-row stk-inner-blocks stk-block-content stk-content-align stk-f76590f-column\">\n<div class=\"wp-block-stackable-column stk-block-column stk-block-column--v3 stk-column stk-block-column--v2 stk-block stk-4a9f65b\" data-block-id=\"4a9f65b\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-4a9f65b-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-4a9f65b-inner-blocks\">\n<ul class=\"wp-block-list\">\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.esri.com\/arcgis-blog\/?s=#&amp;products=js-api-arcgis\" target=\"_blank\">ArcGIS Blog \u2013 JavaScript<\/a><\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/get-started\/\" target=\"_blank\">ArcGIS JavaScript API: Guide for Developers<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.udemy.com\/course\/design-web-maps-with-html-js-css-and-\/\" target=\"_blank\" rel=\"noreferrer noopener\">ArcGIS Web Maps with HTML, JS, CSS, and off the shelf tools<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/get-started\/\" target=\"_blank\" rel=\"noreferrer noopener\">Getting Started with ArcGIS API for JavaScript<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.e-education.psu.edu\/geog863\/book\/export\/html\/1703\" target=\"_blank\" rel=\"noreferrer noopener\">Introduction to the ArcGIS Maps SDK for JavaScript<\/a><\/li>\n<\/ul>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-column stk-block-column stk-block-column--v3 stk-column stk-block-column--v2 stk-block stk-81a9609\" data-block-id=\"81a9609\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-81a9609-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-81a9609-inner-blocks\">\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/developers.google.com\/maps\/gmp-get-started\" target=\"_blank\" rel=\"noreferrer noopener\">Google Maps Platform: Getting Started with the APIs<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/www.luciopanasci.it\/Ebooks\/Google%20Maps%20JavaScript%20API%20Cookbook.pdf\" target=\"_blank\" rel=\"noreferrer noopener\">Google Maps JavaScript API Cookbook<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3schools.com\/graphics\/google_maps_intro.asp\" target=\"_blank\" rel=\"noreferrer noopener\">Google Maps Tutorial \u2013 Basic<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.udemy.com\/course\/get-started-with-google-maps-javascript-api-v3\/\" target=\"_blank\" rel=\"noreferrer noopener\">Get Started With Google Maps JavaScript API v3<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/dr.lib.iastate.edu\/server\/api\/core\/bitstreams\/d38c1fd6-6231-4206-a7bb-23de7ff16b07\/content\" target=\"_blank\" rel=\"noreferrer noopener\">Mapping API\u2019s: Google Maps API v3 &#8211; Getting Started<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/dr.lib.iastate.edu\/server\/api\/core\/bitstreams\/fb5ea987-6db2-44f0-af3b-57b61f59306f\/content\" target=\"_blank\" rel=\"noreferrer noopener\">Mapping API\u2019s: Google Maps API v3 &#8211; Adding Markers<\/a><\/li>\n<\/ul>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-column stk-block-column stk-block-column--v3 stk-column stk-block-column--v2 stk-block stk-d57ca8f\" data-block-id=\"d57ca8f\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-d57ca8f-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-d57ca8f-inner-blocks\">\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/github.com\/To-Fujita\/Leaflet.JS_Tutorial\" target=\"_blank\" rel=\"noreferrer noopener\">How to draw maps by using Leaflet.js<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/jebowe3\/Web-Mapping-Intro\" target=\"_blank\" rel=\"noreferrer noopener\">Introduction to Digital Mapping with Leaflet<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/leafletjs.com\/examples\/choropleth\/\" target=\"_blank\" rel=\"noreferrer noopener\">Leaflet &#8211; Adding Interactivity to Your Maps<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/leafletjs.com\/plugins.html\" target=\"_blank\" rel=\"noreferrer noopener\">Leaflet: Creating Custom Plugins for Leaflet<\/a><\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/leafletjs.com\/examples\/quick-start\/\" target=\"_blank\">Leaflet Quick Start Guide<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/core.ac.uk\/download\/pdf\/83023934.pdf\" target=\"_blank\" rel=\"noreferrer noopener\">Mapping API\u2019s: Leaflet &#8211; Introduction to Legends<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/dr.lib.iastate.edu\/server\/api\/core\/bitstreams\/139dbc54-c282-43a9-b91c-336415a93aca\/content\" target=\"_blank\" rel=\"noreferrer noopener\">Mapping API\u2019s: Leaflet &#8211; Adding Google Basemap Layers<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/dr.lib.iastate.edu\/server\/api\/core\/bitstreams\/c3c88ab7-ff0a-4d51-a215-42056c986440\/content\" target=\"_blank\" rel=\"noreferrer noopener\">Mapping API\u2019s: Leaflet &#8211; Circles and Circle Markers<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/dr.lib.iastate.edu\/server\/api\/core\/bitstreams\/fc352ef8-0f37-42fe-a9b7-701ba3d5cd5a\/content\" target=\"_blank\" rel=\"noreferrer noopener\">Mapping API\u2019s: Leaflet &#8211; Creating Polylines and Polygons<\/a><\/li>\n<\/ul>\n<\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-748866e\" id=\"references\" data-block-id=\"748866e\"><h2 class=\"stk-block-heading__text\">References:<\/h2><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>DiBiase, D., MacEachren, A. M., Krygier, J. B., and Reeves, C. (1992). Animation and the Role of Map Design in Scientific Visualization. <em>Cartography and Geographic Information Science 19 (4)<\/em>: 201\u201314, 265\u201366.<\/li>\n\n\n\n<li>Fish, C. (2018). Spatiotemporal Representation.&nbsp;<em>The Geographic Information Science &amp; Technology Body of Knowledge<\/em>&nbsp;(4th Quarter 2018 Edition), John P. Wilson (Ed.). DOI:&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/doi.org\/10.22224\/gistbok\/2018.4.6\" target=\"_blank\">10.22224\/gistbok\/2018.4.6<\/a><\/li>\n\n\n\n<li>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\u2013261.<\/li>\n\n\n\n<li>Peuquet, D. J. (1994). It\u2019s 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\u2013461.<\/li>\n\n\n\n<li>Shaw, S-L. and Ye, X. (2019). Capturing Spatiotemporal Dynamics in Computational Modeling.&nbsp;<em>The Geographic Information Science &amp; Technology Body of Knowledge<\/em>&nbsp;(1st Quarter 2019 Edition), John P. Wilson (Ed). DOI: <a rel=\"noreferrer noopener\" href=\"https:\/\/doi.org\/10.22224\/gistbok\/2019.1.6\" target=\"_blank\">10.22224\/gistbok\/2019.1.6<\/a><\/li>\n\n\n\n<li>Tversky, B., Morrison, J. B., and Betrancourt, M. (2002). Animation: Can It Facilitate? International Journal of Human Computer Studies 57: 247\u201362.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Creating an Animation Map of Earthquakes in Kyrgyzstan using JavaScript Mapping APIs Learning objectives: At the end of the lesson,<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1302,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-2030","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/geopick.cityai.space\/index.php\/wp-json\/wp\/v2\/pages\/2030","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/geopick.cityai.space\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/geopick.cityai.space\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/geopick.cityai.space\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/geopick.cityai.space\/index.php\/wp-json\/wp\/v2\/comments?post=2030"}],"version-history":[{"count":17,"href":"https:\/\/geopick.cityai.space\/index.php\/wp-json\/wp\/v2\/pages\/2030\/revisions"}],"predecessor-version":[{"id":2415,"href":"https:\/\/geopick.cityai.space\/index.php\/wp-json\/wp\/v2\/pages\/2030\/revisions\/2415"}],"up":[{"embeddable":true,"href":"https:\/\/geopick.cityai.space\/index.php\/wp-json\/wp\/v2\/pages\/1302"}],"wp:attachment":[{"href":"https:\/\/geopick.cityai.space\/index.php\/wp-json\/wp\/v2\/media?parent=2030"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}