Skip to content

Latest commit

 

History

History
91 lines (74 loc) · 4.3 KB

README.md

File metadata and controls

91 lines (74 loc) · 4.3 KB

Overview

Inspired by Geoguessr --- without the new jazzy new avatars & a subscription to pay for the Google Maps API, but with all the guesses you need! Geoguesser-lite is a game for map & city lovers or potentially an inspiration for your next holiday destination.

Getting Started

  • 5 rounds of randomised cities, 3 guesses each
  • Click anywhere on the map where you think the city is
  • Guess within 3000km of the answer to score some points & within 100km to get an instant win for each round
  • Country hint available for each round Guess away!

ezgif com-gif-maker

Made with Javascript, HTML, CSS, Leafletjs library

Process

1. Figma Prototyping

geoguesser-lite figma
Simple prototype wireframing on figma to test out interaction and user flow.

2. Finding a list of cities with coordinates

Screenshot 2023-10-03 at 21 06 13
~43,000 cities and their associated latlng coordinates found on https://simplemaps.com/data/world-cities 🌎

3. Experimenting with different basemaps

Screenshot 2023-10-03 at 21 08 27
Finding a suitable basemap (without giving away any names!) on https://github.com/leaflet-extras/leaflet-providers

4. Leafletjs

https://leafletjs.com/

  • Open-source JS library for interactive maps
  • Provided map interactions for getting coordinates, rendering pins/polylines & zooming image

5. Future Development

  • Penalty of score with the use of hints
  • Option for user to choose continent/country/region to play
  • Option to reveal direction to city from current guess

Favourites

😄 #1 Rendering the Answer Marker & Distance to nearest guess

This function renders the answer marker & a dotted polyline between the guess made and answer marker. It is called with each guess being confirmed. This function takes in two arguments:

  • isGuessCorrect is a boolean value. To check if the guess made was an immediate win or not.
  • shortestDistGuess takes in an object | null. The object has properties of guessNum (number of guesses made for this round), latlng (coordinates of guess) & 'distance' (distance from answer).
// to zoom into answer + guess bounds
function showAns(isGuessCorrect, shortestDistGuess) {
    giveHint();
    ansMarker = new L.Marker(cities[state.cityNum].latlng, {icon: ansIcon}).addTo(map);

    // if user did not manage to guess the city location
    if (!isGuessCorrect) {
        // render line to guess with the shortest distance
        polyline = L.polyline([shortestDistGuess.latlng, cities[state.cityNum].latlng], { color: "green", dashArray: "6" }).addTo(map);
    } else {
        // render marker of guess within winDist 
        polyline = L.polyline([state.currGuessLatLng, cities[state.cityNum].latlng], { color: "green", dashArray: "6" }).addTo(map);
    }

    map.fitBounds(polyline.getBounds().pad(0.2));
}

😄 #2 Rendering direction of answer relative to current guess

Use a single north-facing arrow and rotate it rather than using multiple arrow images pointing to different directions + switch cases.

function checkDirection(guessLatLng, ansLatLng) {
    const latDiff = ansLatLng[0] - guessLatLng.lat;
    const lngDiff = ansLatLng[1] - guessLatLng.lng;

    let calc_angle = Math.atan2(lngDiff, latDiff);

    const final_angle = calc_angle * 180 / Math.PI;

    return final_angle;
}

Challenges

  • Finding an appropriate basemap without labels. Tried to venture into styling using WebGL but turned out to be a rabbithole!

Attributions

Pin icons created by Those Icons - Flaticon
Arrow icons created by Freepik - Flaticon
Stadia Maps