1

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:

<!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>

Output screenshot

Improve this question
7
  • please don't mark this questions as duplicate coz i have viewed many question similar to this but none of that solved my problem..
    – Vikas Shah
    Commented Aug 7, 2016 at 18:25
  • So please consider it as new one
    – Vikas Shah
    Commented Aug 7, 2016 at 18:25
  • If your service it at localhost:8081/geoserver/test/wms why do you use localhost:8081/geoserver/web in the Leaflet code?
    – user30184
    Commented Aug 7, 2016 at 18:41
  • oh sorry ....i have edited that already....but nothing happened
    – Vikas Shah
    Commented Aug 7, 2016 at 18:46
  • Your map is initialized to z level 3. Are you sure that your city_limit layer is large enough for being visible at that scale? Can you follow gis.stackexchange.com/questions/180676/… and make that example to work?
    – user30184
    Commented Aug 7, 2016 at 20:07

1 Answer 1

Reset to default
0

The URL of the WMS request you included in your example has EPSG:4326 on it, but Leaflet uses EPSG:3857 by default (which might not be enabled on your GeoServer).

You will find insights on how to use EPSG:4326 with Leaflet in the WMS tutorial

Improve this answer
5
  • thanks sir .....now the map is visible but now to i have to zoom atleast 10 times to view the map.So sir what could be a problem??
    – Vikas Shah
    Commented Aug 9, 2016 at 14:44
  • I guess the data of your WMS service is local, and doesn't include some global dataset such as countries or coastlines. In Leaflet, you should fitBounds to the extents of your data.
    – IvanSanchez
    Commented Aug 9, 2016 at 15:07
  • sir as i am new to leaflet api so i dont know much about it .......could you please explain how to use fitbound or use global dataset
    – Vikas Shah
    Commented Aug 9, 2016 at 15:23
  • i want that if i run my code .....map should be automatically displayed and i dont have to zoomm again and again
    – Vikas Shah
    Commented Aug 9, 2016 at 15:31
  • Make a new question for that.
    – IvanSanchez
    Commented Aug 10, 2016 at 8:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.