Skip to main content
SpringerLink
Log in

Rethinking the Usage and Experience of Clustering in Web Mapping

  • Conference paper
  • First Online:
Human Interface and the Management of Information. Designing Information (HCII 2020)

Part of the book series: Lecture Notes in Computer Science ((LNISA,volume 12184))

Included in the following conference series:

  • 1457 Accesses

Abstract

Although the notion of ‘too many markers’ have been mentioned in several research, in practice, displaying hundreds of Points of Interests (POI) on a web map in two dimensions with an acceptable usability remains a real challenge nowadays. Web practitioners often make excessive use of clustering aggregation to overcome performance bottlenecks without effectively resolving issues of perceived performance. This paper tries to bring a broad awareness by identifying a sample of experience issues which describe a general reality of clustering, and provide a pragmatic survey of potential technologies optimisations. At the end, we discuss the usage of technologies and the lack of documented client-server workflows, along with the need to enlarge our vision of the various clutter reduction methods.

This is a preview of subscription content, log in via an institution to check access.

Access this chapter

Log in via an institution
Chapter
USD 29.95
Price excludes VAT (USA)
  • Available as PDF
  • Read on any device
  • Instant download
  • Own it forever
eBook
USD 39.99
Price excludes VAT (USA)
  • Available as EPUB and PDF
  • Read on any device
  • Instant download
  • Own it forever
Softcover Book
USD 54.99
Price excludes VAT (USA)
  • Compact, lightweight edition
  • Dispatched in 3 to 5 business days
  • Free shipping worldwide - see info

Tax calculation will be finalised at checkout

Purchases are for personal use only

Institutional subscriptions

