We could not find a platform to tell us what we could do in Edmonton so we decided to build one using Edmonton's datasets.

What it does

The webpage is interactive and the user can click any amount of buttons on the right side of the page and on the left side markers will show up on a map where one can do that activity in Edmonton. The buttons are toggles and if there are too many selected, the user can click the "Clear All" button to remove all markers from the map.

How we built it

Initially, we planned out the front-end design and discussed the milestones and features that should be included. Then, in development, we used Meteor.js as our development platform and used the React.js framework.

Challenges we ran into

The largest roadblock was handling hover and click events on the map. The map component in the package that we used to render the map has props to return latitude and longitude coordinates of clicks; however, all components (location markers) on top of the map block the click event. The other challenge we ran into was the toggle function of all the location markers with a dropdown menu on all venues.

Accomplishments that we're proud of

We were able to successfully integrate Google map API and fetch data from City of Edmonton.

What we learned

We learned one way to pass data between two siblings in React component hierarchy. We also learned to use React and Meteor.

What's next for yegXciting

We will find and/or create more datasets to use on the webpage. Then, we will add more functionality such as a hover and click feature on the markers that tells what and where the marker is pointed to. We will also add a cluster feature and a list feature that saves the clicked marker information. After that we will polish the look of the page.

Share this project: