The 12 Best Daily Map Games

Ever since Josh Wardle released his very popular daily Wordle game in 2022 there has been a plethora of daily geography challenges which have been unleashed upon us, the geographically challenged public. The latest of these is Unzoomed.

Every day Unzoomed presents you with the satellite image of a random city, which could be located anywhere in the world. All you have to do is name the city. You have six chances to name the correct city. If you give a wrong answer the map zooms out a little, revealing more of the surrounding area. After each incorrect guess you are also informed how far away your guess was from the correct location.

Oison Carroll's Travle is another fun daily map puzzle. This one requires players to travel between two different countries on an interactive map in the least possible moves. 

Every day Travle publishes a new map, which is blank except for two highlighted countries. All you have to do is journey from one of the highlighted countries to the other by typing in the names of the countries you could travel through to complete the journey. The object of the game is to complete this journey using the least possible number of guesses.

If you find your craving for Travle is not being met by the daily challenge you can also play unlimited games in the Travle Practice Mode. In Practice Mode you can even choose to play regional versions of the game set in different countries around the world (for example in the USA you are required to journey between two different states).

Worldle is a daily Street View challenge which requires you to identify the location displayed in a Google Maps Street View image. Each day you are shown a different Street View scene that you need to locate on an interactive Google Map.

Fans of GeoGuessr will be familiar with the game-play involved in Worldle. Using the Street View controls you need to navigate around your immediate neighborhood exploring landmarks, buildings, road signs, and other clues in order to identify where in the world you are. When you think you know the correct location you simply need to enter your answer by clicking on the interactive map.

After each of your guesses a circle is placed on the map to help you narrow down your search. You have six attempts to get within 100 meters of the correct location.
 

Can you name the four countries which border Greece? If you can then you should head straight over to Neighborle.

Each day on Neighborle you are shown a different country on an interactive map. Your daily challenge is to name all the countries which border that day's highlighted country. Every time you name a correct bordering country it will be shown in green on the map. If you enter an incorrect country then that country will be colored grey on the map. You are allowed to make five incorrect answers every day. Once you have made five incorrect answers you aren't allowed any more guesses.

Don't worry if you can't name Greece's four immediate neighbors there will be a new challenge tomorrow. A challenge centered on a completely different country.

The Pudding has released a daily geography guessing game. Every day The Pudding publishes a geotagged photograph from Wikimedia. Your task is to guess where in the United States the photograph was taken.

Where in the USA is this? is similar to the popular GeoGuessr Street View guessing game in that you have to try to determine a location based on the visual clues in an image. However where Geoguessr allows you to explore a location on Street View 'Where in the USA is this' restricts you to just five static images. 

To guess the location of the first image shown you just need to click the location on the provided map. You are then told how many miles from the correct location your guess is and shown a second photo. There are five photos in total and you get five attempts to guess the correct location.

Like the popular Wordle game there is a new round of 'Where in the USA is this' every day.

 

The pace of new Wordle inspired map and geography games shows no signs of abating. Worldle is one of the most popular daily geography challenges. This game requires you to name a country from just its map outline. Like the original Wordle game you have six goes in which to find the right answer. And, like Wordle, there is only one game to play every day.

Where Worldle differs a lot from Wordle is in the clues given after each answer. Instead of green and yellow squares Worldle uses arrows and percentages to help you get to the correct answer from your incorrect guesses. After each guess, you are told the distance you were from the correct country, the direction you need to move on a map and the proximity of your guess to the target country. With just these clues it should be possible to work out the correct answer within the permitted six guesses (particularly if like me you cheat and use a world map).

EOGuesser is another daily geography challenge which is obviously inspired in part by the now famous word game.

The objective of EOGuessser is to guess the correct location shown in a satellite image. You have three attempts to guess the correct location. The closer you get to the correct location the more points you win. After each guess you are told if you are in the correct hemisphere and in the correct quadrant of the world map. You are also told how far away you have guessed from the correct location. 

A new location is available every day! Each satellite image is chosen from EOX's Sentinel-2 Cloudless Satellite Map of the world.

Wheredle is another fun daily geography game. This one requires you to identify a location based on its Google Street View image.

