Comparison analysis using Leaflet maps on a HTML web page

The objective of the demonstration is to show how to create a web page with two or more web maps side by side using HTML.

Having maps side by side in this fashion will give the end user opportunity to compare two leaflet powered maps in the same web page.

 

First, we begin with a simple leaflet map with tile layers from mapbox.

bty-001



The Screenshot below displays the simple leaflet map. 
Note the in the HTML code above has divided
web page into two.
Capture-L

nbt-001

The screenshot below displays the two leaflet maps side by side on the web page.

Capture-6

 

We then create marker features and add to the map. We will add a set of marker features below the first var map and another set below the second var map – map2.

The screenshot below displays the markers on the two maps side by side on the 
same web page. The end user can compare the features on the two maps.
Capture-7

For live view of the map, click link below:
http://htmlpreview.github.io/?https://github.com/mayotunde/webmap/blob/gh-pages/comparingmaps

 

Click on the link below  to download the plain text version of the source code.

https://www.dropbox.com/s/sp91uwa0isv11jf/Comparison%20of%20two%20leaflet%20maps%20sidebyside%20using%20HTML.txt?dl=0

See Source code below:

 

ghty-001

 

Thank you for following our blog.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s