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.

  • 1
    Welcome to GIS StackExchange! How much Leaflet experience do you have? What have you done so far?
    – R.K.
    Commented Feb 21, 2014 at 1:44
  • I've no experience with Leaflet or OpenGeo. I played around with getting a Leaflet map started some more last night, but still haven't figured out which tile.layer URL I'm supposed to be using with it or if I've even correctly made a tile.layer. I'm able to make a map with GeoExplorer and it works just fine, but I've yet to figure out how to get either a map or my shape files to show up in Leaflet. The URL I've tried using with leaflet doesn't work L.tileLayer('', { I've tried several variations of the preceding URL with no luck.
    – kjac1985
    Commented Feb 21, 2014 at 20:22
  • I found a tutorial that I was using to get a tile.layer started for Leaflet, this is what I've been going by nesstar.com/help/4.0/server/mapping/publishing-maps.html
    – kjac1985
    Commented Feb 21, 2014 at 20:24
  • A suggestion is to start more slowly, and build experience in Leaflet and OpenGeo separately. Then integrate them once you are more familiar with both. At the moment, debugging will be a nightmare as there will be so many places to look Commented Oct 22, 2014 at 0:59

2 Answers 2


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.)


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("", {
    layers: 'opengeo:Parcelnew',
    format: 'image/png',
    transparent: true

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.