Okay, now I want to get coding…
In the previous posts in this series, we have looked at the intuitive ‘out-of-the-box’ web maps you can configure with little to no coding knowledge, whether that be with CARTO or ArcGIS Online, with differing level of learning curves. This may be all you require and provide a timely and quick web mapping solution, particularly in the latter example, one that is integrated with your organisation’s/personal GIS infrastructure. However, to begin customising and ‘fine-tuning’ your web map to your exact needs, some knowledge or understanding of HTML, CSS, and a web scripting language, like Javascript, is required. I have touched on this in my last post, looking at the script libraries and ‘sandbox’ environments in ArcGIS for Developers; however today I will look at another option, Mapbox.
Mapbox provide two elements of their popular service which are of use in creating web maps, their script libraries and Mapbox Studio. The first of these can be seen a set of pre-built functions from Mapbox which, if you reference within your HTML page and in the correct structure in Javascript, will add customisable elements to your web page. These include, adding a query box, to visualising your point data as a heatmap. An example of this is Mapbox GL JS, though another popular scripting library is Leaflet.js, which can also utilise Mapbox Services. This is where Mapbox Studio comes in.
Mapbox Studio
Mapbox Studio, is where you can create, modify and digitise your own vector and raster GIS data, and crucially store on their servers, and access through web services. It is possible to use Open Source tools like GeoServer to store as much data as you want for free, though this is harder to set up ‘from scratch’, and there is fairly generous amount of data storage available for free on Mapbox. You can begin by either importing, modifying or creating GIS within Mapbox Studio Datasets, this being “a dataset is an editable collection of GeoJSON features hosted in your Mapbox account”. This may (or may not) seem complicated, but the mapping environment is very intuitive, with OpenStreetMap data layers underlying and it is easy to add attributes to your data too. You can also ‘export’ this as a GeoJSON layer for other platforms. Once you are comfortable with your GIS data, you move to the next step can upload as a ’tileset’.
Top Tip – You can go back and update/modify the dataset many times and once you hit the ‘Export’ button in Datasets, and it will update the data all the way up to ‘Styles’ and web map itself, with no need to re-upload.
A tileset is how the Mapbox web environment renders and delivers the geospatial data quickly, breaking it into deliverable ’tiles’, rather than one whole ‘chunk’. The ‘MapID’ here can be used and referenced in your web page to ‘load in’ this map service into your code. The next step is upload this as a ‘style’ into Mapbox Studio Styles. In here, you can use background pre-built vector ‘layers’, where you can really customise and alter your background symbology, such as icon shape, zoom levels, colour etc (more guidance here), and add in your own data you previously created. Once this has been done, you can hit ‘Publish’, and can use the ‘share and develop’ links to share your map as it is. However, this is just a starting point…
Now we’re web scripting…
While what we have from Mapbox Studio is good, in order to fully utilise the possibilities of Mapbox (or LeafletJS etc), we need to create/modify HTML and use Javascript. Some knowledge of this and or Javascript is useful at this stage, but my best advice is get stuck in and also have a go using Codeacdemy (or similar) to get to grips with the basics of this. I’m not going to go into full detail of how to create a web map in pure Javascript, space and time precludes me, plus I’m no expert, but I aim to give a starting point. This page on how web apps work should help too.
Tagging and knowing the scripting syntax is the key (as well as patience), but to begin with your web map should contain ideally a title as well as a reference to the script library you need to refer to. The below code snippet gives the basic set up and reference to Mapbox GL JS script as hosted by Mapbox.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>My Webmap</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
</body>
</html>
However, while this references things appropriately, it doesn’t even add a map to your document. There are two things required, first of all your unique Mapbox API token which authorises access, and then mapboxgl.map class which adds the ‘map’ object to your HTML document.
<script>
mapboxgl.accessToken = 'access token ID'; //Put your Mapbox Public Access token here
//Load a new map in the 'map' HTML div
var map = new mapboxgl.Map({
container: 'map',
style:'your-style-url' // replace this with your style URL',
center: [-8.645, 48.909],
zoom: 3
});
</script>
Including this between your <body> tags will initialise a map in your HTML document. Note that this is within a <script> tag, the document can understand this Javascript as it follows the set variables, parameters and expected syntax within the Mapbox Javascript Library you referenced earlier. From here your load in search boxes, layers, visualisations etc. For example, we can load in layers (tilesets) we created in Mapbox Studio (rather than whole map style), with the code below.
map.on('load', function() {
map.addLayer({
id: 'terrain-data',
type: 'line',
source: {
type: 'vector',
url: 'mapbox://mapbox.mapbox-terrain-v2'
},
'source-layer': 'contour'
});
});
Altering and adding in parameters means you can tailor this code and other pre-built functions to create a customisable map for your needs. Just building on tutorials on the Mapbox website and the JS API Reference documents meant I’ve been able to create web maps using Mapbox such as these – (Music Map and Football vs GDP Map). These tutorials (choropleth map and data driven circle styling) were particularly useful in getting started and building confidence with this, as too the links below and mentioned previously. Soon you could be making interactive maps with Mapbox, such as this one below.
Conclusion
I hope this series of posts have helped provide an entry to the world of web mapping and the options available to you, hopefully demystifying things a bit. It is an ongoing journey, I am still very much in the process of learning myself! This isn’t an exhaustive list of web mapping options but covers the main ones, and neither should you have to chose between them, all these options and others are reasonably easy to integrate within each other. For example, you may want to use a Mapbox Style map as your basemap for your CARTO infographic. There are many options and ways to get stuck in, and whether involved in mapping, GIS, web development or something completely different, geo-web development is becoming an increasing useful and relevant skills set to have.
Happy Mapping,
David
P.S: Apologies for the lateness of this final post – I’ve been ill recently with a brief spell in hospital, just before I was about to finish this series of posts, and have only just found time to finish this.
P.P.S.: I originally intended this to be just one post but it ended up being too long for just one, but in the meantime here are some resources below that may be useful for you
Web Mapping Sites
http://www.arcgis.com/home/index.html
Learn Coding
Web Mapping Resources, Script Libraries and Tutorials
https://www.mapbox.com/help/building-a-store-locator/
https://www.mapbox.com/help/how-web-apps-work/#mapboxjs
https://developers.arcgis.com/javascript/latest/api-reference/index.html
https://www.mapbox.com/mapbox-gl-js/api/
https://gis.stackexchange.com/