Open sourcing Schoolpicker.sg
A template for interactive map views
Back in May, we released our SchoolPicker.sg app, aimed at helping parents and students discover and shortlist schools.
Our initial motivation is to create a better user experience by merging school-related information with geospatial data. As the product took shape, it become obvious to us that what we are building can be extended to many other applications, where:
- You have a large number of data points that can be laid out on a map
(e.g. a listing of schools, childcare centres, clinics etc) - Each data point carries a set of information you might want to filter on
(e.g. school programmes offered, clinic opening hours etc) - Proximity matters
(For instance, you don’t want to drive halfway across Singapore to get your child to school everyday. Neither do you want to walk very far to see a doctor.)
Seeing the success of our SchoolPicker.sg app in reaching out to target users, the Data.gov.sg team decided our right next step will be to open source our code for the community to build similar apps riding on open data.
The repository is now available on the Data.gov.sg Github:
Our SchoolPicker app is built as a Vue.js single-page app. By choosing Vue as our frontend framework, we are able to build an entire app out of reusable and customisable components. Componentisation makes the app flexible: you can change out the info cards to show a different set of information or implement a different set of filters.
Here’s a chart of our app structure:
The various components are laid out in the main view as below:
You can see our detailed explanation on how to clone, set up and deploy the project (with your own customisations) in our Github Readme.
Let us know if you find this useful. As usual, we’re reachable on social media (Twitter, Facebook) and via email (feedback@data.gov.sg).
