test_leaflet.html

<!DOCTYPE html>
<html>
<head>

    <title>WMS example - Leaflet</title>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
        crossorigin=""/>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>


    <style>
        html, body {
            height: 100%;
            margin: 0;
        }
        #map {
            width: 100%;
            height: 700px;
        }
    </style>


</head>
<body>

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

<script type="text/javascript">

    var map = L.map('map', {
        center: [-5.615438786519656, 106.09635613125234],
        zoom: 8
    });

    var wmsLayer = L.tileLayer.wms('http://192.168.2.53:8081/cgi-bin/mapserv.exe?',{
        mode: 'browse',
        map:'C://ms4w/apps/cgi-viewer/map/SeaChart_DAY_BRIGHT.map',
        layers: 'all'
    }).addTo(map);

    var wmsLayer = L.tileLayer.wms('http://192.168.2.53:8081/cgi-bin/mapserv.exe?map=C%3A%2Fms4w%2Fapps%2Fcgi-viewer%2Fmap%2FSeaChart_DAY_BRIGHT.map&',{
        layers: 'indonesia',
        format: 'image/png',
        srs:"EPSG:4326",
        transparent: true
    }).addTo(map);

    var wmsLayer1 = L.tileLayer.wms('http://192.168.2.53:8081/cgi-bin/mapserv.exe?map=C%3A%2Fms4w%2Fapps%2Fcgi-viewer%2Fmap%2FSeaChart_DAY_BRIGHT.map&',{
        layers: 'default',
        format: 'image/png',
        srs:"EPSG:4326",
        transparent: true
    }).addTo(map);

    var wmsLayer2 = L.tileLayer.wms('http://192.168.2.53:8081/cgi-bin/mapserv.exe?map=C%3A%2Fms4w%2Fapps%2Fcgi-viewer%2Fmap%2FSeaChart_DAY_BRIGHT.map&',{
        layers: 'Overview',
        format: 'image/png',
        srs:"EPSG:4326",
        transparent: true
    }).addTo(map);

    var wmsLayer3 = L.tileLayer.wms('http://192.168.2.53:8081/cgi-bin/mapserv.exe?map=C%3A%2Fms4w%2Fapps%2Fcgi-viewer%2Fmap%2FSeaChart_DAY_BRIGHT.map&',{
        layers: 'General',
        format: 'image/png',
        srs:"EPSG:4326",
        transparent: true
    }).addTo(map);

    var wmsLayer4 = L.tileLayer.wms('http://192.168.2.53:8081/cgi-bin/mapserv.exe?map=C%3A%2Fms4w%2Fapps%2Fcgi-viewer%2Fmap%2FSeaChart_DAY_BRIGHT.map&',{
        layers: 'Coastal',
        format: 'image/png',
        srs:"EPSG:4326",
        transparent: true
    }).addTo(map);

    var wmsLayer5 = L.tileLayer.wms('http://192.168.2.53:8081/cgi-bin/mapserv.exe?map=C%3A%2Fms4w%2Fapps%2Fcgi-viewer%2Fmap%2FSeaChart_DAY_BRIGHT.map&',{
        layers: 'Approach',
        format: 'image/png',
        srs:"EPSG:4326",
        transparent: true
    }).addTo(map);

    var wmsLayer6 = L.tileLayer.wms('http://192.168.2.53:8081/cgi-bin/mapserv.exe?map=C%3A%2Fms4w%2Fapps%2Fcgi-viewer%2Fmap%2FSeaChart_DAY_BRIGHT.map&',{
        layers: 'Harbour',
        format: 'image/png',
        srs:"EPSG:4326",
        transparent: true
    }).addTo(map);

    var wmsLayer7 = L.tileLayer.wms('http://192.168.2.53:8081/cgi-bin/mapserv.exe?map=C%3A%2Fms4w%2Fapps%2Fcgi-viewer%2Fmap%2FSeaChart_DAY_BRIGHT.map&',{
        layers: 'Berthing',
        format: 'image/png',
        srs:"EPSG:4326",
        transparent: true
    }).addTo(map);

    //var wmsLayer = L.tileLayer.wms('http://10.10.1.252:8081/cgi-bin/mapserv.exe?map=C%3A%2Fms4w%2Fapps%2Fcgi-viewer%2Fmap%2FSeaChart_DAY_BRIGHT.map&layers=all&zoomsize=2&zoomdir=1&map_size=600+400').addTo(map);

    // var wmsLayer1 = L.tileLayer.wms('http://ows.mundialis.de/services/service?', {
    //  layers: 'TOPO-OSM-WMS'
    // }).addTo(map);


</script>


</body>
</html>