The goal of Wheredle is to identify a new U.S. state every day from a random image taken from Google Maps Street View. Fans of GeoGuessr will be familiar with the basic concept of Wheredle. Using contextual clues, such as street signs, landmarks and the natural terrain, you need to guess in which state the displayed Street View was captured by Google. 

If you enjoy Wordle and can't be bothered to wait 24 hours for a new game then you should try playing the popular GeoGuessr Street View game. 

Countyle is another fun Wordle inspired geography guessing game. The object in this game is to identify the mystery country in the fewest number of attempts. After each incorrect guess in Countryle you are given a number of clues based on your answer. 

The first clue tells you if your guess is in the correct or hemisphere. The second clue tells you if you are on the correct continent. The third clue tells you if the country you guessed is hotter or colder than the correct country. The next clue informs you as to whether the correct country has a larger or smaller population than your guess. The final clue uses an arrow to show in which direction you need to move on a map to reach the correct country. 

There is a new country to guess every day.

Globle is another daily geography challenge which requires you to guess a designated country of the world. Each time that you guess a country it is colored in on a globe to show how close you are to today's country. The deeper the shade of red then the hotter (or closer) you are to guessing the correct country.

Every day there is a new mystery country for you to guess. Your aim every day is to guess the mystery country using the fewest number of guesses. 

Wardleis a clone of Wordle which requires you to name the UK local authority area from its map outline. To aid you in your quest after each guess, you are told the distance you need to travel to reach the correct ward, the direction you need to travel and the proximity from your guess to the target area. This game should come with a warning for non-UK players, as you really need a very detailed knowledge of UK geography to win this game.

Using AI to Detect Oil Spills

SkyTruth's Cerulean is a global monitoring system which uses AI to detect oil slick pollution in satellite imagery. It also identifies nearby vessels which might have been responsible for the pollution. The Cerulean interactive map identifies the locations of possible oil slicks that might go unnoticed by traditional methods, hopefully leading to faster response and cleanup efforts.

Cerulean uses a machine learning model which has been trained on a massive dataset of satellite images in order to identify potential oil slicks. This model continuously learns and improves its accuracy over time. However Cerulean doesn't just stop once a potential oil slick has been detected. It then analyzes AIS data to identify vessels that were in the vicinity of the slick when it was detected. 

Cerulean joins a growing arsenal of tools developed by SkyTruth in order to help protect marine environments. For example Global Fishing Watch (founded by Oceana, SkyTruth and Google) uses AIS data and satellite imagery to track the activities of fishing vessels across the world in real-time. Authorities around the world can use the Global Fishing Watch map in order to detect illegal fishing and to cross-check information reported by vessel operators.

SkyTruth's Flaring Map visualizes daily infrared detections of oil wells around the world burning off excess gas. The SkyTruth Flaring Map uses data detected by NOAA’s Suomi NPP satellite. The map is updated daily to show all infrared detections hot enough to be gas flares. The map then animates through these nightly detections of global flaring.

Hat-tip: Webcurios

Car Commutes are Getting Longer

During the height of the Covid epidemic a number of visualizations were created to show the drop in road traffic and public transit use. As people were forced to quarantine and work from home our roads and transit networks saw an observable fall in traffic.

For example Buzzfeed teamed up with Mapbox to create a series of interactive mapped visualizations showing the reduction in road traffic in a number of American and global cities. In These Traffic Maps Show How The Coronavirus Pandemic Has Emptied Streets Across The Globe Buzzfeed presented a series of before & after maps which revealed traffic levels before & after the outbreak of Covid-19. 

TomTom has now released data which reveals how road traffic has increased again since the 'mid-pandemic era'. Axios has mapped out the Change in average travel time by car, 2021 to 2023 using TomTom's data. The entirely unsurprising result is that now that lock-downs are over there is more traffic on the road and that commuting times are increasing compared to commuting times from 2021.

The Axios map shows that Washington D.C. has seen the largest increase in car commuting times (97 secs for a 6 mile journey). Other densely populated cities such as New York and Boston have also seen increases in average commuting times over one minute.

