[GIS] Getting map from GeoServer and using in Leaflet

geojsongeoserverleafletwfswms

I would like to get a map in JSON or GeoJSON format from a GeoServer. I am already able to work, but in the image format, however this does not serve me, because I need to iterate with the map, putting popups, markers etc.

Here is my code working with image/png, but how work with JSON or GeoJSON?

stComerciaisLayer= L.tileLayer.wms("http://172.25.131.53:8080/geoserver/wms/", {
        layers: 'IGEO:setor_comercial_geo',
        format: 'image/png',
        transparent: true,
        attribution: "Algum texto de teste"
      }).addTo(map);

Best Answer

I've built a script that allows layers to be pulled in as WMS and GeoJSON within the same script, essentially allowing each layer to have a picture (WMS) and interactivity (GeoJSON).

The app is internal to our network, so here's my best explanation at the code (which I think I can post on Github if you want to see more).

Within the of my main webpage, reference the script for the WMS/GeoJson layer, as well as jquery:

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>

<script src="layers/utilization.js"></script>

And here's the full script for the 'utilization' layer that adds everything - including data-driven tooltips- to the map:

function load_utilization() {
    function getJsonCurrUtil(data) {
        console.log("getJson fired");
        console.log("callback function fired");
    }

    var rootUrl = 'http://servername:8080/geoserver/dps-arcgisdev01/ows';

    var defaultParameters = {
        service : 'WFS',
        version : '1.0.0',
        request : 'GetFeature',
        typeName : 'dps:current_utilization',
        maxFeatures : 500,
        outputFormat : 'text/javascript',
        format_options : 'callback: getJsonCurrUtil',
        srsName : 'EPSG:4326'

    };

    var parameters = L.Util.extend(defaultParameters);
    //console.log(rootUrl + L.Util.getParamString(parameters));
    $.ajax({
        jsonp : true,
        url : rootUrl + L.Util.getParamString(parameters),
        dataType : 'jsonp',
        jsonpCallback : 'getJsonCurrUtil',
        success : handleJson

    });
    //adds geojson to map for interactivity

    var group = new L.featureGroup().addTo(map);
    var geojsonlayer;

    function handleJson(data) {

        //console.log(data);
        geojsonlayer = L.geoJson(data, {
            onEachFeature : function(feature, layer) {
                if (feature.properties && feature.properties.abbreviation) {
                    layer.bindPopup("<font size=+2><b>" + feature.properties.abbreviation + "</font></b><br>" + "<font size = 2><b>Percent Utilization: </b>" + feature.properties.perc_utilization + "%" + "<br><b>Capacity: </b>" + feature.properties.Total_OFU + "<br><b>Enrollment: </b>" + feature.properties.enrollment + "</font>", {
                        closeButton : false,
                        offset : L.point(0, -10)
                    });
                    layer.on('mouseover', function() {
                        layer.openPopup();

                    });
                    layer.on('mouseout', function() {
                        layer.closePopup();
                    });
                }
            },

            pointToLayer : function(feature, latlng) {

                return L.circleMarker(latlng, {
                    radius : 8,
                    fillColor : "#ff7800",
                    color : "#000",
                    weight : 1,
                    opacity : 0,
                    fillOpacity : 0.0
                });

            }
        }).addTo(group);
        //map.fitBounds(group.getBounds());
    }

    //for the WMS picture
    var currUtil = L.tileLayer.wms('http://servername:8080/geoserver/dps-arcgisdev01/ows?', {
        layers : 'dps:current_utilization',
        transparent : true,
        format : 'image/png',
        zIndex : 5,
        opacity : 1
    }).addTo(map);
    topPane.appendChild(currUtil.getContainer());
    console.log("utilization added");
}

I'd have to dig to find the post on stackoverflow where this originated, but it works pretty well. There's likely an easier way to do this, but my coding skills aren't there yet...

Related Question