Leaflet load WFS from Geoserver with jsonp

by aidankirrane

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<div id="map"></div>
<br />
<b>Datasource of the WFS-Layer: <a href="http://opengeo.org/" target="_blank">http://opengeo.org</a> </b>

CSS

html { height: 100% }
      body { height: 100%; margin: 0; padding: 0;}
      #map{ height: 85% }

JavaScript

var m= L.map('map').setView([42.2, -71], 0);

var mapQuestAttr = 'osm tiles';
var osmDataAttr = 'Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
var mopt = {
    url: 'http://otile{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.jpeg',
    options: {attribution:mapQuestAttr + osmDataAttr, subdomains:'1234'}
  };
var osm = L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",{attribution:osmDataAttr});
// Set up the OSM layer
L.tileLayer(
  'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18
  }).addTo(map);

mq.addTo(m);


var rootUrl = 'http://demo.opengeo.org/geoserver/ows';

var defaultParameters = {
    service: 'WFS',
    version: '1.0.0',
    request: 'GetFeature',
    typeName: 'og:archsites',
    maxFeatures: 200,
    outputFormat: 'text/javascript'
   , format_options: 'callback: getJson',
    srsName:'EPSG:4326'

};

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

var group = new L.featureGroup().addTo(m);
var geojsonlayer;
function handleJson(data) {
//    console.log(data);
    geojsonlayer=L.geoJson(data, {
        onEachFeature: function (feature, my_Layer) {
						my_Layer.bindPopup("str.1: "+feature.properties.str1+"<br />cat: "+feature.properties.cat);
					  },
        pointToLayer: function (feature, latlng) {
            //return L.circleMarker(latlng, geojsonMarkerOptions);
			return L.circleMarker(latlng//, geojsonMarkerOptions
			);
            //return L.marker(latlng);
        }
    }).addTo(group);
	m.fitBounds(group.getBounds());
}


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