silentdjay / mapstery Goto Github PK
View Code? Open in Web Editor NEWA geography game inspired by my long history of spending hours on end staring at maps
Home Page: http://silentdjay.github.io/Mapstery/
A geography game inspired by my long history of spending hours on end staring at maps
Home Page: http://silentdjay.github.io/Mapstery/
Restcountries provides many translated names for each country. We can use those to make non-english versions of the game. Attached is a document containing translation strings.
Mapstery_translation_strings.xlsx
Feel free to add any translations you can!
To enable quicker gameplay, after the user finds the target country, present the user the option to play a new round rather than only allowing them to 'Explore the Map'
Vatican City/Holy See returns poorly formed country data upon click (country name and zip code)
Previously, the geolocation data that Google Maps delivered would return a consistent data payload for a click that didn't return country data. Now, the logic returns information about some bodies of water (and possibly other features). I've seen click data returned for the following geographic features:
There are bound to be others. It appears that the "types" : [ "establishment", "natural_feature" ]
feature is new. I should leverage that to fix the functionality for a non-counting click.
Here is an example of the payload for a click on the Mediterranean Sea:
/**/_xdc_._1qu7rv && _xdc_._1qu7rv( {
"plus_code" : {
"global_code" : "8F8X9488+4R"
},
"results" : [
{
"address_components" : [
{
"long_name" : "Mediterranean Sea",
"short_name" : "Mediterranean Sea",
"types" : [ "establishment", "natural_feature" ]
}
],
"formatted_address" : "Mediterranean Sea",
"geometry" : {
"bounds" : {
"northeast" : {
"lat" : 45.7600288,
"lng" : 36.1979765
},
"southwest" : {
"lat" : 30.26984689999999,
"lng" : -6.004411999999999
}
},
"location" : {
"lat" : 34.5531284,
"lng" : 18.0480105
},
"location_type" : "APPROXIMATE",
"viewport" : {
"northeast" : {
"lat" : 45.7600288,
"lng" : 36.1979765
},
"southwest" : {
"lat" : 30.26984689999999,
"lng" : -6.004411999999999
}
}
},
"place_id" : "ChIJnzxHHLghFBMRQPjM_opZky4",
"types" : [ "establishment", "natural_feature" ]
}
],
"status" : "OK"
}
)
This requires a fix.
localstorage could be leveraged to make the gameplay more engaging.
Some ideas:
Currently, when I share Mapstery on WhatsApp, for example, there is no thumbnail image. I would like it to be the favicon (or a version of it).
See here for all relevant open graph structured properties: https://ogp.me/#structured
When clicking on the #proceed_button
<div>
after selecting the US States gameplay (on either side of the button), the 'Click to start playing' button is hidden and the user cannot proceed to play the game. The rest of the contents of the modal remain and continue to cover the map.
While the #proceed_button
<div>
is also present on the corresponding screen for the Countries of the world game, the same does not happen.
and consider removing these hints for categories where they are irrelevant.
The click distance hint should
fix the logic for the 'The' prefix on 'natural_features' clicks
clicks on natural_features without country info count toward the click total. (they shouldn't)
Make a PR on the countries API
User Feedback suggests that users want the 'Explore the Map' feature, but they can't find it. Make it more obvious!
Ideas:
potentially use the onLoad
prop of the iframe to make this smoother.
:)
instead of a click anywhere on the modal to close it, provide a button to close the modal with an explicit 'close layer' label
for example:
Play with a list of countries
the relative size (e.g. 'Tiny') is only displayed in the 'hints' context - it should be displayed whenever a country's area data is displayed
Clicks on these territories do not return country/any results from the Google Maps API:
* Arunachal Pradesh (far northeastern India)
* Crimea
* Kosovo
* Palestine
* Jammu and Kashmir (far northern India) - there are a LOT of separate disputed territories up there
* South Ossetia (Georgia)
* Abkhazia (Georgia)
* North Cyprus
* Southern Kuril Islands (North of Sapporo)
* Western Sahara
Additional examples can be found on this list: https://en.wikipedia.org/wiki/List_of_territorial_disputes
To address this, choose which country you want them to belong to (or report them as 'Unclaimed Territory' and include it in the list of potential countries(you'll need to differentiate this from clicks on bodies of water)) OR approximate their locations with lat/lng and in the case that no data is returned within that approximate area, provide data accordingly.
Initially I assumed that any address that included a 'natural_feature' component would not reveal any country data, so I dismiss it based on that fact. I need to introduce more logic to filter that address information and determine the country clicked.
here's an example of returned address information from a click on Ngazidja, Comoros. There are many more examples - including one in Cape Verde
"address_components" : [
{
"long_name" : "Ngazidja",
"short_name" : "Ngazidja",
"types" : [ "establishment", "natural_feature" ]
},
{
"long_name" : "Ngazidja",
"short_name" : "Ngazidja",
"types" : [ "administrative_area_level_1", "political" ]
},
{
"long_name" : "Comoros",
"short_name" : "KM",
"types" : [ "country", "political" ]
}
],
this is a useful piece of information to know when making the 'New Game'/'Play Again' decision
idea:
Use Leaflet/D3 to create interactive maps/charts to display collective gameplay data
Because it should be done.
When i push changes to my gh-pages branch, the production site is not updated. Similar problems documented here, with potential solutions:
https://stackoverflow.com/questions/24713112/my-github-page-wont-update-its-content/47443046#47443046
The new version of restcountries provides all sorts of fun information that could be included in the game, like
incorporate some or all of these into the bonus country data
land area is included in the data payload for restcountries. Use it to dynamically calculate an appropriate google maps zoom level per target country - so that the entire country fills an appropriate amount of the screen and the country's map label is visible.
in the address component that the US States version of the game uses to match the destination state, the short_name
attribute has been changed in the Google Maps API. Here is the new version, for formatted_address: "Kentucky, USA"
:
0: {long_name: "Kentucky", short_name: "Kentucky", types: ["administrative_area_level_1", "political"]}
Previously, the short_name
would have been KY
.
Interestingly, in other address components, like this one, for formatted_address: "Leeco, KY 41301, USA"
, the short_name
is still the state's abbreviation:
2: {long_name: "Kentucky", short_name: "KY", types: ["administrative_area_level_1", "political"]}
EVERY instance of `"[State], USA" has the same data pattern. This inconsistent behavior seems like a bug on Google's side of things.
long_name: "Kentucky", short_name: "Kentucky"
is simply messy data, not to mention that it's inconsistent with corresponding address components found in the varying levels of addres specificity that Google returns.
this seems like a solid resource:
Even the easiest categories of the game are probably too difficult for beginning geographers.
One potential idea - include a selection on the welcome screen whether or not to include the borders on the satellite map (defaults to 'not').
yesterday's deployment (May 22) didn't work - the previous version of the application is still live on mapstery.org. dunno why. Fix that.
This app needs to use a different API. A good alternative is https://restcountries.com/
Clicking on Western Sahara gives "you clicked on unclaimed territory"
Keep a record of previous countries clicked/not clicked and how many clicks it took to find (I'd like to build this with a Node backend)
Django Rest Framework is also an option:
https://www.django-rest-framework.org/tutorial/1-serialization/#testing-our-first-attempt-at-a-web-api
Or perhaps Meteor: https://www.meteor.com/tutorials/blaze/creating-an-app
Or Express: https://expressjs.com/
Once we have at least one set of translation strings available, incorporate it into the game, with a flag icon that allows a user to select their preferred language.
Also, including a 'play Mapstery in a random language' option would be fun.
I have put absolutely no effort into SEO for mapstery.world. Make some basic changes and watch the users flood in!
:/
in combination with the countrySubdivision
reverse geolocation API added in d57d126,
this could be used to implement this feature: https://www.geonames.org/export/place-hierarchy.html#children
restcountries uses this license:
https://www.mozilla.org/en-US/MPL/2.0/
src:
https://github.com/fayder/restcountries
make sure it is referenced appropriately.
When a user is presented with a new target country, let the user know how many clicks it takes to find this country on average - we can likely leverage the PostHog API for this, based on an existing insight.
Clicks on Guernsey, Gambier Islands, and others(?) generate "Cannot read property 'formatted_address' of undefined" errors
Easy as pie. Just do it.
to figure this out, I'd probably need to run a TON of iterations of each data source to confirm that the index of each is chosen at least one time. Great thing to write a test for.
Allow a user to decide, for example, whether they want to only play with countries that are above a certain geographic area or population size. Similarly, there could be a 'small countries' only mode.
To make the 'click distance from target' measurements more relevant and useful.
it's unclear to just about every user how far away the last click was relative to the current zoom level of the map - they only know if they are closer or farther away.
Perhaps you can also change the colors of the click labels based on how close the guess was to the target.
As the issue is inconsistent, it is a bit hard to reproduce. A possible solution might be using different values for click lat/lng or target country lat/lng.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.