I was just able to get a GeoServer WFS layer, which is a Grid shapefile (polygon) designed to overlay a basemap, inserted into my javascript code for a web mapping app. Both the Grid and the basemap for my app are set to WG84/EPSG:4326 The Grid shows up, but it doesn't cover the entire area of my basemap. Would this be something I need to configure in the GeoServer Admin console (I was thinking it might be related to the bounding box or zoom)? Would I need to change it in QGIS perhaps and reload it to GeoServer (if so what could I change). I have tested it in QGIS, GeoExplorer, and the Layer Preview (in openlayers) with the same basemap as my app. But the basemap in my app is coming from the esri-leaflet-geocoder.js/css plugin and arcgisOnline (REST service) for the geocoder and it can almost endlessly scroll right or left. Could that be the issue (I noticed that the GRID does in fact cover the entire work but only within the bounds of my initial view)? In addition, there are some styling issues with my grid. I need to make the lines thinner and more opaque. What's the best way to do that? Below is the code portion for my basemap:

<div id="map"></div>
<div id="basemaps-wrapper" class="leaflet-bar">
  <select name="basemaps" id="basemaps" onChange="changeBasemap(basemaps)">
    <option value="Topographic">Topographic<options>
    <option value="Streets">Streets</option>
    <option value="NationalGeographic">National Geographic<options>
    <option value="Oceans">Oceans<options>
    <option value="Gray">Gray<options>
    <option value="DarkGray">Dark Gray<options>
    <option value="Imagery">Imagery<options>
    <option value="ShadedRelief">Shaded Relief<options>


var map = L.map("map", {drawControl: true}).setView([35.46, -93.50], 3);

var layer = L.esri.basemapLayer("Topographic", {
  maxZoom: 19,
  minZoom: 3,

var layerLabels;

function setBasemap(basemap) {
  if (layer) {

  layer = L.esri.basemapLayer(basemap);


    if (layerLabels) {

    if (basemap === 'ShadedRelief'
      || basemap === 'Oceans'
      || basemap === 'Gray'
      || basemap === 'DarkGray'
      || basemap === 'Imagery'
      || basemap === 'Terrain'
    ) {
    layerLabels = L.esri.basemapLayer(basemap + 'Labels');

Currently, to solve this issue, I was forced to do 2 things. First, I had to set the zoom in my map parameter options to 3 (var map = L.map("map", {drawControl: true}).setView([35.46, -93.50], 3);) and then do the same in my basemapLayer parameter options like such:

var layer = L.esri.basemapLayer("Topographic", {
maxZoom: 19,
minZoom: 3,

I then had to use the setMaxBounds method to limit how far the user could scroll east or west:

map.setMaxBounds([[90.0, -180.0], [-90.0, 180.0]]);

When the WFS is launches, the basemap now stays within the bounding box parameters of the WFS, as set in GeoServer. Although I think a better fix would be to have the WFS adjust to the reset of the coordinates everytime the user pans past the international dateline, this works for the time being. Hopes this helps someone in the future.

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.