index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ZINGSA WEBGIS</title>
   <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.js">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
                    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js"></script>
                            <script src="lib/L.Geoserver.js"></script>
                               <script src="lib/leaflet.legend.js"></script>
                                  <script src="lib/leaflet.browser.print.js"></script>
                                     <script src="lib/leaflet.browser.print.min.js"></script>
                                         <script src="lib/leaflet.browser.print.sizes.js"></script>
                                            <script src="lib/leaflet.browser.print.utils.js"></script>
                                              <script src="lib/L.Control.SwitchScaleControl.js>"</script>"
                                                 <link rel="stylesheet" href="lib/L.Control.SwitchScaleControl.css">
                                                   <link rel="stylesheet" href="lib/leaflet.legend.css">
</head>
</html>
<!--Plugins and extensions------------------------------------------------------------------------------------------------------------------>
  									<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
                      <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.js"></script>
                         <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
                           <script src="./lib/leaflet.browser.print.min.js"></script>
                             <script src="lib/L.Geoserver.js"></script>
                                <script src="lib/leaflet.legend.js"></script>
                                  <script src="lib/leaflet.browser.print.js"></script>
                                    <script src="lib/leaflet.browser.print.min.js"></script>
                                    <script src="lib/L.Control.SwitchScaleControl.js>"</script>"
                                  <script src="lib/leaflet.browser.print.sizes.js"></script>
                                <script src="lib/leaflet.browser.print.utils.js"></script>
                            <script src="lib/leaflet.groupedlayercontrol.js"></script>
                          <script src="lib/L.Control.HtmlLegend.js"></script>
                        <link rel="stylesheet" href="lib/leaflet.legend.css">
                      <link rel="stylesheet" href="lib/leaflet.groupedlayercontrol.css">
                    <link rel="stylesheet" href="lib/L.Control.HtmlLegend.css">
                  <link rel="stylesheet" href="lib/L.Control.SwitchScaleControl.css">
	<style>
		html, body {
			height: 100%;
			margin: 0;
		}
		#map {
			width: 100%;
			height: 100vh;
		}
	</style>


</head>
<body>

<div id='map'></div>

<script>

	var cities = L.layerGroup();
	var mbAttr = 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
			'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
		mbUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';

	var
		streets  = L.tileLayer(mbUrl, {id: 'mapbox/streets-v11', tileSize: 512, zoomOffset: -1, attribution: mbAttr}),
		satellite  = L.tileLayer(mbUrl, {id: 'mapbox/satellite-v9', tileSize: 512, zoomOffset: -1, attribution: mbAttr}),
		navigationday  = L.tileLayer(mbUrl, {id: 'mapbox/navigation-day-v1', tileSize: 512, zoomOffset: -1, attribution: mbAttr}),
		googleStreets = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',{maxZoom: 20,subdomains:['mt0','mt1','mt2','mt3']}),
		googleHybrid = L.tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}',{maxZoom: 20,subdomains:['mt0','mt1','mt2','mt3']}),
		googleSat = L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',{maxZoom: 20,subdomains:['mt0','mt1','mt2','mt3']});

	var map = L.map('map', {
		center: [-19.453915, 29.817312],
		zoom: 7,
		layers: [satellite]
	});

	var baseLayers = {
		"Map Box Satellite":satellite,
		"Map Box Streets": streets,
		"Map Box Navigation":navigationday,
		"Google Streets":googleStreets,
		"Google Hybrid":googleHybrid,
		"Google Satellite":googleSat
	};


	var
	Wetlands = L.Geoserver.wms("http://localhost:8080/geoserver/NationalWetlands/wms?", {
	    layers: "NationalWetlands:National Wetlands",
	      attribution: 'ZIMBABWE NATIONAL GEOSPATIAL AND SPACE AGENCY 2021'
	        });
	         Wetlands.addTo(map).bindPopup('hi i am a wetland');

	HeadWater = L.Geoserver.wms("http://localhost:8080/geoserver/NationalWetlands/wms?", {
			 		    layers: "	NationalWetlands:Head Water",
			 		      attribution: 'ZIMBABWE NATIONAL GEOSPATIAL AND SPACE AGENCY 2021'
			 		        });
			 		         HeadWater.addTo(map).bindPopup('hi i am a wetland');

	MiddleReach = L.Geoserver.wms("http://localhost:8080/geoserver/NationalWetlands/wms?", {
			 		    layers: "NationalWetlands:Middle Reach",
			 		      attribution: 'ZIMBABWE NATIONAL GEOSPATIAL AND SPACE AGENCY 2021'
			 		       });
			 		        MiddleReach.addTo(map);
	MajorRivers= L.Geoserver.wms("http://localhost:8080/geoserver/NationalWetlands/wms?", {
									    layers: "NationalWetlands:Major Rivers",
									      attribution: 'ZIMBABWE NATIONAL GEOSPATIAL AND SPACE AGENCY 2021'
									        });
									         MajorRivers.addTo(map).bindPopup('hi i am a wetland');

 Dams = L.Geoserver.wms("http://localhost:8080/geoserver/NationalWetlands/wms?", {
									    layers: "NationalWetlands:Dams",
									      attribution: 'ZIMBABWE NATIONAL GEOSPATIAL AND SPACE AGENCY 2021'
									       });
									        Dams.addTo(map);
Rivers = L.Geoserver.wms("http://localhost:8080/geoserver/NationalWetlands/wms?", {
                         layers: "NationalWetlands:Rivers",
                         attribution: 'ZIMBABWE NATIONAL GEOSPATIAL AND SPACE AGENCY 2021'
                         });
                         Rivers.addTo(map);


/*Grids = L.Geoserver.wms("http://localhost:8080/geoserver/NationalWetlands/wms?", {
	               layers: "NationalWetlands:Final_Fishnets",
	                    attribution: 'ZIMBABWE NATIONAL GEOSPATIAL AND SPACE AGENCY 2021'
	                      });
	                        Grids.addTo(map);*/


		var Wetlands={
			" Combined Wetlands":Wetlands,
			"Head Water":HeadWater,
			"Middle Raech":MiddleReach,
			"Major Rivers":MajorRivers,
			"Dams":Dams,
      "Rivers":Rivers,
			/*"Grids":Grids*/
		};


L.control.layers(baseLayers,Wetlands,{collapsed:false}).addTo(map);
/*	L.control.layers(baseLayers).addTo(map);*/
L.control.browserPrint().addTo(map);
L.control.scale({position:"bottomright"}).addTo(map);


</script>


</body>
</html>