MapBox GL JS: Resize maps on hidden divs or Modal Dialog boxes in Bootstrap. Server Side event.

Hello There,

Today, we i’ll show you how to resize a map on a Bootstrap Modal Dialog box which is hidden.

You may sometimes find it easy to show up a map window in Bootstrap Modal Dialog Box than occupying a large real estate on your web page.

I am using MapBox since it has got the most intuitive, extended open-source Map JS. Moreover it is much faster to render on a Web Page than Google Maps. So if you have a not-so-complicated requirement to show up on a Map, I would recommend MapBox.

So, lets get started..

If you dont have a MapBox Account, it is required that you create an account first. You can visit https://www.mapbox.com/studio/signup/ . After signing up, you will receive a API Key for your account, which you can use for your projects.

STEP 1:

Create ASP.Net Web Page Project.

STEP 2:

Go to Default.aspx (or any other aspx file, you want the map to be drawn..) and add the following lines of code below the <asp:Content /> declaration.

<meta name=’viewport’ content=’initial-scale=1,maximum-scale=1,user-scalable=no’ />
https://api.tiles.mapbox.com/mapbox-gl-js/v0.15.0/mapbox-gl.js
<link href=’https://api.tiles.mapbox.com/mapbox-gl-js/v0.15.0/mapbox-gl.css&#8217; rel=’stylesheet’ />

STEP 3:

Add the Style tag. This style tag defines the style for the map. Below the map is saved in a map variable, so the style is defined for the #map variable.

<style>
body {
margin: 0;
padding: 0;
}

#map {
position: absolute;
top: 0;
bottom: 0;
width:100%
}
</style>

STEP 4:

Add a Bootstrap Modal to show the map.

ModalMap.png
Some how WordPress did not allow me to add this markup as a plain text. So adding it as a screenshot. Bear with me. 🙂

STEP 5:

Add the java script to handle the bootstrap modal dialog box and also set the Map attributes.

mapboxgl.accessToken = ”; // Enter you MapBox Access Token here.

var map = new mapboxgl.Map({
container: ‘map’, // container id
style: ‘mapbox://styles/mapbox/streets-v8’, //stylesheet location
center: [, ], // starting position. I have two variables sLatitude and sLongitude here to pass the Latitude and Longitude from the Server Side.
zoom: 9 // starting zoom
});

function MapModal() {
$(‘#Map_Modal’).modal();
}

function MapResize() {
map.resize(); // We will use the map.resize() function, to resize the MapBox map  once the modal has finished loading.
}

// Given that your modal has the id #modal
// and your map is under the variable map. The ‘shown.bs.modal’ event handler is an in-built event handler for Bootstrap Modals.
$(‘#Map_Modal’).on(‘shown.bs.modal’, function () {
map.resize();
});

STEP 6:

On the server side we must now pass the values of Latitude and Longitude to the two variables sLatitude and sLongitude. Below is the full code from the Server Side.

Partial Class _Default
Inherits Page

Protected sLatitude As String
Protected sLongitude As String

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load

sLatitude = “58.548025”
sLongitude = “23.6063006”

End Sub

Protected Sub Button_Click_Click(sender As Object, e As EventArgs)

‘ First to execute the script to show the modal dialog box.
ScriptManager.RegisterStartupScript(Me, Me.[GetType](), “LaunchServerSide”, “$(function() { MapModal(); });”, True)

‘ Second, to execute the resize function of the MapBox.
ScriptManager.RegisterStartupScript(Me, Me.[GetType](), “LaunchServerSide”, “$(function() { MapResize(); });”, True)

End Sub
End Class

And that is it!

You should be having the map drawn properly on a Bootstrap Modal Dialog Box.

-Cheers!

Rohant K.