References

  1. Adam, P.: Pre-clustering Google Maps Markers using KMeans in Django, September 2017. https://medium.com/@padam0/pre-clustering-google-maps-markers-using-kmeans-in-django-aeabc6eb2c0b

  2. Agafonkin, V.: Leaflet, WebGL and the Future of Web Mapping, March 2015. https://www.youtube.com/watch?v=lj4SS1NTqyY

  3. Agafonkin, V.: Clustering millions of points on a map with Supercluster, March 2016. https://blog.mapbox.com/clustering-millions-of-points-on-a-map-with-supercluster-272046ec5c97

  4. Agafonkin, V.: A dive into spatial search algorithms, April 2017. https://blog.mapbox.com/a-dive-into-spatial-search-algorithms-ebd0c5e39d2a

  5. Agafonkin, V.: Client-side clustering or server-side clustering \(\cdot \) Issue 91 \(\cdot \) mapbox/supercluster, July 2018. https://github.com/mapbox/supercluster/issues/91

  6. Alstad, K.: New Findings: State of the Union for Ecommerce Page Speed and Web Performance [Spring 2015], April 2015. https://blog.radware.com/applicationdelivery/wpo/2015/04/new-findings-state-union-ecommerce-page-speed-web-performance-spring-2015/

  7. Andrews, K., Wright, B.: FluidDiagrams: web-based information visualisation using JavaScript and WebGL. In: EuroVis - Short Papers. The Eurographics Association (2014). https://doi.org/10.2312/eurovisshort.20141155

  8. Bernstein, M.: 5 Reasons to Use Protocol Buffers Instead of JSON For Your Next Service, June 2014. https://codeclimate.com/blog/choose-protocol-buffers/

  9. Burigat, S., Chittaro, L.: Decluttering of icons based on aggregation in mobile maps. In: Meng, L., Zipf, A., Winter, S. (eds.) Map-Based Mobile Services. LNGC, pp. 13–32. Springer, Heidelberg (2008). https://doi.org/10.1007/978-3-540-37110-6_2

    Chapter  Google Scholar 

  10. Chakraborty, S., Nagwani, N.K., Dey, L.: Performance Comparison of Incremental K-means and Incremental DBSCAN Algorithms, June 2014. arXiv:1406.4751 [cs]

  11. Corbacho, D.: Debouncing and Throttling Explained Through Examples, April 2016. https://css-tricks.com/debouncing-throttling-explained-examples/

  12. Dabernig, J.: Geocluster: Server-sideclustering for mapping in Drupal based on Geohash. Master’s thesis, Fakultät für Informatik der Technischen Universität Wien, Vienna, June 2013. http://dasjo.at/files/geocluster-thesis-dabernig.pdf

  13. Delort, J.: Vizualizing large spatial datasets in interactive maps. In: 2010 Second International Conference on Advanced Geographic Information Systems, Applications, and Services, pp. 33–38, February 2010. https://doi.org/10.1109/GEOProcessing.2010.13

  14. Developers, G.: Uses an Excessive DOM Size, May 2019. https://developers.google.com/web/tools/lighthouse/audits/dom-size

  15. Eriksson, O., Rydkvist, E.: An in-depth analysis of dynamically rendered vector-based maps with WebGL using Mapbox GL JS. Master’s thesis, Linköping University, August 2015. http://urn.kb.se/resolve?urn=urn:nbn:se:liu:diva-121073

  16. Gechev, M., Osmani, A., Hempenius, K., Mathews, K.: Guess.js. https://guess-js.github.io/docs

  17. Gibbs, S.: Google Maps: a decade of transforming the mapping landscape. The Guardian, February 2015. https://www.theguardian.com/technology/2015/feb/08/google-maps-10-anniversary-iphone-android-street-view

  18. Harris, R.: Virtual DOM is pure overhead, December 2018. https://svelte.dev/blog/virtual-dom-is-pure-overhead

  19. Harvey, A., Brown, T., Vakil, A.S., Wood-Santoro, M.: mapbox-gl-accessibility - an accessibility control for Mapbox GL JS, May 2019. https://github.com/mapbox/mapbox-gl-accessibility, original-date: 2017–11-16T14:34:49Z

  20. Heikkinen, I.: Taking advantage of GPU acceleration in the 2D canvas—Web, July 2012. https://developers.google.com/web/updates/2012/07/Taking-advantage-of-GPU-acceleration-in-the-2D-canvas?hl=fr

  21. Here: Ordering Overlapping Markers - Maps API for JavaScript. https://developer.here.com/api-explorer/maps-js/markers/ordering-overlapping-markers

  22. Horak, T., Kister, U., Dachselt, R.: Comparing rendering performance of common web technologies for large graphs. In: Poster Program of the 2018 IEEE VIS Conference, VIS, vol. 18 (2018). https://imld.de/cnt/uploads/Horak-2018-Graph-Performance.pdf

  23. Huang, H., Gartner, G.: A technical survey on decluttering of icons in online map-based mashups. In: Peterson, M. (ed.) Online Maps with APIs and WebServices. LNGC, pp. 157–175. Springer, Heidelberg (2012). https://doi.org/10.1007/978-3-642-27485-5_11

    Chapter  Google Scholar 

  24. Karambelkar, B.V.: Canvas renderer? \(\cdot \) Issue #463 \(\cdot \) rstudio/leaflet, September 2017. https://github.com/rstudio/leaflet/issues/463#issuecomment-329014257

  25. Korpi, J., Ahonen-Rainio, P.: Clutter reduction methods for point symbols in map mashups. Cartogr. J. 50(3), 257–265 (2013). https://doi.org/10.1179/1743277413Y.0000000065

    Article  Google Scholar 

  26. Krebs, B.: Beating JSON performance with Protobuf, January 2017. https://auth0.com/blog/beating-json-performance-with-protobuf/

  27. Larsgȧrd, N.: Comparing sizes of protobuf vs json, April 2017. https://nilsmagnus.github.io/post/proto-json-sizes/

  28. Lee, A.: Drawing 2D charts with WebGL, May 2019. https://blog.scottlogic.com/2019/05/28/drawing-2d-charts-with-webgl.html

  29. Mahe, L., Broadfoot, C.: Too Many Markers! - Google Maps API - Google Developers, December 2010. https://web.archive.org/web/20121113185947/. https://developers.google.com/maps/articles/toomanymarkers

  30. Mapbox: Create and style clusters (2020). https://www.mapbox.com/mapbox-gl-js/example/cluster/

  31. Maxfield, M.: WebGPU and WSL in Safari, September 2019. https://webkit.org/blog/9528/webgpu-and-wsl-in-safari/

  32. McConnell, J.: WebAssembly support now shipping in all major browsers, November 2017. https://blog.mozilla.org/blog/2017/11/13/webassembly-in-browsers

  33. Meert, W., Tronçon, R., Janssens, G.: Clustering Maps. Master’s thesis, Katholieke Universiteit Leuven, Leuven (2006). http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.132.6977&rep=rep1&type=pdf

  34. Meier, S.: The marker cluster: a critical analysis and a new approach to a common web-based cartographic interface pattern. Int. J. Agric. Environ. Inf. Syst. (IJAEIS) 7(1), 28–43 (2016). https://doi.org/10.4018/IJAEIS.2016010102

    Article  Google Scholar 

  35. Mikkolainen, T.: Canvas filled three ways: JS, WebAssembly and WebGL, December 2018. https://compile.fi/canvas-filled-three-ways-js-webassembly-and-webgl/

  36. Nebel, P.: Dynamic Server-Side Clustering for Large Datasets, January 2018. https://geovation.github.io/dynamic-server-side-geo-clustering

  37. Nemeth, A.: “How do I do clustering on a map correctly” is a common question in mapping applications, March 2015. https://ux.stackexchange.com/a/75190/116603

  38. Network, M.D.: Hit regions and accessibility. https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility

  39. Ninomiya, K.: Webinar Recap: WebGL 2.0, What You Need to Know, May 2017. https://www.khronos.org/blog/webinar-recap-webgl-2.0-what-you-need-to-know

  40. Ortelli, G.: Server-side clustering of geo-points on a map using Elasticsearch, August 2013. https://blog.trifork.com/2013/08/01/server-side-clustering-of-geo-points-on-a-map-using-elasticsearch/

  41. Osmani, A.: Speed is now a landing page factor for Google Search and Ads!, July 2018. https://twitter.com/addyosmani/status/1022005088058073088

  42. Paul, E.: Case Study: Large-Scale, Server Side Mapping with the Leaflet-Geocluster Stack, June 2015. http://2015.tcdrupal.org/session/case-study-large-scale-server-side-mapping-leaflet-geocluster-stack

  43. Poskanzer, J.: Clusterer.js - marker clustering routines for Google Maps apps (2005). http://www.acme.com/javascript/Clusterer2.js

  44. Rezaei, M., Fränti, P.: Real-time clustering of large geo-referenced data for visualizing on map. Adv. Electr. Comput. Eng. 18, 63–74 (2018). https://doi.org/10.4316/AECE.2018.04008

    Article  Google Scholar 

  45. Sandvik, B.: How to minify GeoJSON files?, November 2012. http://blog.mastermaps.com/2012/11/how-to-minify-geojson-files.html

  46. Sitnik, A.: Faster WebGL/Three.js 3D graphics with OffscreenCanvas and Web Workers, April 2019. https://evilmartians.com/chronicles/faster-webgl-three-js-3d-graphics-with-offscreencanvas-and-web-workers

  47. Svennerberg, G.: Handling Large Amounts of Markers in Google Maps - In usability we trust, May 2009. http://www.svennerberg.com/2009/01/handling-large-amounts-of-markers-in-google-maps/

  48. Teller, S.: Building an interactive DOM benchmark, preliminary results, February 2018. https://swizec.com/blog/building-interactive-dom-benchmark-preliminary-results/swizec/8219

  49. Tihonov, I.: Speed up web maps - minify geojson, November 2014. http://igortihonov.com/2014/11/12/speedup-web-maps-minify-geojson/

  50. Urbica: Visualising large spatiotemporal data in web applications, July 2018. https://medium.com/@Urbica.co/visualising-large-spatiotemporal-data-in-web-applications-8583cf21907

  51. Wagner, J., Osmani, A.: Reduce JavaScript Payloads with Code Splitting—Web Fundamentals, May 2019. https://developers.google.com/web/fundamentals/performance/optimizing-javascript/code-splitting/

  52. Wallez, C., Cabello, R.: Next-Generation 3D Graphics on the Web (Google I/O 2019), May 2019. https://www.youtube.com/watch?v=K2JzIUIHIhc

  53. Weissflog, A.: Thoughts about a WebGL-Next, August 2016. https://floooh.github.io/2016/08/13/webgl-next.html

  54. Wen, T.: Is Protobuf 5x Faster Than JSON?, April 2017. https://dzone.com/articles/is-protobuf-5x-faster-than-json-part-ii

  55. yWorks: SVG, Canvas, WebGL? Visualization options for the web, March 2018. https://www.yworks.com/blog/svg-canvas-webgl

