Setup Leaflet and GeoServer

1,438 views
Skip to first unread message

Solimyr

unread,
Oct 16, 2013, 6:32:29 AM10/16/13
to leafl...@googlegroups.com
Dear All,

I'm new here and really new on WebGIS!!! I have studied a littlebit about the theory of the WebGIs and now I wanna play/learn with a development of a tiny 'local'WebGIS'. 

As I said, I'm new and so I'm going to explain all the steps that I've done! First, I have installed TomCat7 and GeoServer2.4. I have followed the youtube guide available HERE.

Now I have downloaded leaflet.js-0.6.4.zip and I have extracted it in a folder. Now I'm following THIS website. 

I'm reached the start and I already have a problem:

Copy the dist/ directory to the place on your webserver where the embedding page will be served from, and rename it leaflet/ .

I understood that I have to copy the unpack of leaflet.js-0.6.4.zip in a named 'dist' directory, rename it in 'leaflet' and copy somewhere! Actually I'm working in local so I don't know where to put the folder!

I guess that I have to put it in: ..\TomCat\work. I'm saying this because I have seen that there is a Catalina directory and so, I suppose that I have to put there the data. The point is that I don't know how to create the folder in the right way. 

Furthermore, I didn't install PostGIS/Postgres and any other stuff. I have to install them or they are already installed in GeoServer (I have used the 'war' installation file)? 

Sorry for my stupid questions! The theory seems clear around but practically I couldn't find a tutorial that cover server,client, etc... I understand that because it's a big field and there are a lot of possible configurations. I found a good overview HERE.

Thanks all,
Solimyr

 

Diego Guidi

unread,
Oct 16, 2013, 6:37:33 AM10/16/13
to leafl...@googlegroups.com
On Wed, Oct 16, 2013 at 12:32 PM, Solimyr <giannic...@msn.com> wrote:
> I guess that I have to put it in: ..\TomCat\work


try with tomcat\webapps

Diego Guidi

Solimyr

unread,
Oct 16, 2013, 7:06:12 AM10/16/13
to leafl...@googlegroups.com
Thanks for the fast answer. Once that I put on that directory, how could I call that from the http?

Thanks

Diego Guidi

unread,
Oct 16, 2013, 7:08:57 AM10/16/13
to leafl...@googlegroups.com
try to do this thing:
create a folder called "samples" inside tomcat webapps
inside samples folder, create a file called test.html
type inside this file some words like "hello, world"
then type http://localhost:8080/samples/test.html
do you see the words?

Diego Guidi
> --
>
> ---
> You received this message because you are subscribed to the Google Groups
> "Leaflet" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to leaflet-js+...@googlegroups.com.
> For more options, visit https://groups.google.com/groups/opt_out.

Solimyr

unread,
Oct 16, 2013, 8:35:29 AM10/16/13
to leafl...@googlegroups.com
Yes! I could see that! And now I will put in samples the items of the leaflet zip? 

Solimyr

unread,
Oct 16, 2013, 10:24:01 AM10/16/13
to leafl...@googlegroups.com
I got it!

I have created an html file and I put it in the leaflet folder. In the html I wrote:

<HTML> 
     <HEAD> 
         <TITLE> First WebGIS </TITLE> 
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
 <!--[if lte IE 8]>
     <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
 <![endif]-->
     </HEAD> 
     <BODY> 
          <P> Try... </P>
<div id="map" style="height: 800px"></div>
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<script>
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tile.cloudmade.com/afda1fc8c23548c28eeb256f3e08707c/997/256/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
    maxZoom: 18
}).addTo(map);
</script>
     </BODY> 
</HTML>

Thanks to your precious support!!!

Diego Guidi

unread,
Oct 16, 2013, 11:25:38 AM10/16/13
to leafl...@googlegroups.com
On Wed, Oct 16, 2013 at 2:35 PM, Solimyr <giannic...@msn.com> wrote:
> Yes! I could see that! And now I will put in samples the items of the
> leaflet zip?

+1 :)

Diego Guidi

Solimyr

unread,
Oct 17, 2013, 9:05:53 AM10/17/13
to leafl...@googlegroups.com
Sorry Diego,

Do you know where I can find any help to connect Leaflet.js to GeoServer? At this point I have these folder in the TomCat webapps directory:
  • docs
  • geoserver
  • host-manager
  • leaflet
  • manager
  • ROOT
  • samples
Now I wanna connect any shapefile in GeoServer and call it from Leaflet.js. Do you know any website where I can look for?

Thanks,
Solimyr

Diego Guidi

unread,
Oct 17, 2013, 9:14:07 AM10/17/13
to leafl...@googlegroups.com
http://projects.bryanmcbride.com/leaflet/wms_info.html
of course as WMS source you can use your own geoserver

Diego Guidi

Solimyr

unread,
Oct 17, 2013, 9:44:32 AM10/17/13
to leafl...@googlegroups.com
Thanks, do you know where I can see the code?

Diego Guidi

unread,
Oct 17, 2013, 9:59:33 AM10/17/13
to leafl...@googlegroups.com
On Thu, Oct 17, 2013 at 3:44 PM, Solimyr <giannic...@msn.com> wrote:
> Thanks, do you know where I can see the code?
right click => see source code



Diego Guidi

Solimyr

unread,
Oct 18, 2013, 11:22:27 AM10/18/13
to leafl...@googlegroups.com
I was analyzing the code and I get the connection to the GeoServer file. It must be:

var nexrad = new L.TileLayer.WMS("http://suite.opengeo.org/geoserver/usa/wms", {
layers: 'usa:states',
format: 'image/png',
transparent: true
});

This link to the GeoServer folder. In my case will be:


I see that it point to the folder. When it says "layer:'usa:states'", I think it point to the workspace (or store) named 'usa'  and the layer 'states'. In format talk about images format but seems ok also if I suppose that the layers is a shape. If I read on the guide I could see:

WMS image format (use 'image/png' for layers with transparency).

This means that I have always to put that in case I wanna put a transparency. Or the layer is really an image?

Thanks again! 

Solimyr

unread,
Oct 18, 2013, 11:23:46 AM10/18/13
to leafl...@googlegroups.com
Yeah, I didn't write my stupid question! How could I see the usa:states on my geoserver?
Reply all
Reply to author
Forward
0 new messages