I wanted to learn frontend development (although it quickly grew into a lesson in full-stack development) so I decided to create I started to learn Angular, but I learn best when I'm actually working towards a goal so this was one of the ideas that I came up with when working towards that goal.

What it does

Using a user search query and options, it plots images onto an OpenLayers map. As of right now, it uses spare mock data and doesn't even display the images on the map primarily because OpenLayers is annoying (more on that later).

How I built it

Angular5 in the frontend using OpenLayers to provide a map API. In theory, the user would then select search options and input a search query which is then be sent to a search service that processes the search through the Facebook and Twitter APIs to return links to images. Those links are then passed to another service that extracts the necessary EXIF data (latitude longitude, and timecode) from the image and sends stores that data along with a UID to the in a Firestore collection. The frontend is then notified with the image UIDs and which then fetches the images using the UIDs and plots them back onto the map.

Challenges I ran into

Interaction between frontend and backend services is a lot more complicated than I thought especially when they exist cross-domain. Also AppEngine takes quite literally (I timed it) about 10 minutes to deploy a new version of the Image Service each time I wanted to change it. OpenLayers is incredibly difficult to work with and it doesn't help that the documentation is incomplete, to put it nicely.

Accomplishments that I'm proud of

Getting the UI to look halfway decent but it still needs a lot of work as does the entire frontend.

What I learned

That I need to learn a lot more about the interaction between frontend and backend services. What I did learn about this interaction will help a lot in the future. Above all however, I learned API selection should be carefully thought out. As stated multiple times now, OpenLayers is overtly complicated. It's the D3 of map APIs.

What's next for Relational Image Map

I plan to see the project through to completion. I would like to refactor the frontend to use @ngrx/store so it's a bit easier to debug and implement lazy loading especially for the map module so it's not so awfully slow loading. Eventually the project might switch to Google Maps for the maps API as OpenLayers may be more trouble than its worth. It may also switch off Firebase and AppEngine onto a fully-managed Kubernetes cluster in GKE or ECS. I would like to eventually implement object recognition so that when the images are processed, they are also tagged with whatever is in the image for future reference.

Share this project: