October 26-27 | Open Source in Energy Access Symposium Hackathon | Kigali, Rwanda
A basic webpage that embeds the Energy Access Explorer (EAE) analysis in an interactive, preconfigured map window.
A basic webpage should be developed with the Energy Access Explorer (EAE) platform embedded within a map window, similar to a Leaflet-based implementation. The webpage design and layout can be adapted from the template used on https://nagalandgis.in/ and integrated as an additional page within the existing website.
The embedded EAE map should be configured with an appropriate default zoom level and responsive sizing to ensure optimal viewing and usability across both desktop and mobile devices. When the page loads, the left and right side panels of EAE should be collapsed by default to maximize the visible map area.
The webpage should provide user controls for selecting two key parameters that are linked to the embedded EAE platform:
- Administrative boundary hierarchy
- Crop names
Based on the user's selections, the webpage should enable users to automatically zoom to the selected administrative boundary and visualize or highlight areas identified as suitable for growing the selected crop. The required administrative boundary layers will be preloaded within the EAE platform, and a set of mock crop suitability analyses will be provided to support the development and testing of the webpage functionality.
- An iframe which allows users to have an interactive map of the pre-selected data embedded on an HTML page. It will render the map with your exact dataset combinations and legend.
- A live mirror of EAE where the map remains fully interactive. This means visitors to the wrapper website will still be able to move sliders around or zoom in and out if they choose to explore the data further.
- iframe-based implementation.
- Embedded EAE map with preset data and configuration in a wrapper webpage.
EAE is written in plain/modern JavaScript (ECMAScript 2020). There is no framework; instead a traditional C-style programming pattern is enforced. The directories contain:
src: JavaScript codestylesheets: CSS codeviews: HTML documentsbin: scripts and executables
- Experience in UI/UX.
- Experience with iframe.
- Familiarity with web mapping and UI tools.
- Akansha Saklani
- Abdul Khalid
- Join the OSEAS Discord server: https://community.oseas.org/
- Introduce yourself in the
#introductionschannel and join the relevant channels for this challenge. - For physical participants: bring a computer (and required adapters) for some hacking.
- Read the documentation: