JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/1.1.0/proj4js-combined.js"></script>
<body onload="init()">
<div id="map"> </div>
</body>
CSS
#map
{
width:500px;
height:500px;
}
JavaScript
function init()
{
}
$.ajax("http://scs10.gdac.isee.mitre.org:8080/geoserver/SCSGWV/wfs?service=WFS&version=1.1.0&request=GetFeature&typeName=SCSGWV:HSI_Data_WGS84&outputFormat=text/javascript&format_options=callback:loadFeatures&maxFeatures=10&srsname=EPSG:3857&CQL_FILTER=%28BBOX%28geometry,7271000,%203704000,%207274000,%203707000%29%29",
{ dataType: "jsonp" }
).done(function ( data ) {
console.log('done will never be called, unfortunately...');
});
function loadFeatures(data) {
var map=new OpenLayers.Map("map");
map.addLayer(new OpenLayers.Layer.OSM());
console.log("jetzt");
var vector = new OpenLayers.Layer.Vector({
});
var geojsonParser = new OpenLayers.Format.GeoJSON(
{
'internalProjection': new OpenLayers.Projection("EPSG:3857),
'externalProjection': new OpenLayers.Projection("EPSG:3857")
});
vector.addFeatures(geojsonParser.read(data));
map.addLayer(vector);
map.zoomToExtent(vector.getDataExtent());
console.log(data);
};