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("", {
        layers: 'IGEO:setor_comercial_geo',
        format: 'image/png',
        transparent: true,
        attribution: "Algum texto de teste"
  • The answer you are looking for might be in the first answer to the following question: stackoverflow.com/questions/25187937/… – TomazicM Feb 23 '18 at 15:14
  • A WMS won't give you maps in JSON of any type - it only gives images. If you want JSON, or other vector data you'll need a WFS – nmtoken Mar 16 '18 at 8:17
  • A WMS can give you popups (GetFeatureInfo requests), and markers, different styling depending on some query (SLD), so you don't need vector data at all. It depends whether you want the server to do the work or the client. – nmtoken Mar 16 '18 at 8:21
  • @nmtoken give me a basic example please, a jsffidle or other, I'm still trying but nothing yet. Can you help me please? I'm trying use WMS with GetFeatureInfo – Elton Santos Mar 16 '18 at 14:02

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));
        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) {

        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.on('mouseout', function() {

            pointToLayer : function(feature, latlng) {

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


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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.