Return to Question

FDix code formattting.

Source Link

edited Aug 7, 2016 at 23:42

12.9k
2
39
72

actually here is url of geoserver on which my map is published: http://localhost:8081/geoserver/test/wms?service=WMS&version=1.1.0&request=GetMap&layers=test:city_limit&styles=&bbox=-114.315796136219,50.842822033593,-113.859905274451,51.2124253170889&width=768&height=622&srs=EPSG:4326&format=application/openlayers

And i have written a html code using leaflet api to connect to geoserver:

WMS example - Leaflet

<!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://npmcdn.com/[email protected]/dist/leaflet.css" />
    <script src="https://npmcdn.com/[email protected]/dist/leaflet.js"></script>

    <style>
        #map {
            width:600px;
            height: 400px;
        }
    </style>
    
</head>
<body>

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

<script type="text/javascript">

    var map = L.map('map', {
        center: [-17, -67],
        zoom: 3
    });

    var wmsLayer = L.tileLayer.wms('http://localhost:8081/geoserver/web', {
        layers: 'test:city_limit'
    }).addTo(map);

</script>



</body>
</html>

var map = L.map('map', { center: [-17, -67], zoom: 3 }); var wmsLayer = L.tileLayer.wms('http://localhost:8081/geoserver/web', { layers: 'test:city_limit' }).addTo(map);

And i have written a html code using leaflet api to connect to geoserver:

WMS example - Leaflet

<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://npmcdn.com/[email protected]/dist/leaflet.css" />
<script src="https://npmcdn.com/[email protected]/dist/leaflet.js"></script>

<style>
    #map {
        width:600px;
        height: 400px;
    }
</style>

var map = L.map('map', { center: [-17, -67], zoom: 3 }); var wmsLayer = L.tileLayer.wms('http://localhost:8081/geoserver/web', { layers: 'test:city_limit' }).addTo(map);

And i have written a html code using leaflet api to connect to geoserver:

<!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://npmcdn.com/[email protected]/dist/leaflet.css" />
    <script src="https://npmcdn.com/[email protected]/dist/leaflet.js"></script>

    <style>
        #map {
            width:600px;
            height: 400px;
        }
    </style>
    
</head>
<body>

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

<script type="text/javascript">

    var map = L.map('map', {
        center: [-17, -67],
        zoom: 3
    });

    var wmsLayer = L.tileLayer.wms('http://localhost:8081/geoserver/web', {
        layers: 'test:city_limit'
    }).addTo(map);

</script>



</body>
</html>

Source Link

asked Aug 7, 2016 at 18:14

Vikas Shah

Browser display nothing when debugging leaflet api file to connect to geoserver

And i have written a html code using leaflet api to connect to geoserver:

WMS example - Leaflet

<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://npmcdn.com/[email protected]/dist/leaflet.css" />
<script src="https://npmcdn.com/[email protected]/dist/leaflet.js"></script>

<style>
    #map {
        width:600px;
        height: 400px;
    }
</style>

var map = L.map('map', { center: [-17, -67], zoom: 3 }); var wmsLayer = L.tileLayer.wms('http://localhost:8081/geoserver/web', { layers: 'test:city_limit' }).addTo(map);