Day 3. 13h00m - HTML Canvas

It’s day 3 and things went well. But first things first, I decided to revert yesterdays decision. This project won’t use Meteor after all. It was pointed out to me if I choose this route I will miss out on learning core concepts about programming, so although it will take longer to accomplish the task and will likely be more difficult, it’s worth to go over this in the beginning stages of learning. PHP and SQL are back on the table.

But I didn’t tackle that today. As mentioned at the end of yesterdays log, I need a drawable canvas over my map, so that’s what I set out to do.

The first task was deciding how to do this, after a little searching around I found HTML Canvas. A friend sent me this video to check out, the first 10 minutes gave me everything I needed to get going.

After a bit of CSS I was able to get the canvas on top of my map.

Things were coming along nicely! As it doesn’t seem that you’re able to separate out the map controls into divs/classes from the map itself the only option for map controls was some custom ones. First thing I did was refer back to the Google Maps API documentation to remove the ones that come with the map. Then to create some custom buttons to control the zoom feature.

“Good artists borrow, great artists steal.”

To figure this out I had a peep at the source code for hoodmaps to see how Pieter did it. All I had to do was replace the zoom default number on the map with a variable which could then be modified using Jquery with buttons made in HTML. Quite simple really!

Next feature to include is search, as you can see from the above screen I have already put it on the page but it’s not currently working. Also I need to make the canvas drawing scale with the map, currently if you zoom in or out the drawing stays the same size. Then after that I need to figure out how to switch between drawing mode and map mode where the user can move around within the map.

Oh and the project has an official name now: dronemaps.io