Your Workflow? Put geojson into script or access geojson via WFS?

Harald Schernthanner

unread,

Aug 17, 2014, 12:53:25 AM8/17/14

to leafl...@googlegroups.com

Dear Leaflet user group. I would like to know your opinion. To get mass vector data (I have about 4000 polygons) in GeoJson into leaflet what to you prefer? Is ist better to publish data via Geoserver and the integrate them via Ajax callback in a script or to put the data in an own js. File and then access this .js file in a leaflet script? What is your workflow?

If you integrate GeoJson via Geoserver as WFS into leaflet, to you have a working sample proxy.cgi to workaround crosspostings or any sample script to lool at?

Matt Travis

unread,

Aug 18, 2014, 4:00:54 AM8/18/14

to leafl...@googlegroups.com

Hi Harald

Check out the code used by Alex Gleith in answer to a similar question. It worked for me.

http://gis.stackexchange.com/questions/64406/getting-wfs-data-from-geoserver-into-leaflet/89884#89884

Matt

Harald Schernthanner

unread,

Aug 18, 2014, 8:50:45 AM8/18/14

to leafl...@googlegroups.com

Hi Matt, Hi Leaflet community

Thanks for the link to the code. I tried, but the gejson does not load. I get a 404 error, when I check the url in the java script console of chrome.
Maybe you or sombody else can give me a hint? The WFS is working, a get capabilites request answers delivering the geojson objects:
http://81.20.139.28:8080/geoserver/Potsdam/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=Potsdam:BV_web&maxFeatures=50&outputFormat=application/json

Here you can check the url: http://www.schernthanner.de/wfs_leaflet_test.html

Any help is appreciated!!! Thanks!

This is my code:

<!DOCTYPE html>
<html>
<head>
    <title>Leaflet Layers Control Example</title>
    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" type="text/css" href="http://schernthanner.de/leaflet-0.7.2/leaflet.css" />

    <style>
        #map {
            width: 800px;
            height: 500px;
        }

        .info {
            padding: 6px 8px;
            font: 14px/16px Arial, Helvetica, sans-serif;
            background: white;
            background: rgba(255,255,255,0.8);
            box-shadow: 0 0 15px rgba(0,0,0,0.2);
            border-radius: 5px;
        }
        .info h4 {
            margin: 0 0 5px;
            color: #777;
        }

        .legend {
            text-align: left;
            line-height: 18px;
            color: #555;
        }
        .legend i {
            width: 18px;
            height: 18px;
            float: left;
            margin-right: 8px;
            opacity: 0.7;
        }
    </style>
</head>
<body>
    <div id="map"></div>

    <script src="http://schernthanner.de/leaflet-0.7.2/leaflet.js"></script>
    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script type="text/javascript">

        var map = L.map('map').setView([52.41, 13.077], 15);

        L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
            maxZoom: 18,
            attribution: 'Map data © <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://mapbox.com">Mapbox</a>',
            id: 'examples.map-20v6611k'
        }).addTo(map);

var owsrootUrl = 'http://81.20.139.28:8080/geoserver/web/ows';

var defaultParameters = {
    service : 'WFS',
    version : '1.0.0',
    request : 'GetFeature',
    typeName : '<Potsdam:BV_web>',
    outputFormat : 'text/javascript',
    format_options : 'callback:getJson',
    SrsName : 'EPSG:3857'
};

var parameters = L.Util.extend(defaultParameters);
var URL = owsrootUrl + L.Util.getParamString(parameters);

var WFSLayer = null;
var ajax = $.ajax({
    url : URL,
    dataType : 'jsonp',
    jsonpCallback : 'getJson',
    success : function (response) {
        WFSLayer = L.geoJson(response, {
            style: function (feature) {
                return {
                    stroke: false,
                    fillColor: 'FFFFFF',
                    fillOpacity: 0
                };
            },
            onEachFeature: function (feature, layer) {
                popupOptions = {maxWidth: 200};
                layer.bindPopup("Popup text, access attributes with feature.properties.ATTRIBUTE_NAME"
                    ,popupOptions);
            }
        }).addTo(map);
    }
});

    </script>
</body>
</html>

Matt Travis

unread,

Aug 19, 2014, 5:20:16 AM8/19/14

to leafl...@googlegroups.com

Hi Harald

There's a few things here you can try. First check my comments in the code below. Change yours to this.

var owsrootUrl = 'http://81.20.139.28:8080/geoserver/web/ows'; //remove web

var defaultParameters = {

service : 'WFS',

version : '1.0.0',

request : 'GetFeature',

typeName : 'Potsdam:BV_web', // remove angular brackets

outputFormat : 'text/javascript',

format_options : 'callback:getJson',

SrsName : 'EPSG:'4326' //use this instead of 3857 - explantion here: http://goo.gl/fZc7OV

Lastly, did you definitely enable JSONP? http://gis.stackexchange.com/questions/57494/geoserver-2-3-how-to-enable-jsonp

I changed your code and I was getting an error message in the console that makes me think that the jsonp isn't enabled.

Hope this helps.

Matt

Harald Schernthanner

unread,

Aug 19, 2014, 10:08:01 AM8/19/14

to leafl...@googlegroups.com

T

Harald Schernthanner

unread,

Aug 19, 2014, 10:09:24 AM8/19/14

to leafl...@googlegroups.com

Hi again,

I changed the code as suggested and enabled jsonp. I get no more errors in the java script console. put still the geojson polygons won´t show up. I also changed the EPSG code as suggested. I also restartet Tomcat 7, maybe I did not properly configure the web.xml to enable jsonp support. I attach the web.xml - maybe you could habe a look at or maybe you have another idea why it is not working??

Here is the url again. In the Open Layers preview the polygons show up: http://81.20.139.28:8080/geoserver/Potsdam/wms?service=WMS&version=1.1.0&request=GetMap&layers=Potsdam:BV_web&styles=&bbox=13.066919899959638,52.587039561090215,13.087914400413657,52.601543945345675&width=512&height=353&srs=EPSG:4326&format=application/openlayers

web.xml

Matt Travis

unread,

Aug 20, 2014, 2:36:36 AM8/20/14

to leafl...@googlegroups.com

Your web.xml does look slightly different than normal - see attached. Just uncomment the jsonp section on line 35 don't add it at the top.

I've also attached my working wfs example.

hth

Matt

web.xml

wfs_ex.html

Harald Schernthanner

unread,

Aug 20, 2014, 8:38:30 AM8/20/14

to leafl...@googlegroups.com

Hi Matt,

Thanks for your support. Finally it works: http://schernthanner.de/wfs_leaflet_test3.html

I changed your script and changed the web.xml and now geojson is loading from my geoserver!

Here is my wfs example: http://schernthanner.de/wfs_leaflet_test3.html

Greetings from Potsdam, Germany,

Harald

Matt Travis

unread,

Aug 20, 2014, 5:09:02 PM8/20/14

to leafl...@googlegroups.com

Really glad you got it working Harald and that I could help out.

It's a great feeling when it all finally comes together.

Matt

Reply all

Reply to author

Forward