This post assumes that you have basic familarity with web maps and concepts like zoom level. This post is also not fully complete and can use a little bit more editing and polish.

At my workplace, we’re redesigning a landing page of our Ohio Authors Initiative that highlights the lives of over 300 Ohio authors, each with individual biographies (like this one of Amy Braunschweiger).

The Literary Heritage Map by the Pennsylvania Center for the Book is loved by our Literature librarians and I was asked could I do something like that? (well, in the back of my mind, not exactly like that since we don’t have an ESRI license ;)

And yes, I thought a map would be appropriate for this (the first question to ask even before making a map), so we could:

• effectively communicate that Ohio Authors are generally spread geographically all over Ohio; with the Cleveland, Columbus, Cinncinnati, dominating as you’d expect; with college towns like Athens, Yellow Springs, Kent, and Oberlin punching up. The southeastern portion of the state had fewer authors.

• allow readers to browse authors geographically: without knowing of names of cities/towns in Ohio, browse by region, instead of thinking of and searching by each city (what is currently available)

How should I represent the points on the map?

My initial thought, given the contraints in the existing data set:

• There are over 120 unique towns/cities; over 350 authors, all within the State of Ohio

• Each Author has 1 town/city associated with it (determined by our librarians, based on where they lived or grew up) .

For context, each author has their own dedicated ‘page’ and we can assign a city/town with it (In WordPress talk, we have a custom post type, ohio_author, and there is a custom taxonomy named ohio_author_city. Then in the back end, I would geocode that that city and then permanently store the lat/lon for each page, as custom fields, then fetch those custom fields

ow to display the markers in a map that is accessible for all of our patrons so they could geographically browse the locations of Ohio Authors?

Markers and The Marker Cluster

My initial approach that we could build a map and that marker cluster; having build maps in the past, I knew that markers were keyboard accessible (or I thought!).

Markers are the common name for individual points on a web map and are often interactive for the user, often with a openable pop-up window to display further information.

Marker Clusters are points that aggregate more points when you want to want to represent all points at lower zoom levels to the user without overwhelming the user. Marker Clusters are used in the popular web map libaries like Leaflet, google maps, mapbox GL, maplibre, and ESRI although ESRI calls them point clusters.

With a few hundred points over the data of State of Ohio - I instantly thought of marker clustering as the way to represent all of those markers on the map.

The goal with marker clustering, with adding one marker on the map for each author whose city would be geocoded (to the same, centroid point within that city’s boundaries;

I didn’t want to assign a random point within a city’s boundaries for every author, because with that placement, people would think that a particular geographic location (where the singular marker is located) in the city would have meaning to the author

for example, 3 markers within a small town; one is randomly placed within a field, another may be randomly placed in on a street, the map viewer would think maybe the author (of that marker) was associated with);

and a randomly placed marker that is on eastern edge of one city Y and then a randomly placed marker that is on the western maybe very geographically close even though they were for different places.

Screenshot from 2025-12-02 13-50-11.png

• is the hundreds of markers on the map; although these are randomly placed and one for every

My initial approach was to use Google Maps library because our branch location map uses Google maps and we have a lot of existing code behind the scenes, including geocoding, and I’d like to reuse as much as possible.

Before, I fully build out the map, I began to get some proof of concepts down and simpler examples and I wanted to make sure the marker clusters are accessible by keyboard.

Web Accessibility

The goal of web accessibility is to generally make all content and functionality to be accessible, used, by all users; and this includes Keyboard accessibility - ensuring that all functionality and access on a web page can be done through only the keyboard (more details) functionality is a ‘key’ (pun intended) aspect of making a web site accessible and one that I’ll focus in this article.

For the unaware and those following and wish to test out the keyboard accessibility of a map: Tab is the keyboard shortcut to move between interactive elements* (links, buttons, form fields like search text boxes, dropdown selections, etc); then within those interactive elements, arrow keys are used to further navigate. Tab + shift is used to access the previous interactive element. For accessing the markers within the map, when the keyboard focus is on the larger map, that is when you press the arrow keys, as shown below: (There are many, many exceptions to these keyboard shortcuts).

Robert Linder thoroughly reviewed several map libraries’ basic functionality for accessibility although that didn’t include markers and marker clusters or any markers. I hope this blog post provides some useful analysis and recommendations of going forward for marker and marker clusters on web maps.

While most users will use a mouse or their hand to tap and open a marker cluster; we should not assume that all users place the cursor or I cannot assume (no should you as a web developer) that a person will use a mouse to access information.

The Goal with our map, is:

to have markers to show (which places/towns have more authors than others ) on the map, and

Have on each marker, allow the user to open the marker (or markercluster) (through a marker pop-up) to view the list of authors associated with that city.

The thought was to do this was with marker clusters and make 1 marker for each author but on the marker cluster, combine markers and list all of the authors at the lat/lon.

I was imagining something pretty close to:

Map Library Marker Cluster Performance

Google Maps:

tl;dr: Frustrating and inconistent for accessing markers and marker clusters by the keyboard

Marker clustering is not included into the default Google Maps JS library so I forked the google maps’ markercluster library and wanted to get some smaller examples. I modified the examples in the examples directory on google maps’ github

(Most of my examples do not include every marker that would be in my map; I only added 20-35 markers as a test)

So, let’s get an accessible (at least for keyboard accessibility) marker cluster example up and running! Follow along in my github fork.

My first initial examples (as code) and then as a page Here, I couldn’t even access a single marker by keyboard. We have dozens of towns that only have one author associated with that town; so just accessing a single marker is necessary.

BUT I learned by default, markers in google maps do not receive any keyboard focus (cannot be accessed by tab) and that is intentional.

Markers are not tabbable by default according to a June 2021 blog post by google employee Chris Shull. According to Chris, markers that do not have a click event (any action that would happen like a pop-up window) attached to the marker are assigned an “img” accessibility role,” meaning that they are skipped over in most assistive technology and cannot be accessed by a keyboard.

I understand but disagree with google’s perspective: perhaps their rationale was that if there’s no additional information like a pop-up on a marker, why have the focus on the marker? But the markers (or marker clusters) themselves are informational - stating where the particular marker or point is located - and you should want to communicate that information to all of your readers.

(On the other hand, perhaps the map author could state how many markers appear on the map or outside of the map itself. If someone is visually impaired, may they want to know ‘how many markers are appear on the map ? , or where is that marker even placed ?)

I realize OK, I needed to add the property “gmpClickable: true” to the AdvancedMarkerElement so individual markers can accessed by the keyboard. and override the default behavior. I found it odd that markerclusters can be accessed by the keyboard by default, but individual markers are not., for the reasons mentioned above

In my next code commit from 12/25, the individual markers and marker clusters markers were both now focusable by keyboard With my working example.

I then needed to figure out how to create the event listener pop-up for each marker so when the marker was opened (By keyboard, tapping on it, or clicking); the information from the pop-up would eventually display there. I found an example in the google maps’ accessible markers doc. I added the pop-up infoWindow for each marker in this commit. In my eventual map, the pop-up window will contain the list of authors associated with that town/place (more on that later)

(Note to anyone who comes across in search: If you’re using the google’s js-markercluster library and want to share their examples after cloning the repository:

run npm run docs in js-markerclusterer directory that will compile/build your changes that made in the examples folder into the public folder , which you can then upload anywhere on the web * (of course, you have to provide your own google maps API key). This info is missing from the readme and was not obvious to me in the documentation (although I figured out it by deciphering the package.json)

At my next commit, As of Jan 17th commit, but with the markerclustering library, I haven’t figured out. With my working example.

(I’m aware in this commit, even under all conditions, you cannot open the pop-up for the marker clusters, that is because there are multiple markers at the same lat/lon and I restricted the zoom level, leading to my plan)

The Accessibility issues with Google Maps

Keyboard accessibility (can ): madly inconsistent. Some times, I could access (by keyboard) all of the markers and marker clusters; other times, I could only access the marker clusters by keyboard and the individual markers were not accessible. Other times, all but one marker could be accessed by board This was across multiple computers and operating systems (Windows 11, Chrome and firefox) and (Firefox 147 and Chrome on Ubuntu 22.04);

Even if I couldn’t access all of the marker or marker clusters by keyboard, all markers and marker clusters were listed through NVDA and Jaws (a screen reader) through as shown in the screenshot below. Through this although clumisly, someone could move the keyboard focus to the marker cluster BUT they (if I had properly the names of the towns in each marker, instead of a generic hello world). Again, though, someone should be able to access all markers without having to use a screen reader

(NEED SCREENSHOT)

For marker clusters, assistive technology will say “cluster of X markers” (replace X with the number of markers) - . As I mention earlier, adding the geographic context (even a rough location) of the marker cluster would be invaluable;; stating something like “33 markers around Cleveland, Ohio)” like in this example. For someone , they could know which of the marker clusters to browse to; otherwise, they just see as shown in the screenshot.

something like it could inform someone using NVDA or another screenreader (or anyone who has vision have the vision broadly, knowing, This behavior of stating of providing ‘X clusters of markers” is also common to Leaflet as well. (On the other hand, adding the functionality of the marker detecting that extra bit of geographic knowledge, is not simple, although it’s a worthy challenge).

I had the same inconsistent results with the marker clustering example from Google as shown in the following (Very sped-up) image, so I’m not just alone.

View this gif as a slower webm.

Try yourself with the keyboard (Remember, tab to move across each element, tab + shift to go back)

So, where I'm at right now for my project

As of Jan 17th commit, but with the markerclustering library, I haven’t figured out. With my working example.

(I know in this commit, even under all conditions, I cannot open the pop-up for the marker clusters, that is because there are multiple markers at the same lat/lon and restricted the zoom level, leading to my plan)

As I drafted this blog post and encountered that above issue for the I wondered - do i really need to actually cluster the markers ?

My initial proof of concept, I rendered over 300 individual markers, at instead of a - a crucial mistake.

I almost regret that I did spend so much time on the blog post and investigating marker clusters.

I had thought of another approach:

how would it look without the marker clustering ?

Instead, do I not need 1 marker per author? just create one marker per city and style that marker based on the number of authors who are affiliated with that city?

As an alternative: I removed the marker cluster, and have one marker for each city ( commit ) and here’s the this example visual example

Again, this is just my mockup, and hey, i can access each marker at this point by keyboard, I need to access every markers’ contents

• But, I need to visually represent how many authors are at each city (that would be helpful, i think on the map)

My current idea/approach is the following:

Ditch the marker clustering, instead:

create a foreach loop, For each author that comes through (which has properties like, the author’s name, the associated city (as a text field) and the lat/lon pair:

• see if there already a marker created for that lat/lng pair:
  • If no marker for that lat/lng pair,
    • create a marker at tha lat/lng, create a pop-up window with the city/place name, and create a list and insert a link to the author’s biography <li> author nameassociated with that lat/lon pair</li>
  • If a marker already exists at lat/lng pair,
    • find that marker, modify the pop-up-windows contents, and add the <li> author nameassociated with that lat/lon pair</li>
    • increase the numerical value of a variable (authorCount) that I had made within the foreach loop
    • increase the marker’s width based on the AuthorCount and then increase the marker’s width/and or changes the marker’s color based on that AuthorCount)

This would then end up with something like (of course with the marker modified):

rateyourmusic, a cataloging service of music (like letterboxed for music), displays a map of artists whose albums you’ve reviewed (a live link to the map requires you to be registered and logged into their website) and this is pretty darn closer to what I’m imagining although there’ll be (credit to Luke Everhart for suggesting to me rateyourmusic as inspiration)

Other Web map libraries:

(I had briefly experimented with these but I am not including each commit, this article was gitting load and you’ll mapbox and maplibre’s initial results weren’t great. )

Mapbox GL and Maplibre

Mapbox GL and MapLibre Mapbox has 2 approaches to render point geometry as ‘markers’: neither are acceptable for keyboard accessibility and don’t follow

One approach, if you add the points as a map layer:

When the points are added as a map layer, Mapbox and Maplibre.GL’s markers and marker clusters are not keyboard accessible. Regardless whether or not you attach an event or pop-up to the points.

Mapbox’s cluster example rendering earthquakes(data from a 3 week period in 2015-16) and Maplibre’s nearly-identical Marker Clusters example are 2 examples where your points (the geometry) are added as a map layer and

Below is a Maplibre displays elemens in Jaws 2022, on the webpage, just listing the light/dark mode, a search input, a clear, and the map’satrib ; only map attribute is directly associated with the map; the rest are a part of the larger web page.

This violating one of the most basic tenets of accessibility ; not making he map accessible by keyboard.

Ironically, when you click on an individual marker, the keyboard focus does move to the ; so you can close the marker’s info window with the keyboard.

providing access to a user who only has access to a keyboard cannot zoom or browse,

By inspecting the DOM, you’ll notice that the map is rendered in the canvas element Increased speed of , he advantage of is increased speed and some consistent styling

Although canvas is a part of the DOM Tree; canvas accessibility, is well, MDN Kanaru Sato wrote an informative piece in 2024 about the state of accessibility in Canvas and

MDN recommends to not use canvas for accessible elements ;

On that page, press TAB to move the keyboard. You cannot access any marker clusters or individual markers using the keyboard, a violation of and in my project, a dealbreaker.

T<canvas class="mapboxgl-canvas" tabindex="0" aria-label="Map" role="region" width="1570" height="800" style="width: 784.5px; height: 400px;"></canvas>

Another example is this full page react tutorial ; markers are not e

Other Approach in mapbox, rendering points as a Marker (API Doc).

Rendering points as marker resuls in some better accessibility experiences:

In this dynamic markers example from mapbox done in react, markers are attached separately to the DOM but the markers are assigned aria-role of . In this map, the arrow keys are used to navigate the area displayed on the map.

If you don’t attach an event to the marker like a pop-up, you will not be able to they will not be accessible by a keyboard; this includes for

Check out this example where Mapbox custom marker clusters but since there’s no . https://docs.mapbox.com/mapbox-gl-js/guides/add-your-data/markers/#default-markers

Again, even if there’s no pop-up window attached, the marker clusters should be accessible by keyboard!

https://docs.mapbox.com/mapbox-gl-js/example/cluster-html/

Even as markers, they are displayed ; but they are just given, markers are regardless whether or not you include an event notification, they https://docs.mapbox.com/mapbox-gl-js/guides/add-your-data/markers/#default-markers

• the default markers, with no pop-up interaction, like google, they aren’t focusable, don’t announce their location, just exposed

• When you add the ; they’re not much better;

There’s a lot of ; of people asking how to

When this displays in it just renders as “Map Marker” (even if you )

There is a 2nd approach: which does render the clusters in the DOM however, mapbox marks them as role=img, so they cannot be accessed by the keyboard. As a short-term fix, If they had assigned an aria-role as a button, then maybe keyboard only user could open the element, and , just as a user with a mouse can click on the

Single markers can be exposed to the DOM; if you follow this Mapbox Tutorial (More information this github ticket). The clusters are there for

MapLibre

MapLibre, a fork of Mapbox-GL, unsurprisingly suffers same issues as Mapbox-GL.

If you add the geographic data as a map layer, it will be rendered in the canvas and not accessible by the keyboard as shown in

But if you add your data as a marker AND offer additional interaction (like a pop-up), the marker will be added (assigned a role=button )

as shown in this attach a pop-up to a marker maplibre example

the lack of marker accessibility is mentioned in https://github.com/mapbox/mapbox-gl-js/issues/11763 and it was recently resolved in Maplibre (there is the other library, )

Accessing by keyboard was very recently implemented (in January 2026) in MapLibre, v. 5.9.x, in this PR request by https://github.com/maplibre/maplibre-gl-js/pull/6517 by Corado Burcus.

https://github.com/maplibre/maplibre-gl-js/issues/356

But, Mal Wood-Santoro’s a11y-map-gl plugin for MapLibre for is really promising; I’ve yet to experiemnt with i.

Leaflet:

Leaflet will be my next option that I would have thoroughly tried if Google Maps doesn’t work out. This Leaflet Map from the little free library utilizes marker clusters, can be toggled through the keyboard but they cannot be opened by the keyboard.

However, Leaflet’s 2.0 release, a complete re-write. Marker Clustering is a separate extension built into there has been extensive Work by https://kristjanesperanto.github.io/Leaflet.markercluster/example/marker-clustering-accessibility.html where the marker clustering and are accessible by keyboard!

Spidering, an alternative to Marker Clustering:

Spidering is another method that i had thought of as well and tested very early in map-making process but the google maps’ spidering library is no longer maintained and fails basic keyboard accessibility - lead to keyboard traps (being unable to exit the spider marker using only the keyboard). I could fork it (and some updates have been proposed ) and rewriting but my time is limited.
I’d probably rather use Leaflet than spend the time updating a google maps library.

Secondly, I don’t think spidering would be as aesthetically clear for the user either.

Summary

Maps traditionally have been a visual medium and implemented as such. (hot take:) But we have to turn that assumption on its head and remember what are maps’ purpose: communicating spatial information to its users. Most online web maps still focus on the visual aspect of communicating that information and using the mouse the to do so.

There’s a lot of improvement for making maps with markers and marker clusters more accessible: some more immediate steps for map libraries to consider implementing

• include a rough location of marker cluster in its aria-label.
• include an inpu searchbox where a user could enter a text term of the geographic area that they want to search, which is then geocoded and moves them to the marker as a supplement to have to tab and move through what could be tens of marker clusters. (this could be done )
• consistent marker tabbing on google maps

Long term: I think there might be a more re-imagining of what the accessible web map will be.

I hope that this post moved the ball a little forward and I found Audiom although is promising although its source isn’t publicly available (but based on and requires you to contact them.

This post was largely drafted in May 2020 but the practice and point still remains. I’m making more of an effort to share my past work. I have quite a few posts that I’ve left in draft for whatever reason.

James Fee’s tweet (now since deleted in 2025 when I’m publishing this) along with Mapbox’s recent announcement of deprecating loading maps made in Mapbox Studio classic, reminded me that the ‘life span’ of online web maps are relatively short, sometimes 2-3 years. How do you view or remember them when software breaks, the hosting bill is no longer paid, your employer decides to just cancel the project, or the company hosting it goes out of business?

I didn’t to lose the work that I’ve done over the years; I wanted to be able to save and view them later so here’s what I’ve been doing.

1. Decide and prioritize what you want to save Obvious needs to be said, but you can’t save everything. One of my largest misconceptions of public libraries before I started working at one is that they archive and save so much everything: they save and preserve a lot less than you think. Libraries decided what ou. (particularly if it Deciding what to save and document is part of their process. With online maps, you won’t be able to save every view, every map interaction , every zoom level.

1a. For online maps that may be large and you can’t capture the entire area: what geographic areas hold personal sentimental value to you? were unique or noteworthy? Any geographic areas on the map or map interactions that really showed off your work and effort ?

1. For Raster Maps (before vector tiles were widely used), the-ultimate-tile-stitcher, a python script made by Stamen, that enables you to download each of the png raster tiles and then stitches them together as one very large png image.

the-ultimate-tile-stitcher worked excellent to fetch several maps I made in Mapbox Studio Classic. These maps didn’t have any interaction, markers, pop-ups, on them; these were base maps; the-ultimate-tile-stitcher works best on base maps. the-ultimate-tile-stitcher only works on raster tiles (X/Y/PNG) which is what mapbox was getting rid of in 2020 (2025 edit: that long ago ?!).

1. If your map is a vector map (or is web-gl like Mapzen’s Tangram maps): Make a screen recording while viewing the map and map interactions; zooming in and out at multiple zoom levels, and whatever you want to capture. Making the screen recording while you view your map works across any mapping library and software that you use.

2. don’t forget to add a couple sentences about the project; include the project docs and your build setup. you may forget a few years from now ;)

Long time no talk. (Note: this post will be further edited for grammar and clarity)

Currently, Cleveland has 17 members of Cleveland City Council, councilmen, that each represent a designated geographic area known as a ward.

Because of City Rules and city’s declining population, the ward boundaries are being redrawn in a relatively opaque process.

Before the proposed boundaries are released, I wanted to try drawing my own, so here is how I did that, and what I learned in the process.

Why redraw the boundaries?

The City Charter requires the number of councilmen to depend on the city’s population taken during the Census every 10 years.

The guidelines are specified in Chapter 5 of the City’s Charter sections 25 and 25.1, both of which state:

“The wards so formed shall be as nearly equal in population as may be fair and equitable, composed of contiguous and compact territory, and bounded by natural boundaries or street lines” Section 25.1, which deals specifically with the reapportionment, redrawing of the ward boundaries, omits be fair and equitable portion.

A May 2024 Press Release from Cleveland City Council mentions census tracks (sic) , reviews and compiling and analyzing GIS data” but there are no other public mention of criteria that are used. The city did hold public meetings in October.

They are being redrawn for the 2025 election. The 2020 Census results on a city-wide level were released in August 2021, only three months before the last city election; which was not enough time to make new ward boundaries for that election. That said, I wonder why the city waited until 2024 to redraw the ward boundaries.

My goals for making my own proposed boundaries:

• I found the existing ward boundaries last made in 2013 to not be very compact nor bounded by natural boundaries.

• I wondered how difficult it could be to make a new boundaries that had be more cohesive to align with neighborhood boundaries.

• Learn more about the process.

How I did it:

Dave’s Redistricting is free software to create redistricting maps in the USA and was extremely useful for my drawing of the new ward boundaries. As you create a map with in Dave Redisricting, the population for each political subdivison is automatically calculates the population.

(insert the screenshot displaying the interface, where you quickly view the population of each current section; draw an area by particular census tracks or census blocks.

With that in mind, I hadn’t looked at the existing boundaries before drawing new boundaries and I started from a blank canvas; I did not modify the existing ward boundaries.

I don’t know if there’s any rule prohibiting their use to draw the ward boundaries but I used census blocks to give more me flexibility. Then I drew.

For boundaries: where possible, I used freeways (just south of the Opportunity Corridor I-71, the innerbelt, i-90), natural features like Doan Brook, the gap between east 67th and Marion Motley Park which formally was Kingsbury Run and the Sidaway Bridge , the lowlying area (where the zoo and Big Creek are located) and changes in landuse, railways. I didn’t realize until finishing it that my proposed boundaries for Slife and Kazy were extremely similar to their existing wards; population in that area changed very little between 2010 and 2020.

What I learned from this:

The councilpeople whose wards will be eliminted will likely fall onto councilpeople whose wards are towards the center of the city. This is because ward boundaries ; so you have more flexibility in the center

More importantly, the populations of each ward are extremely similar: I made a couple drafts of the map and compared it to the 2013 ward boundaries. I noticed the each ward’s population in the 2013/2014 ward boundaries were extremely close to each other. Each ward’s population in the 2013 map ranged from 22,240 (Ward 4) to 24,509 (ward 13); all wards’ populations were within 5% of 23,342 which is the average of (2010 Census for the city of Clevelandwas 396,815; divided by 17 (wards). (Ward population data is from NeoCando at CWRU)

Thus, I need to go back to the drawing board.

Now knowing that Cleveland City Council would likely only pass (into law) a set of ward boundaries whose ward populations were within 5% of the average population of a ward, I made another version of the map, what you see here. The city of Cleveland’s population according to the 2020 Census was 372,624. Divide that by 15 wards, averages to 24,841 and if we want all wards to be within 5% of that average, each ward’s population must fall between roughly 23,600 and 26,000.

As noted by Nick Castele in this Signal Cleveland piece, the majority of the city’s population loss between the 2010 and 2020 Census was on the East side, ( The City Planning Department has several maps highlighting the population change in Statistical Planning Areas (SPA) like 6,000 less people in the Glenville SPA). Because each ward’s population needs to be very similar (in this case between 23,600 and 26,000) you’ll need to cover more land compared to the previous ward boundaries to reach the desired ward’s population, consequently leading to larger boundaries and on the East side and create the perception on the East Side that will lose representation.

---

View my proposed Ward Boundaries for 2024 on a map

---