I've installed OpenGeo Suite, how do I use it with Leaflet?

Question

I've just finished installing OpenGeo Suite on my VM Ubuntu web server. I'd like to be able to use Leaflet from leafletjs.com to view my maps with on my mobile devices. I'm supposed to create an HTML page, I assume, and use different snippets of code to make my map with it, however I don't know how to link the OpenGeo and Leaflet together.

It mentions using a tile layer URL, however I cannot figure out how to create this URL or where to find it. Also, do I have to create a new Leaflet HTML page for every map I want or am I way off? I'm sure I am missing some key elements of exactly how OpenGeo works, but I'm having a hard time finding any beginners guides and the documentation isn't very beginner friendly in some areas.

Answer 1

What you are encountering is just the initial learning curve. And with GeoServer (which the OpenGeo Suite uses) the learning curve is pretty nice. I'll try to list some concepts for you, and then if you can send me a URL or IP for your server, I can send you an example that uses your layers. For a deep dive in, check out my source code here: https://github.com/gccgisteam/maps-website. These are complicated examples, but use a lot of nice features out of GeoServer.

Here's a really simple map, just Open Street Maps and One GeoServer layer: https://gist.github.com/alexgleith/8ff4794153c7fc0124b3

View it live here: http://rawgit.com/alexgleith/8ff4794153c7fc0124b3/raw/ac7b23726798d0d0c74a3c74912e18f67f1598ab/index.html

Now this example is as simple as it gets. You can add any of the Leaflet plugins or zoom buttons, or whatever.

So, as promised, here's my list of concepts:

1. OpenGeo Suite installs GeoServer, Postgres+PostGIS and GeoExplorer
2. GeoServer runs in Tomcat, which is a Java servlet container
3. GeoServer consumes spatial data (from your file system or a database) and produces a standard API to access that information
4. Two main ways to access information are: a) as a rendered image (WMS/WMTS) or vector data (WFS)
5. You want to use WMS for displaying many features, and WFS for displaying only one, or for editing (but you can't really edit with Leaflet).
6. If you use GeoServer then you want to understand GeoWebCache, which is a intermediary between the consumers of WMS and your server, and it caches things and makes them fast.

Leaflet is just a javascript library for presenting WMS and other data. You should learn what GeoJSON is and how to get it out of a WFS request, but that's for later.

For now, get my GIST and change the WMS layer to point at your server and layer (remember that you have a layer that is referenced with WORKSPACENAME:LAYERNAME). You also probably don't have a reverse proxy in place (which means you can get rid of the :8080) so you will have a URL or IP like http://myserver.com:8080/geoserver.

I hope that helps!

(Oh, final plug, if you get a reverse proxy working and set up Cross Origin Resource Sharing then you can use my new tool, BootLeaf GeoServer. Let me know if I should write something up about reverse proxies and CORS.)

Answer 2

One of the Components of the OpenGeo Suite, is a Geoserver Installation, which serves out data via the WMS and WFS protocol.

You can show this WMS service as a TileLayer.WMS class in your Leaflet Application.

If you want to show the opengeo:Parcelnew layer, the following code should work to instantiate a WMS Layer:

var wmsLayer= L.tileLayer.wms("http://192.168.2.16:8088/geoserver/wms", {
    layers: 'opengeo:Parcelnew',
    format: 'image/png',
    transparent: true
});