Building Custom Form Selection Boxes – Working on Accessibility / / No Comments Whenever I find myself needing to update a previous blog post, I either correct it inline and add a small note on top, for small tweaks, or write a whole new piece for larger changes. My last blog post talked about how to use CSS to style a "block" such that it acted like a form radio button. When I worked on that demo, I was a bit worried about accessibility. I did one quick check with an online tool, and thought I was ok. I was not. When I shared my post on LinkedIn, Kevin Bonett shared this feedback with me: I would argue that, despite using correct semantic HTML, the “custom” radio buttons are inaccessible. If you’re a sighted keyboard user, how will you know... more → Posted in: JavaScript Tagged with: accessibility, Boxes, building, custom, form, Selection, working
Building Custom Form Selection Blocks – no JS, all CSS / / No Comments I apologize for what may be a slightly misleading title. The topic for this post is something I’ve had on my list of things to explore for some time now, and while I wait for the new job to start, I’ve found myself with time to kill. Let me explain what I’m talking about and hopefully it will make a bit more sense. You are, dear reader, familiar with form controls and how to build forms both big and small. One type of user interface I’ve seen from time to time is the ability to select an item where the "item" is an arbitrary block of code. What do I mean by that? Typically a choice element in a form is either a select, checkbox, or radio set. But I’ve seen... more → Posted in: JavaScript Tagged with: Blocks, building, custom, form, Selection
Drawing Custom Population Polygons / / No Comments Tom Forth’s Population around a Point is one of those wonderfully simple map tools that instantly invites exploration. Click anywhere on the map, choose a radius, and it estimates how many people live within that circle. Under the hood, it uses the Global Human Settlement Layer (GHSL) population grid for 2024, querying population points stored in a massive SQLite database.Now Maps Mania… more → Posted in: Interactive Maps Tagged with: custom, Drawing, Polygons, Population
Custom Markers with Leaflet / / No Comments As I continue to dig into Leaflet, I was recently asked about custom markers based on data, so for example, some locations for a store may use one icon while others use another. I did some digging, and while it turns out Leaflet has deep support for customizing markers, it does take a little bit of work. Here’s what I found. First off, this is the default marker: Out of the box, this is it. Period. I can appreciate the library wanting to keep its size to a minimum, but I was a bit surprised. That being said, the library provides really flexible support for creating your own markers. The first thing I found was the tutorial, Markers With Custom Icons. In this tutorial, they describe the... more → Posted in: JavaScript Tagged with: custom, Leaflet, Markers