webgis/map1.html at main · graphmen/webgis · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html lang="en">
<head>
  <title>WETLANDS</title>
	<meta charset="utf-8" />
	<meta property="og:image" content="img/zingsa logo.png" />
	<link rel="icon" href="img/zingsa logo.png">
   <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>
                                              <link rel="stylesheet" href="lib/leaflet.legend.css">
</head>
<body>

    <div id="map" style="width: 100%;height: 710px;"></div>
        </body>
</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/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">
<!----------------------------------------------------Js lines------------------------------------------------------------------------------>
  <script>
      //map dimensions--------------------------------------------------------------------------------------------------------------------
 var mymap = L.map('map').setView([-19.453915, 29.817312], 7.45);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
   maxZoom: 18,
   attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
  'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
   id: 'mapbox/streets-v11',
   tileSize: 512,
   zoomOffset: -1
    }).addTo(mymap);

  var Esri_WorldImagery = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
   attribution: 'ZIMBABWE NATIONAL GEOSPATIAL AND SPACE AGENCY'
  }) .addTo(mymap);
//// Basemaps-----------------------------------------------------------------------------------------------------------------------------
        /////street,
            var googleStreets = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',{
                    maxZoom: 20,
                    subdomains:['mt0','mt1','mt2','mt3']
                     }).addTo(mymap);
                /////Hybrid,
                    var googleHybrid = L.tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}',{
                            maxZoom: 20,
                            subdomains:['mt0','mt1','mt2','mt3']
                            }).addTo(mymap);
                        /////satellite,
                            var googleSat = L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',{
                                    maxZoom: 20,
                                    subdomains:['mt0','mt1','mt2','mt3']
                                     }).addTo(mymap);
                                    /////Terrain
                                        var googleTerrain = L.tileLayer('http://{s}.google.com/vt/lyrs=p&x={x}&y={y}&z={z}',{
                                                maxZoom: 20,
                                                subdomains:['mt0','mt1','mt2','mt3']
                                                 }).addTo(mymap);

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


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

 </script>