Following some successes with the Bet Generator in both Python & C I turned my attention to the project work with the kids from Little Sandbox. The key elements that would be needed for the Kerbinator project, as far as I could tell were:

  • A map,
  • a database that stored the drop kerb locations in the form of coordinates,
  • the means to collect the coordinates and add them to the database
  • markers added to the map from the database

All sounds pretty complicated.

I’d been advised to use MongoDB to store the data and NodeJS as the server. So I found a tutorial to create a simple form based app using Node and Mongo and followed it. And then a few weeks later i followed it again because I couldn’t remember any of it.

The key things I learned here was the way different javascript files relate to each other, how to install node and a variety of other services such as Express, Mongo and Mongoose and even how to do some validation and check for logged in users. All useful stuff and i’d highly recommend the tutorial as it was very thorough and easy to follow.

Now I’m not about to create the Kerbinator app for the kids, but I was aware that in order to support them with their project and set them tasks to help them learn what to do, I needed to know how to do it myself. I wanted to give them the skills to help them work out how to bring the project to life.

One of my favourite things to do is find TV and Film locations. This started when we went to New York in 2015 and spent 12 days wandering around Manhatten getting photos of ourselves outside all kinds of obscure locations – the house from Breakfast at Tiffany’s, Leon’s Apartment and obviously the Ghostbusters’ Fire Station. Since then, wherever we go in the world we check out any TV or Films from the area and watch them so we can go scouting for their locations. It’s become something of a game for us, trying to find the exact camera angle to recreate a particular shot.

Google maps is great for storing locations but it has so many other locations also added so I decided I would make my own Movie Locations App.

I’m not going to go through all the code here as it’s still an ongoing work in progress, however if you’re interested, you can view the files on GitHub.

So for the Movie Location App I wanted to have the following:

  • An online form on which I could input the coordinates of the locations along with the title of the film or TV show and a description of the location itself.
  • A database to store the information
  • Map markers.

I followed the instructions to get the basics set up, the required node modules, MongoDB and the initial structure of files, which consisted of:

  • config.js
  • moviemap.js
  • package
  • package.json
  • package-lock.json
  • public
    • index.html
    • style.css
    • scripts
      • moviemap_map.js

And using the same format as before I adapted the form and the mongoose schema to change the database and form fields to store longitude, latitude, film, description.

The form worked, I could complete the form and see the data being added to the database but I couldn’t get the map to display markers.

I called in some help from Joe, our volunteer at Little Sandbox. Or to put it another way I cheated..!

What I learned is that there’s no set way of doing things, there are all kinds of ways to achieve the same thing. Joe had been working with the kids on Kerbinator and already has the map markers and database set up so he gave me access to the files and I was able to incorporate his code with my code to finally get my map working the way I wanted. To this day I don’t know why my marker code wasn’t working, but Joe’s code was much more elegant than mine so I went with it.

So at this stage, I have a map, with a form for inputting location and film info. A database that stores the information and markers being added to the map from the database.

That feels like a good place to pause. Now i want to either work on adding information windows so i can easily see what each location is, or in the interest of understanding Kerbinator, add in a geolocation function for writing device coordinates to the database… but that’s for another day.