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.
The Screenshot below displays the simple leaflet map.
Note the in the HTML code above has divided
web page into two.
The screenshot below displays the two leaflet maps side by side on the web page.
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.
For live view of the map, click link below:
Click on the link below to download the plain text version of the source code.
See Source code below:
Thank you for following our blog.