Creating an Interactive Map using Map Manager

Maps offer a more engaging way of presenting your content in your Gametize Project. Instead of scrolling through the default list or clicking buttons to access different sections, players can explore the experience by tapping interactive hotspots on a custom map image—such as a world map or floor plan.

Note:

• Your Project home screen will be replaced by the map that is currently published. To revert to the default list view, unpublish all maps.
• Only 1 map may be published at any time.

To create an Interactive Map using Map Manager:

1. Locate the Project on Admin Dashboard where you want to enable Map Manager.

2. Click on "Project Tools" and click on "Map Manager".

3. Click on "+ New Map".

4. Upload an image in one of the supported formats:
   • PNG
   • JPG

   • GIF

     NOTE: Your image is recommended to be either square or landscape, at least 1280px width. Image filename must not contain special characters (e.g. & # % ... etc). Your image file size must not be more than 1.5MB. Ideally, keep it below 500KB for optimal loading.

5. Add a name and short description (optional) to help project administrators identify the map.

6. For each hotspot:

   1. Enter a label to identify the hotspot.

   2. Select a type for the hotspot. 

      1. Achievements
      2. Activities
      3. Leaderboard
      4. Community
      5. Rewards
      6. Teams
      7. Topic 
      8. URL (new tab/window)
      9. URL (same tab/window)

      Note: All hotspot types are currently supported on the Player Web only. The mobile app currently supports only the Topic hotspot type.

7. Drag the hotspot (outlined in red) to your preferred spot on the map to position it.
8. Drag the corners of the hotspot to adjust its size.
9. Click on "Add Hotspot" to create additional hotspots.
10. Once all hotspots are added and positioned, save the changes and publish your map.

To Create Variant for a Map

Variant will be used by the web application when the user's screen size is narrow, such as on mobile phones. It allows you to optimize the map layout for smaller displays.

1. On the Map Manager, identify a existing map that you would like to create a variant
2. Click on "Create Variant" under Actions.
3. Upload an image in one of the supported formats:
   1. PNG
   2. JPG

   3. GIF

      NOTE: Your image is recommended to be either square or landscape, at least 1280px width. Image filename must not contain special characters (e.g. & # % ... etc). Your image file size must not be more than 1.5MB. Ideally, keep it below 500KB for optimal loading.

4. Add a name and short description (optional) to help project administrators identify the map.

5. For each hotspot:

   1. Enter a label to identify the hotspot.

   2. Select a type for the hotspot. 

      1. Achievements
      2. Activities
      3. Leaderboard
      4. Community
      5. Rewards
      6. Teams
      7. Topic 
      8. URL (new tab/window)
      9. URL (same tab/window)

      Note: All hotspot types are currently supported on the Player Web only. The mobile app currently supports only the Topic hotspot type.

6. Drag the hotspot (outlined in red) to your preferred spot on the map to position it.
7. Drag the corners of the hotspot to adjust its size.
8. Click on "Add Hotspot" to create additional hotspots.
9. Once all hotspots are added and positioned, save the changes and publish your map.

Experience the Demo Project Here:

1. https://gametize.com/project/zoo
2. https://gametize.com/project/galaxy
3. https://gametize.com/project/cottage
4. https://gametize.com/project/raptor

Related Articles:

• Accessing Project Tools