Trying to Understand MapboxGL and Geojson

The first week assignment of Impossible Maps, I tried to use the map tile style from Mapbox. In the second week class, we tried to put data into our maps. And for this assignment, I combined both the Mapbox GL and Geojson. I’ve been playing around with data viz using data (csv) for Intro to Computational Media before, I created a data visualization of ‘How is the US Feeling‘, using P5js and Mappa. It’s slightly different to use Mapbox GL and Geojson.

The goal of this assignment for me is to get the idea of how Mapbox GL works. I want to explore what it is and how to use it. So, I tried to look at the Mapbox GL documentation and got to understand how to use it. The documentation sure is a lot to take. And I was overwhelmed at first. So I only looked for the function that I wanted to use.

For this assignment, I created “Washington D.C. Subway Stations Map” which tell people where are the stations location including what lines they are. User will know the station’s name by clicking on the location. I got the data (.geojson) from the Mapbox example. I downloaded here.

After loaded the data into the map, I used the code like this.


map.addSource('stations', { // this is just what we're calling the data set
type: 'geojson',
data: 'data/stations.geojson'
});

Note: if you want to upload the file to online server, then try to delete the first / to the PATH (‘data/<file_name>)

Then I differentiate the colors based on each line color.


'circle-color' : {
'property' : 'line', // depending on the line
'type': 'categorical',
'stops' : [
['blue', '#4B7EF2'],
['red', '#F24B4B'],
['green', '#6EDD77'],
['yellow', '#F0EF81'],
['orange', '#F4AA61']
]
},

Then I created the legend. I made <div> in HTML and styled it in CSS. For the interaction, I used the function on mouse click.

 


/ When a click event occurs near a place, open a popup at the location of
// the feature, with HTML description from its properties
map.on('click', function(e) {
var features = map.queryRenderedFeatures(e.point, { layers: ['stations'] });

// if the features have no info, return nothing
if (!features.length) {
return;
}

var feature = features[0];

// Populate the popup and set its coordinates
// based on the feature found
var popup = new mapboxgl.Popup()
.setLngLat(feature.geometry.coordinates)
.setHTML('&lt;div id=\'popup\' class=\'popup\' style=\'z-index: 10; margin-top: 10px;\'&gt;' +
'&lt;ul class=\'list-group\'&gt;' +
'&lt;li class=\'list-group-item\'&gt;Station Name: ' + feature.properties['name'] + ' &lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;')
.addTo(map);
});

// Use the same approach as above to indicate that the symbols are clickable
// by changing the cursor style to 'pointer'
map.on('mousemove', function(e) {
var features = map.queryRenderedFeatures(e.point, { layers: ['stations'] });
map.getCanvas().style.cursor = features.length ? 'pointer' : '';
});

I followed the tutorial in here.

Here’s the result of Washington D.C. Subway Stations Map.

And here’s the full code on my Github.

Leave a Reply

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