One of the projects I’ve been working on recently is the Wavemaker Maker-Map. In a nutshell, it’s a project about raising awareness of what facillities and resources are available in our local area and how to contact or get involved with the various groups. It’s built using a free online mapping tool called Mapbox.

The first stage of development is to create a data-set for each community and where possible, find map co-ordinates for the groups and individuals. We then add details for their web-site and/or a contact email address. This can be a challenge as not everyone provides an exact address for their business, possibly because it’s a hobby or they don’t want random strangers suddenly turning up on their doorstep unexpectedly. In these cases we may incorrectly guess their exact location but this can be fixed later if required.

Once the data-sets are ready, we create a tile-set for our local area and then we create a number of styles which will be used to display each category in a slightly different way. There’s a small amount of additional code needed to turn individual layers on or off but the Mapbox website has a lot of examples of this, along with a lot of ready-made styles. I’ve created some code of my own to set-up a mobile-friendly, size-aware viewport. This needs to be hosted somewhere on your own web-site and tweeked slightly to include your own id strings (provided by the Mapbox web-site when you register and create a project).

In our example, we decided to make a variation on the night-time style theme. By making green-spaces and waterways more obvious, we have created a very clear style that is easy to navigate for people with a minimal amount of local knowledge. There is still another layer to be added with information about artists and once that’s completed, we’ll fix the code which adds the CSS buttons to turn individual layers on & off. We’ll also be adding some hover functions so information and contact details about each point are displayed when the mouse is hovered over them.

The function for the viewport is written in JavaScript and I’ve included it here as the way the port size is created might be more familiar to PHP programmers than JavaScript developers. Casting variables in this way is a convenience which the former take for granted, but discovering it works in JavaScript avoids having to produce more complex code.

winHeight = -20 + $(window).height();
winWidth = -20 + $(window).width();
winString = “<div id=’map’ style=’width: ” + winWidth + “px; height: ” + winHeight + “px;’>”;
console.log(“winString: ” + winString);



Posted on

22nd January 2018

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.