2

I am just starting to work with geoserver. I am trying to do the same openlayers-geoserver example but using leaflet to view the map instead of openlayers:

Publishing a shapefile

This code is not working:

<!DOCTYPE html>
<html>
<head>
<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>
<title>Leaflet Web Map</title>
<style>
#map {
width: 506px;
height: 768px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map').setView([988008, 213104], 3);

L.tileLayer.wms("http://localhost:8080/geoserver/nyc/wms", {
    layers: 'nyc_roads',
    format: 'image/png',
    version: '1.1.0',
    transparent: true,
attribution: "Geoserver - Leaflet Example",
    tiled: 'true'
}).addTo(map);
</script>
</body>
</html>

I just get this clean-empty screen in linux ubuntu browser:

enter image description here

What could be the problem?

2

You're not using the right coordinate system. Even though Leaflet uses EPSG:3857 internally for calculating tile bounds coordinates and the such, it uses EPSG:4326 (by default, see the documentation about L.CRS).

Replace [988008, 213104] with whatever EPSG:4326 equivalent you have. You'll have to do extra L.CRS-related work if your Geoserver instance is rendering tiles in anything else than EPSG:3857.

  • Thanks Ivan. I just change the line to: var map = L.map('map').setView([-73.98167, 40.75205], 3); but still have the same screen – leoruizb Feb 13 '16 at 23:45
  • 1
    Remember Leaflet uses Lat-Lng, not Lng-Lat. You're pointing at antarctica. – IvanSanchez Feb 14 '16 at 11:55
  • Thanks Ivan. I change the line to: var map = L.map('map').setView([40.75205, -73.98167], 3); but still get the same clean screen. Do I have to put the index.html file into some special folder? – leoruizb Feb 15 '16 at 23:28
  • Everything looks good to me now. Does the WMS server have a public IP in order to have a look? – IvanSanchez Feb 16 '16 at 8:39
0

Your browser most likely blocks requests to content on a different port. Check https://stackoverflow.com/questions/18642828/origin-http-localhost3000-is-not-allowed-by-access-control-allow-origin

0

2 things here.

1) You are not specifying Latitude/Longitude values for the setView method, which are required. Lat has a range of -90 to 90, and Long -180 to 180.

2) A zoom level of 3 encompasses an area far larger than New York, so large that it is quite possible you wouldn't be able to see overlayed borders of the US states let alone the roads within a particular city. This then results in a blank canvas because what you are viewing is too small in scale to be seen on the map at the zoom level you are using.

Try replacing your line of code var map = L.map('map').setView([988008, 213104], 3); with this:

var map = L.map('map').setView([40.715646, -73.99933], 14);

Use the zoom control if you need to, but you should now be able to see your layer.

0

Thanks to everyone. Finally my friend Javier from Puerto Rico gave me some recommendations together with yours recommendations I could solve my problem. I attached the code finally worked:

<!DOCTYPE html>
<html>
<head>
<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>
<title>Leaflet Web Map</title>
<style>
#map {
width: 506px;
height: 768px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map').setView([40.75205, -73.98167], 14);

L.tileLayer.wms("http://localhost:8080/geoserver/nyc_roads/wms", {
    layers: 'nyc_roads:nyc_roads',
    format: 'image/png',
    version: '1.1.0',
    transparent: true,
    attribution: "Geoserver Example",
    tiled: 'true'

}).addTo(map);
</script>
</body>
</html>

and I had to reproyect the layer from 2908 to 4326.

Thanks again bye Leo

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.