A quick walk through Mapbox, a Location Platform
For me maps were just a means of showing location,exploring a city with Lonely Planet, sharing with friends on Snapchat, seeing if it’s going to rain on Weather reports, using cab services like OLA, UBER, tracking orders, or checking our ETA in Lyft — location which are essential to every one of these applications, and were powered by maps. Maps were humanity’s living document for me until when I realized that the power to make maps is the power to define a narrative. Web mapping APIs typically include classes for maps and layers so that you don’t have to write all the low-level code for displaying an interactive map image and drawing a new layer on it. APIs designed specifically for the purpose of making web maps include Mapbox, OpenLayers, Leaflet, the Google Maps API, and the ArcGIS API for JavaScript.Today, we are all map makers. And by these maps, we tell our human story. Thanks to a technical assignment which made me realize the potent maps hold and thanks to the platforms that put developers first, that power belongs now to all of us.
Mapbox is one of such platform to craft beautiful maps and developer-friendly location data, APIs, and SDKs to feel free and focus on designing, building, and developing an application. Mapbox open-source tools let analytics companies understand big geo data, drone companies publish flyovers, real estate sites visualize properties, satellite companies process cloud-free imagery, and insurance companies track assets.
Get Started
There are a few resources you’ll need before getting started:
- An access token from your Mapbox account. The access token is used to associate a map with your account and can be found on your Account page.
- A text editor for writing HTML, CSS, and JavaScript.
Add a map
You need to create a map to put it on. Start by creating an HTML file and then initialize the map object on the page.
Create an HTML file
In your project folder, create an index.html file. Set up the document by adding Mapbox GL JS and CSS to your <head>.
<meta charset='utf-8' />
<title>Display a map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-/v0.51.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-/v0.51.0/mapbox-gl.css' rel='stylesheet' />Next, create a map container and a container for your legend and data interactivity elements in <body>.
<div id='map'></div>Apply some CSS to create the page layout. Create a pair of <style> tags at the end of your <head>, then add:
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }Initialize the map
Once you have the basic structure done, you can initialize the map with Mapbox GL JS. Insert a pair of <script> tags at the end of <body> — you will write all of the following code (JavaScript) in between these tags.
Start by creating a new map object using new mapboxgl.Map() and store it in a variable called map.
mapboxgl.accessToken = 'your_access_token';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v9', // stylesheet location
center: [-74.50, 40], // starting position [lng, lat]
zoom: 9 // starting zoom
});If you load the page, it should look like this:
Change map style
You can change map style by adding the code inside <script> tag.
map.setStyle('mapbox://styles/mapbox/' + layerId + '-v9');
mapbox://styles/mapbox/satellite-v9)
mapbox://styles/mapbox/light-v9)Load your data
Once you get the page structure and map done and onto the page, it’s time to load in your data, get it styled, and add a legend. Fortunately, Mapbox GL JS has some handy functions that can help! First, make sure that the data.geojson file you downloaded is in your project folder.
GeoJSON is a format for encoding a variety of geographic data structures.
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [125.6, 10.1]
},
"properties": {
"name": "Dinagat Islands"
}
}GeoJSON supports the following geometry types: Point, LineString, Polygon, MultiPoint, MultiLineString, and MultiPolygon. Geometric objects with additional properties are Feature objects. Sets of features are contained by FeatureCollection objects.
Add an Icon to the Map
You can add an icon to a map by map.loadImage(URL), and show it on the map by adding a layer on the map by addLayer(), data is loaded in the map in addLayer() in “source”
map.on('load', function() {
map.loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/400px-Cat_silhouette.svg.png', function(error, image) {
if (error) throw error;
map.addImage('cat', image);
map.addLayer({
"id": "points",
"type": "symbol",
"source": {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [0, 0]
}
}]
}
},
"layout": {
"icon-image": "cat",
"icon-size": 0.25
}
});
});
});
Add User Interactivity
We can add various user interactivity to the map namely, Adjust a layer’s opacity, Create a time slider, Measure distances, Create a draggable Marker, Get coordinates of the mouse pointer, Create a hover effect, Fly to a location, Fly to a location based on scroll position, Jump to a series of locations, Adjust a layer’s opacity, Center the map on a clicked symbol, Change a layer’s color with buttons, Animate 3D buildings based on ambient sounds,Disable map rotation,Create a draggable Marker, Get features under the mouse pointer, Update a choropleth layer by zoom level and various other features.
Add Control and Overlay
Animate a marker, Change the default position for attribution, Add custom icons with Markers, View a fullscreen map, Locate the userSwipe between maps, Display driving directions, Attach a popup to a marker instance etc.
A sample work of mine demonstrating the amazing Mapbox features like time slider, flying to a location based on scroll position, display a popup on click, get geojson data of the mouse pointer, measure distance between the points and various other features can be seen in this link: https://nyc-collision-analysis.000webhostapp.com/
In sum
Making a custom map is a challenge that will put all of your visual design tools to the test, from typography to color theory to the most fundamental skill of creating a product that is useful and pleasing to the eye. Taken literally, a map is a worldview, and it should, therefore, be curated as a reflection of your hopes and ideals. Mapbox custom map has guided us in the right direction. Mapbox is a very interesting tool for building with live location data, real-time updates, total customization, with the vision of the concept developers first, providing support for Mobile apps, Navigation, Augmented reality, Data Visualization and many more. It is a must use Open Source mapping software. Give it a hand and enjoy working with it. For more knowledge go to the official website https://www.mapbox.com/ and make the best use of the pool of examples https://www.mapbox.com/mapbox-gl-js/example. Happy coding!!