Axios concludes that these small increases in commuting time prove that 'the heyday of the work-from-home era is no doubt behind us'. I'm not sure I entirely agree with this conclusion. Road traffic has undoubtedly risen since a time when people were being forced into lock-downs. However Axios's analysis is missing the obvious control data of pre-pandemic commuting times. 

It would surely be more revealing to compare the rates of working from home now to pre-pandemic levels rather than comparing commuting times now to those during the enforced lock-down levels during Covid. Therefore I think the Axios map would be far more interesting if they also looked at 2023 commuting times compared to 2019 (pre-pandemic) commuting times.

The TomTom Traffic Index features an analysis of average travel times (per 10km), average speeds in rush hour and travel time changes since 2022 for 387 cities across 55 countries on 6 continents. Globally London has the longest average travel time (37 mins 20 sec to travel 10km) while Oklahoma City has the shortest average travel time (7 min 57 s to travel 10km).

Mapping Gaza's Destroyed Buildings

The Guardian has used satellite imagery and open-source evidence to map the mass destruction of buildings and land in Gaza. A story-map in How war destroyed Gaza’s neighbourhoods guides you through satellite imagery of three neighborhoods in Gaza (Beit Hanoun, al-Zahra and Khan Younis) documenting the destruction of civilian infrastructure by Israel.

The destroyed buildings in the satellite imagery in The Guardian's map are colored red. However, as the map automatically pans over Gaza, it quickly becomes apparent that it would have been easier for The Guardian to color in the undestroyed buildings as there is very little civilian infrastructure left in the three neighborhoods.

As well as the satellite imagery of Israel's destruction of civilian infrastructure the map is illustrated with video evidence of the Israeli attacks. This destruction of civilian infrastructure by Israel includes bombed schools, mosques, hospitals and people's homes. So far 1.9 million people have been forced to leave their homes in Gaza and, according to The Guardian, the scale of destruction carried out by Israel has "led some experts to describe what is happening in Gaza as 'domicide', ... widespread, deliberate destruction ... preventing the return of displaced people." 

Mapping Oil and Gas Emissions

The Oil Climate Index plus Gas (OCI⁺) is an open-source tool that estimates and compares the life-cycle greenhouse gas (GHG) emissions of individual oil and gas resources around the world. In estimating the total emissions of individual oil and gas assets OCI⁺ calculates emissions across the entire life cycle of oil and gas, from production and processing to transportation and end-use. 

The OCI⁺ interactive map of Oil & Gas Emissions allows you to compare the emissions of the world's oil and gas resources, helping you to identify those with the highest and lowest climate impact. On the map individual oil and gas assets are shown using circular map markers. The size of each circle shows the asset's total estimated climate footprint. You can also click on the individual markers to view each asset’s emissions intensity.

The map includes two overlays (methane inventory and flared gas volume) which allow you to view satellite-detected gas flaring and methane emissions in the vicinity of each resource.

If you are interested in learning more about gas flaring then you can also refer to the SkyTruth Flaring Map. The SkyTruth Flaring Map visualizes daily infrared detections of oil wells around the world burning off excess gas. 

Flaring from natural oil wells is a huge contributor to global heating. For example in 2018 145 billion cubic meters of natural gas was burned during flaring. That is the equivalent of the entire gas consumption of Central and South America combined. 

The SkyTruth Flaring Map uses data detected by NOAA’s Suomi NPP satellite. The map is updated daily to show all infrared detections hot enough to be gas flares. The map animates through these nightly detections of global flaring. The animation can be controlled using the timeline tool in the map sidebar.

SkyTruth has also released an Annual Flaring Volume Map. This map shows the annual volume estimates of gas flaring maintained by the Earth Observation Group.

On this map oil refineries around the world are shown using a red marker. You can click on the individual markers to view the estimated volume of gas flared and the detection frequency. The map includes drawing tools which allow you to create your own areas of interest on the map to view (and download) the flaring data for only the refineries in your defined area.

The Five Minute Fantasy Map Maker

This is Middle England an interactive fantasy map which I made in under 5 minutes, using World Anvil. Middle England is a sacred a magical realm steeped in the ancient lores of rune-crafting, dream-weaving and alchemy.

