Learning objectives:
At the end of the section, learners should be able to:
- Understand the differences and similarities between various data representation techniques including graphics, charts, histograms, graticules, legends, overview maps, scale bars, text boxes, and styles for raster and vector data
- Compare the features and capabilities of ArcGIS Maps SDK for JavaScript, Google Maps API, and Leaflet as JS mapping APIs
- Identify and describe cartographic elements such as basemaps, layers, markers, and popups, and understand how to style them using JS mapping APIs
- Explore thematic map representations including choropleth, dot density, proportional symbol, and graduated symbol maps and etc.
Introduction:
This section provides an overview of different data representation techniques and compares the features and capabilities of three popular JS mapping APIs: ArcGIS Maps SDK for JavaScript, Google Maps API, and Leaflet. We will also explore various cartographic elements, styles, and thematic representations used in JS mapping APIs.
Let’s first state the possibilities of the currently available libraries in their latest release (as of January 2023)
Comparison table:
Cartographic Elements and Styling:
We will compare different data representation techniques such as graphics, charts, histograms, graticules, legends, overview maps, scale bars, text boxes, and styles for raster and vector data. This will help learners understand the strengths and weaknesses of each technique and choose the appropriate one for their project. In additional in the table is described various cartographic elements such as basemaps, layers, markers, and popups, and how to style them using JS mapping APIs. This will help learners create visually appealing and informative maps that convey their message effectively.
Here are explanations of the meanings of the colored circles in relation to JS mapping API support:
- Green circle: This means that JS mapping API fully supports or works with a feature. In other words, it’s a “yes”.
- Yellow circle: This symbol indicates that JS mapping API supports or works with a feature, but a plugin may be needed to enable it. So it’s a “yes, but with a plugin”.
- Red circle: This means that JS mapping API does not provide any support for a feature. In other words, it’s a “no”.
Name | ArcGIS Maps SDK for JavaScript | Source | Google Maps JavaScript API | Source | Leaflet | Source |
Cartographic elements | ||||||
Graphic/Charts/Histogram |  | |  | |||
Graticule/Grid | | | | |||
Legend | | | | |||
Overview map | | | | |||
Scale bar | | | | |||
Text box | | | | |||
Styling | ||||||
Style raster | | | | |||
Style vector | | | | |||
Thematic Map Representations:
We will explore various thematic map representations such as choropleth, dot density, proportional symbol, and graduated symbol maps. This will help learners understand how to represent data on a map in a meaningful and accurate way.
Name | ArcGIS Maps SDK for JavaScript | Source | Google Maps JavaScript API | Source | Leaflet | Source | |||
Methods of thematic mapping | |||||||||
Bivariate/Multivariate | | Fully supported |  | Not supported | | Not supported | |||
Cartogram | | Not supported | | Not supported | | Not supported | |||
Choropleth | | Fully supported | | Fully supported | | Fully supported | |||
Cluster | | Fully supported | | Fully supported | | Partially (plug-in exists) | |||
Dot density | | Fully supported | | Partly just simple point | | Blend mapping techniques | |||
Heatmap | | Fully supported | | Fully supported | | Partially (plug-in exists) | |||
Isoline/Surface | | Not supported | | Partly just simple polylines | | Partially (plug-in exists) | |||
Proportional Symbol | | Fully supported | | Fully supported | | Blend mapping techniques | |||
Wurman dots | | Fully supported | | Not supported | | Not supported | |||
Scope and Limitations:
ArcGIS Maps SDK for JavaScript:
Google Maps API
Leaflet
Scope: Offers a wide range of data representation techniques including graphics, charts, histograms, graticules, legends, overview maps, scale bars, text boxes, and styles for raster and vector data. Provides advanced thematic representations such as heatmap, dot density, and clustering. Offers extensive customization options for cartographic elements and styles.
Scope: Offers basic data representation techniques such as markers, polylines, and polygons. Provides simple thematic representations such as heatmap and styled maps. Offers a user-friendly interface and extensive documentation.
Scope: Offers basic data representation techniques such as markers, polylines, and polygons. Provides a range of thematic representations such as choropleth, dot density, and proportional symbol maps. Offers a lightweight and flexible interface that supports various plugins and extensions.
Limitations: Requires a paid subscription for advanced features and functionalities. May have a steeper learning curve for beginners. Limited compatibility with non-Esri data sources.
Limitations: Limited range of data representation techniques and thematic representations. Limited customization options for cartographic elements and styles. Requires a Google Maps API key for usage, which may have a cost.
Limitations: Limited range of data representation techniques compared to other JS mapping APIs. Limited customization options for cartographic elements and styles. May require additional plugins and extensions for advanced functionality.
Overall, the scope and limitations of each JS mapping API for data representation and thematic methods should be considered carefully based on the specific needs and requirements of the project.
Conclusion:
Conclusion: In conclusion, this section provides a comprehensive overview of different data representation techniques, cartographic elements, and thematic map representations used in JS mapping APIs. By understanding the features and capabilities of different JS mapping APIs, learners can create effective and visually appealing maps that convey their message accurately.
References:
- Bucher, B., Buard, E., Jolivet, L., & Ruas, A. (2007). The Need for Web Legend Services. In Web and Wireless Geographical Information Systems, 7th International Symposium, W2GIS 2007, Cardiff, UK, November 28-29, 2007. Proceedings (pp. 37-48). Springer. doi: 10.1007/978-3-540-76925-5_4
- Golebiowska, I., Korycka-Skorupa, J., and Slomska-Przech, K. (2021). Common Thematic Map Types. The Geographic Information Science & Technology Body of Knowledge (2nd Quarter 2021 Edition), John P. Wilson (ed.). doi: 10.22224/gistbok/2021.2.7
- Dykes, J. A. (1997). Exploring spatial data representation with dynamic graphics. Computers & Geosciences, 23(4), 345-370. doi: 10.1016/S0098-3004(97)00009-5
- Nelson, E. (2000). The Impact of Bivariate Symbol Design on Task Performance in a Map Setting. Cartographica, 37(4), 61–78. doi: 10.3138/V743-K505-5510-66Q5
- MacEachren, A. M., & Kraak, M.-J. (1997). Exploratory cartographic visualization: advancing the agenda. Computers & Geosciences, 23(4), 335-343. doi: 10.1016/S0098-3004(97)00018-6
- Roth, R. E., Woodruff, A. W., & Johnson, Z. F. (2010) Value-by-alpha maps: An alternative technique to the cartogram. The Cartographic Journal. 47(2), 130-140.doi: 10.1179/000870409X12488753453372
- Roth, R. E. (2012). Cartographic Interaction Primitives: Framework and Synthesis. The Cartographic Journal, 49(4), 376-395. doi: 10.1179/1743277412Y.0000000019
- Roth, R. E. (2013). Interactive maps: What we know and what we need to know. Journal of Spatial Information Science, (6). doi: 10.5311/JOSIS.2013.6.105
- Roth, R. E., Donohue, R. G., Sack, C. M., Wallace, T. R., & Buckingham, T. M. A. (2014). A Process for Keeping Pace with Evolving Web Mapping Technologies. Cartographic Perspectives, 0(78), 25-52. doi: 10.14714/CP78.1273
- Roth, R. E. (2017). User Interface and User Experience (UI/UX) Design. The Geographic Information Science & Technology Body of Knowledge (2nd Quarter 2017 Edition), John P. Wilson (ed.). doi: 10.22224/gistbok/2017.2.5.