Not been able to access my GeoServer with JavaScript. The Leaflet code running natively works in other JavaScript/HTML pages which connect on-line GIS servers. Added the following to web.xml:


Used this tutorial: http://docs.geoserver.org/stable/en/user/gettingstarted/shapefile-quickstart/

All I get are the zoom out and zoom in controls and no map. The OpenLayers preview works on GeoServer.

Can you help with the code below?

  <title>A Leaflet map!</title>
  <link rel="stylesheet" href="http://localhost/css/leaflet.css"/>
  <script src="http://localhost/leaflet/leaflet.js"></script>
    #map{ height: 100%; }
  <div id="map"></div>
var rootUrl = 'http://localhost:8080/geoserver/nyc_roads/OWS';
var map = L.map('map').setView([51.505, -0.09], 13);
var defaultParameters = {
    service: 'WFS',
    version: '1.0.0',
    request: 'GetFeature',
    typeName: 'nyc_roads:nyc_roads',
    maxFeatures: 200,
    outputFormat: 'text/javascript',
    format_options: 'callback: getJson'


var parameters = L.Util.extend(defaultParameters);
    url: rootUrl + L.Util.getParamString(parameters),
    dataType: 'jsonp',
    jsonpCallback: 'getJson',
    success: handleJson
function handleJson(data) {
    L.geoJson(data, {
        onEachFeature: onEachFeature,
        pointToLayer: function (feature, latlng) {
            return L.circleMarker(latlng, geojsonMarkerOptions);
            //return L.marker(latlng);
  • 1
    if the geoserver preview is working then there is nothing wrong with your geoserver setup - but these previeww examples (as I recall) show WMS tiles, whereas the code you posted seems to be using geoserver to serve WFS and parse geojson. What error are you getting in the console? Where is this failing? Is it a server error, or something in Leaflet? What data is returned? – toms Nov 10 '15 at 16:39
  • I am embarrassed to say that I do not know where to look for the errors. – hahobson Nov 11 '15 at 20:14
  • a couple things to try, 1) open the console (F12 in all major browsers) and see if there are any errors reported. 2) Also in this panel, check the network tab and see what response you get from the ajax request. 3) check the server error logs and see what you find. 4) in the handleJson function, add the word "debugger;" this will halt execution at that point (if it gets that far). Then, go to the console and type the word "data"; this will let you inspect that variable and see what it contains (if anything). – toms Nov 11 '15 at 22:41
  • Using F12 tells me "ReferenceError: $ is not defined". The only place where there is a "$" is here "$.ajax({" Checking the other now. – hahobson Nov 13 '15 at 10:53
  • Network all states 304 – hahobson Nov 13 '15 at 11:29

I just got a basic Leaflet webpage setup and working after hacking away at it for a long time before finally giving up and asking for help on StackOverflow (the Leaflet.com quickstart tutorials do not have working code, or I may have missed something there where it talks about the #map properties inside style tags). Check out this stackoverflow question for a working starting point: Note that I have leaflet.js and leaflet.css in the same folder with my webpage and am just running it locally on my machine (it is contacting a tile server though): https://stackoverflow.com/questions/38044652/leaflet-i-cannot-seem-to-get-the-basic-examples-working

Also note that I have taken it down to the very basics, not using jquery or anything else. I had made the mistake of trying to build too much without making sure the basics were working, and they weren't. After fixing some javascript errors, I still wasn't seeing anything on the map div. After changing the #map properties in the style tags, it works. I see your code doesn't have as much defined for #map, that may be part of the problem too.

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.