Download references

Acknowledgments

The present thesis was written as a part of the Certificate of Advanced Studies in Interaction Science and Technology (CAS) organised by the Human-Centered Interaction Science and Technology Institute (Human-IST) of the University of Fribourg.

Author information

Authors and Affiliations

  1. School of Management and Engineering Vaud (HEIG-VD), Media Engineering Institute (MEI), University of Applied Sciences Western Switzerland (HES-SO), Yverdon-les-Bains, Switzerland

    Loïc Fürhoff

Authors
  1. Loïc Fürhoff
    View author publications

    You can also search for this author in PubMed Google Scholar

Corresponding author

Correspondence to Loïc Fürhoff .

Editor information

Editors and Affiliations

  1. Tokyo University of Science, Tokyo, Japan

    Sakae Yamamoto

  2. Tokyo City University, Tokyo, Japan

    Hirohiko Mori

Rights and permissions

Reprints and permissions

Copyright information

© 2020 Springer Nature Switzerland AG

About this paper

Check for updates. Verify currency and authenticity via CrossMark

Cite this paper

Fürhoff, L. (2020). Rethinking the Usage and Experience of Clustering in Web Mapping. In: Yamamoto, S., Mori, H. (eds) Human Interface and the Management of Information. Designing Information. HCII 2020. Lecture Notes in Computer Science(), vol 12184. Springer, Cham. https://doi.org/10.1007/978-3-030-50020-7_1

Download citation

  • DOI: https://doi.org/10.1007/978-3-030-50020-7_1

  • Published:

  • Publisher Name: Springer, Cham

  • Print ISBN: 978-3-030-50019-1

  • Online ISBN: 978-3-030-50020-7

  • eBook Packages: Computer ScienceComputer Science (R0)

Publish with us

Policies and ethics

Search

Navigation