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

  • Which browser are you using? Are you using different browsers to test your view? – whyzar Oct 2 '17 at 16:43
  • google chrome for my tests. internet explorer didnt work either – ziggy Oct 2 '17 at 17:29
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!

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.

  • why are my bounding boxes wrong? – ziggy Oct 3 '17 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 Oct 3 '17 at 12:49
  • im going to delete the layer, project it in postgis and bring it in as 4326 – ziggy Oct 3 '17 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....

  • 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 Oct 4 '17 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 Oct 4 '17 at 1:20
  • @AlexLeith you were correct I removed the css file and it got way out of whack – ziggy Oct 4 '17 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 Oct 5 '17 at 22:05
  • Adding the css to my original question did not fix my original code though. It must have something else – ziggy Oct 6 '17 at 2:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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