GeoPuzzle

This game tests your geography skills by let you dragging and matching each polygon against the correct position on the map. Inspired on Luke Mahe's hack on GMaps draggable polygons.

Demo

Swiss Cantons

Requirements

• a webserver(i.e. Apache)

Setup

• clone / download the project to a location that can be accessible via your webserver
• access the project in your browser (i.e. http://localhost/geopuzzle/ )

Customize the game for your area

• Grab a GeoJSON file for your area of interest. Not sure how to get/make one ? Contact me and I will try to help you.

• Edit the config: static/map.js - app_config variable

    geojson_feeds: {
        Cantons: 'geojson/G3K12.geojson'
    },
    area_mask_fusion_tables_query: null,
    styles: {
        polygon_draggable: {
            strokeColor: "#FF0000",
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: "#FF0000",
            fillOpacity: 0.1
        },
        polygon_final: {
            strokeColor: '#347C17',
            fillColor: '#347C2C',
            fillOpacity: 0.8
        }
    }
  

  • geojson_feeds: Local paths for the GeoJSON files containing the polygons

  • styles: PolygonOptions objects for the entities that are draggable / fixed

  • area_mask_fusion_tables_query: FusionTablesQuery object representing a mask polygon that highlights the area of interest.

    Example for Switzerland boundaries mask

      {
      	select: 'geometry',
      	from: '1tDHsjdz7uhhAmWlmmwjR1P2Huf2LKMMiICPVdw',
      	where: 'id = 1'
      }
    

    If set to null, no mask will be displayed

What's next ?

• make a version with Districts of Switzerland, beta-testers are welcomed !
• your idea ?

Stay in touch

Just contact me if you are not a programmer and / or need help in building a similar game for your region/country.

Contributors

• John Pope - added bramus google.maps.Polygon.moveTo support

Have fun !