This is my long-overdue update on MINA. I stopped juggling balls and made time to work on MINA. And I’m happy that you can see some of it here: dngupta.github.io/mina.github.io

I won’t call this version 1.0. There are still quite a few issues to address before a formal launch. For one, if you are on some versions of Chrome, you will see a wonky basemap like this:

chromeMINA

Mapboxgl on Chrome v 51.02704.84n

So far, the base map has displayed correctly on FireFox and Internet Explorer. It loads up on mobile devices, but I’m not sure about the touch capabilities.

firefoxMINA

Mapboxgl on FireFox

And this is where error checking comes in. I spend a lot of time inspecting the Web page when it loads. When the page loads very slow, I am sure there are errors in the code. It sure helps to have a big screen.

bigScreenHelps

Error tracking on a big screen

Issues

Bootstrap + Mapbxox + Leaflet = it could be awesome (I’ve seen examples!…when the platforms are well developed). As Maria pointed out in her recent post, Mapbox has moved away from Studio Classic. This was the platform we used last summer and it had good integration with the Leaflet library. The new platform, “Mapbox Studio” is different. We now publish ‘styles’ and reference them when coding. Gone are the map ids familiar to Classic users.

More importantly, Mapbox has introduced WebGL application program interfaces (APIs) that are intended to integrate seamlessly with Studio. All of this means that code that was beautifully written (tried, tested, true) for Mapbox + Leaflet + Bootstrap does not work the same way. This does not mean that the three can’t work together.

For MINA, I have been using Bootstrap for the overall Web template (i.e. the html for navigation bar, footer). Mapbox is serving the tiles and map style (i.e. base map, country boundaries, place names) and Leaflet is for user interaction (i.e. the little “+ / -” on top left, display markers and simple popup on click) with the map. To do this, I’ve used a script that is under development here: mapboxgl-leaflet — you know you are in development mode when the only link you find is to github!

The markers are parsed through leaflet-omnivore from a csv that I uploaded to MINA’s github. The map is centred and the pan and zoom features work. With a lag. Try it. You will see the base map plays catch up with the marker layer. This is a known issue#41 and issue#30. A few solutions posted that I have not yet tried.

There’s the issue of attribution. Only Leaflet shows up on the bottom right. I’ve tried adding the standard attribution we used with L.tileLayer. I think there must be a way.

Of course, there are a number of things that I want to add to the map, including user interaction and changing the look and feel. But it is satisfying to have a workable Web map up and (ahem) walking? 🙂