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?

Improve this question

4 Answers 4

Reset to default
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.

Improve this answer
4
  • 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
    Commented Feb 13, 2016 at 23:45
  • 1
    Remember Leaflet uses Lat-Lng, not Lng-Lat. You're pointing at antarctica.
    – IvanSanchez
    Commented Feb 14, 2016 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
    Commented Feb 15, 2016 at 23:28
  • Everything looks good to me now. Does the WMS server have a public IP in order to have a look?
    – IvanSanchez
    Commented Feb 16, 2016 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

Improve this answer
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.

Improve this answer
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

Improve this answer

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.