5

I have a published postgis county table on geoserver. In the layer preview it looks like this

enter image description here

in my very simple JS code 

<!DOCTYPE html>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Leaflet Test</title>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js" crossorigin=""></script>
        <script type="text/javascript">

          var map;
            function init() {
                // create map and set center and zoom level
                map = new L.map('mapid',{
                    crs: L.CRS.EPSG4326
                });
                map.setView([40.876,-74.9999],12);

          var dlayer=L.tileLayer.wms('http://localhost:8080/geoserver/wms',{
              layers: 'pg_world:county0',
          }).addTo(map);
            }

        </script>
      </head>
      <body onload="init()">
        <h1 id="title">Highlands Leaflet Test</h1>

        <div id="mapid">
        </div>
      </body>
    </html>

what happens is when I display in the browser it looks like this

enter image description here

and gets all out of whack when I zoom around. I have tried setting the map view to another place and changed the zoom level and the problem remained.

I should note this layer is originally in 3424 (NJ state plane) and the reproject native to delcared. image shown below

enter image description here

EDIT 1

I brought a county layer that is in 4326 into geoserver and put it in place of the county0 layer and the same error occurs... does this have something to do with the tile settings?

EDIT 2

I replaced my own layer with a sample layer that came with the geoserver download 'usa:states' and the same problem occurred.

EDIT 3

I added the '?' after WMS and did not work, specified the version to 1.3.0 in the arguments. nothing is working at all. No idea why

what is going on here? why is this wrong???!!! I'm following the leaflet tutorial to a T

Improve this question
2
  • Which browser are you using? Are you using different browsers to test your view?
    – whyzar
    Commented Oct 2, 2017 at 16:43
  • google chrome for my tests. internet explorer didnt work either
    – ziggy
    Commented Oct 2, 2017 at 17:29

3 Answers 3

Reset to default
2
+25

I think you need the CSS for it to work properly.

I've seen these issues when I've not loaded the Leaflet library properly.

Try adding this line to your file:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css">

Also, you can start by testing an external WMS service, that way you can confirm the issue is not with yours (which it almost certainly isn't). But add the CSS File first!

Improve this answer
2
1

Your bounding boxes are wrong. They look swapped between Lat-Long and native.

Also, make sure that tile caching is disabled until the issue is sorted out.

Improve this answer
3
  • why are my bounding boxes wrong?
    – ziggy
    Commented Oct 3, 2017 at 12:45
  • @ziggy Maybe your data is not in the native projection, or you entered it by hand, or there is a bug somewhere.
    – JGH
    Commented Oct 3, 2017 at 12:49
  • im going to delete the layer, project it in postgis and bring it in as 4326
    – ziggy
    Commented Oct 3, 2017 at 12:50
1

so after many different attempts to try and fix this issue I ended up changing around my code structure and here is what I was able to get to work

<html>
<head>
  <title>A Leaflet map!</title>
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
  <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
  <style>
    #map{ height: 100% }
  </style>
</head>
<body>

  <div id="map"></div>

  <script>

  // initialize the map
  var map = L.map('map').setView([40.876,-74.9999], 13);

  // base maps
  var dlayery=L.tileLayer.wms('http://localhost:8080/geoserver/wms',{
              layers: 'pg_world:county0'
          }).addTo(map);

  </script>
</body>
</html>

no idea why my code in my question was not working...maybe it had to do with init function....

Improve this answer
5
  • Just out of interest, can you remove the .css file and see if it breaks the same way? I'm pretty sure that'll do it.
    – Alex Leith
    Commented Oct 4, 2017 at 1:18
  • yes i will let you know tomorrow at work. when I added the css file via your answer above nothing changed...
    – ziggy
    Commented Oct 4, 2017 at 1:20
  • @AlexLeith you were correct I removed the css file and it got way out of whack
    – ziggy
    Commented Oct 4, 2017 at 12:22
  • Hey @ziggy, I thought so! Would you consider setting my answer as the solution, for future reference? Your answer is great for context too.
    – Alex Leith
    Commented Oct 5, 2017 at 22:05
  • Adding the css to my original question did not fix my original code though. It must have something else
    – ziggy
    Commented Oct 6, 2017 at 2:46

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.