Using Google Static Maps in Your Print View / / No Comments This is just a quick thought experiment really. Yesterday I was working on a demo that made use of Google’s Static Map API. I’ve blogged about this API for probably over a decade now and I rarely see people use it, but it’s a lightweight, image only "API" for when you need simple map images without interactivity. Honestly, I see a lot of sites using the full JavaScript maps library when a simpler image would be fine. It’s also an excellent way to use maps in presentations or emails as well. It occurred to me that the static map image could be a great way use of print media queries in CSS and I thought I’d build a quick demo to show this. Media queries and... more → Posted in: JavaScript Tagged with: Google, maps, print, Static, using, View
Time Traveling with Street View / / No Comments Have you ever wondered what your neighborhood looked like in the 18th century—or even during the Middle Ages? Thanks to Street View and AI, you can now almost find out. TimeJourneyAI is a new application that lets you pick a location in Street View and generate an AI-imagined version of that same spot for any year in history.Liberty 2025rom my limited testing, the historical views Maps Mania… more → Posted in: Interactive Maps Tagged with: Street, time, Traveling, View
JavaScript SpeechSynthesis API / / No Comments As the web continues to be the medium for all users, standards bodies need to continue to provide new APIs to enrich user experience and accessibility. One underused API for unsighted users is speechSynthesis, an API to programmatically direct the browser to audibly speak any arbitrary string. The Code You can direct the browser to utter speech with window.speechSynthesis and SpeechSynthesisUtterance: window.speechSynthesis.speak( new SpeechSynthesisUtterance('Hey Jude!') ) speechSynthesis.speak will robotically tell the user anything you provide as a SpeechSynthesisUtterance string. Support for this API is available in all modern browsers. I wouldn’t consider speechSynthesis as... more → Posted in: JavaScript Tagged with: JavaScript, SpeechSynthesis
Make Your Own Ridgeline Plots / / No Comments Joyplot Map Today’s #30DayMapChallenge is to use a New Tool (create your map using a software, language, library, or technique you have never used before). For this challenge I decided to build something using Terrain RGB.My Joyplot Map is an interactive map that turns elevation data into ridgeline plots – right in your browser.This map lets you draw a rectangle anywhere on the globe and view Maps Mania… more → Posted in: Interactive Maps Tagged with: plots, Ridgeline
Fix “This video format is not supported” on YouTube TV / / No Comments Setting up a new computer is bliss — no old, unused apps and the machine performs much better than the previous. Unfortunately, you may encounter new problems based on the new hardware. One such issue I encountered with my new MacBook was a “This video format is not supported” message when I went to YouTube TV. Not being able to watch my favorite live show is a real problem. After a bit of research, I found the solution to the “This video format is not supported” error message. To solve this problem: Open your browser settings and do a search for DRM You should see reference to Widevine, a form of DRM Enable this Widevine setting Restart your web browser Enabling... more → Posted in: JavaScript Tagged with: format, supported”, this, video, YouTube
There Are No Roads in London / / No Comments Streets of London Today’s #30DayMapChallenge is to use OpenStreetMap (OSM) data as your primary source.To meet this challenge I decided to use OpenStreetMap data to explore the toponyms of London’s streets, visualizing how different road types – Streets, Lanes, Alleys, Courts, Yards, and Avenues – are named and distributed across the City of London.One of my favourite quiz questions is – ‘How Maps Mania… more → Posted in: Interactive Maps Tagged with: London, roads, there
A Minimal Flight Tracking Map / / No Comments Minimal London Day 11 of the #30DayMapChalenge is to create a Minimal Map. For this task my Minimal London flight-tracking map strips away everything but the essentials – a bold black canvas, a clean blue river, crisp white bridges, and the silent drift of planes crossing the city in real-time.🗺 What the Map ShowsAt its heart, the map visualizes:The River Thames, rendered as a smooth, blue line Maps Mania… more → Posted in: Interactive Maps Tagged with: flight, Minimal, Tracking
Road Orientations Map / / No Comments Road Orientations Map The topic for day 8 of the #30DayMapChallenge is Urban. For this challenge I decided to go old-school and convert Vladimir Agafonkin’s original Road Orientations from Mapbox to Maplibre. The original code analyzes street orientations and visualizes them as a polar histogram. I’ve just adapted Vladimir’s approach to work with MapLibre GL JS.What the Map ShowsThe Maps Mania… more → Posted in: Interactive Maps Tagged with: Orientations, road