aiShare Your Requirements
Technologies Involved:
Javascript
Area Of Work: Web Development
Project Description

Zip Sites partnered with Oodles to develop an interactive, web-based navigation experience for children, centered around a fictional map. The concept was designed to engage young users through playful storytelling and intuitive map exploration. The client provided a hand-drawn fantasy map that needed to be digitized and enhanced with interactive elements such as clickable locations, animations, and movement tracking—similar to classic video games like Super Mario or Donkey Kong. 

Scope Of Work

The client required a custom interactive map that could be embedded within a WordPress site. The map needed to work across desktop and mobile browsers and support character movement along a predefined path between clickable "locations." The visual style had to replicate a classic video game map while preserving the artistic identity of the original hand-drawn sketch. Additionally, the map had to support zoom functionality, maintain responsive behavior across devices, and enable administrators to configure interactive elements dynamically. The platform was to serve as the homepage of a children’s website, helping users navigate to various sections through an animated, gamified interface.

Our Solution

Oodles started by digitizing the client’s artwork and mapped out the interactive journey using JavaScript-based tools.

  • Built the interactive map interface using Leaflet.js for 2D rendering and flexibility
  • Converted the hand-drawn map into a scalable digital asset suitable for web embedding
  • Developed custom controls to move a character along predefined paths using keyboard navigation
  • Enabled click-based redirection to content pages from specific "locations" on the map
  • Integrated zoom-in capabilities for detailed exploration of different map regions
  • Ensured responsiveness for both mobile and desktop views with fixed-position elements
  • Enabled admin-level customization for adding new locations via backend configurations
  • Designed the system for future scalability, including optional 3D upgrades via Unity or WebGL