World Anvil bills itself as a "Worldbuilding Toolset & RPG Campaign Manager Created for Writers, Gamemasters & Creatives". One of the tools in this tool-set is a map wizard which allows you to create an interactive fantasy map from any static image. Creating an interactive fantasy map with World Anvil is as simple as uploading an image file of your map and then pointing to where you want to add markers.

Before using World Anvil I created the Middle England map using Azgaar’s Fantasy Map Generator. The Fantasy Map Generator is an impressive procedural map generator, which can be used to create and edit fantasy maps. The tool comes with a number of options which allow you to control the look and design of your generated fantasy map. When you are happy with the result you can then download your map as a still image.

This static image map can then be turned into an interactive fantasy map with World Anvil. After registering with World Anvil you simply need to upload the static image of your fantasy map and it will automatically turn it into an interactive map which can be panned and zoomed. The free version of World Anvil allows you to add markers to your fantasy map. If you become a paying subscriber you can unlock more tools which then allow you to also add map labels, polylines and polygons to your map.

 

Using AI to Age OSM Maps

The screenshot above, from the SynthMap Demo, shows a side-by-side view of an Open Street Map and an AI generated map of the same OSM data changed to look like a 19th Century era Ordnance Survey map. This Victorian cosplaying map (on the right) was developed by Zekun Li, of the University of Minnesota, who trained an AI to transform OpenStreetMap data into images that resemble the style of early British Ordnance Survey maps.

As you can see the results of this attempt to Generate synthetic historical maps from OSM map tiles is very impressive. But what is the point of an artificially aged digital map? I hear you ask! To which question there is a very good answer. These synthetically generated vintage maps are being created in order to teach AI models how to read historic maps.  

You may remember that in August of last year the David Rumsey Map Collection unveiled a new Text on Maps feature which allows you to search one of the world's largest collections of digitized maps by text. Using this new Text on Maps feature you can now search for any word in order to see where it appears on any of the collection's 57,000+ vintage maps. For example here are the results for searching 57,000 vintage maps for gold mine.

The reason that we are now able to search the David Rumsey Map Collection for individual words on vintage maps is because of huge advances in AI text recognition. Zekun Li's generated synthetic maps make AI models tasked with reading map labels even better. These AI generated maps closely resemble historical maps in style but have accurate 21st-century label information. Which means that the AI text recognition models can actually be trained on maps which have visual challenges similar to those in the actual vintage maps, but also have text labels which we know are accurate.This 'clean' data can then be used to train AI text recognition models on how to see and read map labels on real vintage maps. 

You can read more about Zekun Li's work on Maps with a sense of the past: what are synthetic maps, and why do we love them? on the National Library of Scotland blog.

Styling with Bard

This is the latest episode in my ongoing project to build a Meet in the Middle map using code suggested by Bard. Today's aims are mainly to improve the design and UI of the map.

First up I want to improve the design of the buttons used on the map.

Prompt No.1:

Give me the css styles to create a flat design button

To which Bard suggested:

Absolutely! Here's the CSS for a basic flat design button:

CSS

.flat-button {

  background-color: #4CAF50; /* Change this to your desired color */

  color: #fff;

  padding: 10px 20px;

  border: none;

  border-radius: 5px; /* Adjust corner roundness here */

  font-size: 16px;

  font-weight: bold;

  cursor: pointer;

  transition: all 0.2s ease-in-out;

}

.flat-button:hover {

  background-color: #388E3C; /* Adjust hover color here */

}

.flat-button:active {

  transform: scale(0.95); /* Slight "press" effect on click */

}

Now we just need to assign this CSS style class to our buttons.

Prompt No.2:

How can I add the class 'flat-button' inline to this button - <button id="enter">Calculate Midpoint</button>

Bard replied:

Add the class 'flat-button inline within the HTML: 

<button id="enter" class="flat-button">Calculate Midpoint</button>

Now our buttons look a lot nicer! Next-up I'd like to use fitbounds to adjust the map when the midpoint marker is added to the map. This should ensure that the map nicely frames the three user added markers when the midpoint marker appears.

Prompt No.3:

in leafletjs I have three markers defined in javascript

'var latA = markerA.getLatLng().lat;  var lngA = markerA.getLatLng().lng;  var latB = markerB.getLatLng().lat;  var lngB = markerB.getLatLng().lng;  var latC = markerC.getLatLng().lat;  var lngC = markerC.getLatLng().lng;'

