Skip to content


Folders and files

Last commit message
Last commit date

Latest commit



49 Commits

Repository files navigation


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.


Swiss Cantons Swiss Cantons


  • a webserver(i.e. Apache)


  • 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 ?

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.


Have fun !