How can I make the map fit the bounds of all three markers?

Bard responded with:

 Here's how you can make the Leaflet map fit the bounds of all three markers using JavaScript:

// Get the LatLng objects of the markers

  const markerALatLng = markerA.getLatLng();

  const markerBLatLng = markerB.getLatLng();

  const markerCLatLng = markerC.getLatLng();

  // Create a LatLngBounds object that encompasses all three markers

  const bounds = new L.LatLngBounds([

    markerALatLng,

    markerBLatLng,

    markerCLatLng

  ]);

  // Fit the map to the bounds

  map.fitBounds(bounds);

Now when the midpoint marker is added the map also zooms to neatly encompass all three user added markers.

It's time to give Bard a more difficult challenge. Currently Our Meet in the Middle map calculates the midpoint between three different locations. This isn't very useful if only two people want to meet. So it would be nice to offer our users the option to calculate a midpoint between just two different locations.

First up we need to add another button to the map which will display after the second marker has been added to the map. This button will give the users the option to calculate a midpoint between only two locations, instead of adding another (third) location to the map.

Prompt No.4:

In this Javascript statement can you add a button with the id 'meet2' to the innerHTML -

' // update the message in the 'instructions' div document.getElementById("instructions").innerHTML = "Now add the third marker to the map.";

Bard suggested:

// Update the message and add a button to the 'instructions' div

document.getElementById("instructions").innerHTML =

  "Now add the third marker to the map. <button id='meet2'>Click me</button>";

Now a new button appears after the seceond marker is added to the map. However nothing happens when we press it. We now need to ask Bard to write a function for this button so that when it is pressed a midpoint is calculated between markerA and markerB and a third (midpoint) marker is added to the map.

I copied the JavaScript of the existing calculateMidpoint() function into Bard and gave it the following prompt:  

Prompt No.5:

Create another function in Javascript exactly like this function only have it calculate a midpoint between MarkerA and MarkerB (ignoring Marker C completely).

Bard replied first time with:

function calculateMidpointAB() {

  var latA = markerA.getLatLng().lat;

  var lngA = markerA.getLatLng().lng;

  var latB = markerB.getLatLng().lat;

  var lngB = markerB.getLatLng().lng;

  // Calculate the midpoint between MarkerA and MarkerB

  var midLat = (latA + latB) / 2;

  var midLng = (lngA + lngB) / 2;

  // Create a LatLngBounds object only for MarkerA and MarkerB

  const bounds = new L.LatLngBounds([

    markerA.getLatLng(),

    markerB.getLatLng()

  ]);

  // Fit the map to the bounds of MarkerA and MarkerB

  map.fitBounds(bounds);

  // Create a marker for the midpoint

  var midpointMarker = L.marker([midLat, midLng]).addTo(map);

  midpointMarker.bindPopup("I'm the midpoint between A and B!");

  // Rest of the code remains the same, as it doesn't involve MarkerC

  // Share to Twitter, add button, fetch coffee shops, etc.

}

Now by simply adding an event listener to our 'meet2' button:

document.getElementById("meet2")

.addEventListener("click", calculateMidpointAB);

we have a Meet in the Middle map which works for either 2 or 3 person meet-ups.

Next-up I think it might be nice to offer users the choice to find nearby restaurants or bars, as an alternative to nearby coffee-shops.

The Interactive Anime Atlas

The Anime Site Mapping Project is a mapping project dedicated to plotting the real-world locations that are featured in popular anime series. It's like a giant treasure hunt for anime fans, but except instead of discovering gold, you can uncover the real-world cafes, shrines, and scenic vistas that inspired your favorite anime shows.

Currently the Anime Site Mapping Project consists of four main interactive maps. Three of the maps are dedicated to individual anime shows: Heya Camp, Kimi no Na wa and Yuru Camp. The fourth, main map allows you to explore the real-world locations of all three of the featured anime shows on one map. 

The Kawai Miyagawa Bus Stop, as feattured in Kimi no Na wa

The real fun for me though is hidden in the individual episode breakdowns for each anime series. On these episode pages individual locations featured in each episode of a show are listed with links to Open Street Map and Google Maps. Follow the Google Maps link and you can then compare an actual still of the anime depiction of the location with the real location on Google Maps Street View.

Via: Weekly OSM

Using the Overpass API with Leaflet

In part 4 my AI Map Challenge I want to see if Bard can write some JavaScript code which will query the Overpass API for coffee shops located 500 meters around the midpoint location calculated by users of my Meet in the Middle map. I then need Bard's help to process the response and add markers showing the locations of all the coffee shops found by Overpass.

Prompt No.1:

using javascript is it possible to use the Overpass API to add the locations of cafes on a leaflet.js map

To which Bard responded: 

I'm designed solely to process and generate text, so I'm unable to assist you with that.

I then asked Bard "What is the Overpass API?" to which it gave a very long response, which included the example that it could be used to "Find bike lanes and repair shops near the user's location". This led me in turn to ask "How would I use the api to 'Find bike lanes and repair shops' near the user's location?" To which Bard finally gave me some JavaScript in its reply:

const userLatitude = /* user's latitude */;

const userLongitude = /* user's longitude */;

const radiusInMeters = 500; // adjust this based on your desired search area

const query = `

[out:json];

way[highway=cycleway](around:"${userLatitude},${userLongitude}",${radiusInMeters});

way[amenity=bicycle_repair](around:"${userLatitude},${userLongitude}",${radiusInMeters});

`;

// Send the query to the Overpass API

fetch("https://overpass-api.de/api/interpreter?data=" + encodeURIComponent(query))

  .then(response => response.json())

  .then(data => {

    // Process the data and display it on the map

  })

  .catch(error => console.error(error));

Unfortunately I want to find nearby coffee shops rather than bike lanes and repair shops.

After a very long and tedious conversation with Bard I failed to create a working Overpass query for finding coffee shops around a location. I almost gave up at this point but thought it might be worth asking ChatGPT instead. 

Prompt No.2:

Can you write a query in javascript to the Overpass API which will return "cuisine"="coffee_shop" in a radius of 500 meters around a location of 51.505,-0.0.9

To which ChatGPT responded: 

const overpassQuery = `

    [out:json];

    node["cuisine"="coffee_shop"](around:500,51.505,-0.09);

    out;

`;

fetch('https://overpass-api.de/api/interpreter', {

    method: 'POST',

    headers: {

        'Content-Type': 'application/x-www-form-urlencoded'

    },

    body: 'data=' + encodeURIComponent(overpassQuery)

})

.then(response => response.json())

.then(data => {

    // Process the data returned by the Overpass API

    console.log(data);

})

.catch(error => {

    console.error('Error fetching data:', error);

});

This actually works. So I simply need to change the 'around' search to '500, ${midLat},${midLng}' in order to use the location of the calculated midpoint in my map.

In ChatGPT's code the data returned by the Overpass API is just being sent to the developer console ('console.log(data)'). So I also now need to process the json response from the Overpass API and add the found coffee shops to my Meet in the Middle map. 

Prompt No.3:

Can you use the returned date from the Overpass API to add a marker to a Leaflet.js map for each coffee shop?

To which ChatGPT replied:

// Send the query to the Overpass API

fetch('https://overpass-api.de/api/interpreter?data=' + encodeURIComponent(query))

    .then(response => response.json())

    .then(data => {

        console.log(data);

        // Create markers for coffee shops

        const coffeeShopMarkers = data.elements.map(element => {

            const coordinates = [element.lat, element.lon]; 

            const marker = L.marker(coordinates);

            // Add a popup with the coffee shop's name (if available)

            if (element.tags.name) {

                marker.bindPopup(element.tags.name);

            } else {

                marker.bindPopup('Coffee Shop'); // Fallback popup text

            }

            return marker;

        });

        // Add the markers to the map (assuming you have a Leaflet map instance named 'map')

        map.addLayer(L.layerGroup(coffeeShopMarkers));

    })

Success!

So my Meet in the Middle map is now able to calculate the midpoint between three different locations. Show the locations of coffee shops in a 500 meter radius around that location. It also includes a button which allows the user to tweet a link to a shared map of the calculated midpoint location.