Geoserver 2.10 Openlayers 3 TextSymbolizer label not showing up

I am new to geoserver and sld. I have 2 layers on top of my OSM base layer. One for creating a heatmap and one just for the label. My heatmap and base layer is rendering fine but the label text is not showing up in openlayers. When I preview it in geoserver it is showing up fine but when I try to render it in javascript it only shows on zoom out. I cannot seem to find anything online about this issue.

Here is the SLD:

   <FeatureTypeStyle>
        <Rule>
          <Name>AQI text</Name>
          <Title>AQI Text</Title>
          <Abstract>AQI information</Abstract>
           <TextSymbolizer>
              <label>
                  <ogc:PropertyName>aqi</ogc:PropertyName>
            </label>
         </TextSymbolizer> 
        </Rule>
      </FeatureTypeStyle>

Here is the snapshot of the preview on geoserver:

Here is the javascript openlayers code:

var londonLonLat = [-0.118092, 51.509865];
    var londonWebMercator = ol.proj.fromLonLat(londonLonLat);

    var layers = [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        }),
        new ol.layer.Image({
          //extent: [-13884991, 2870341, -7455066, 6338219],
          source: new ol.source.ImageWMS({
            url: 'http://159.203.81.20:8080/geoserver/wms',
            params: {'LAYERS': 'tiger:shapefile'},
            serverType: 'geoserver'
          })
        }),

        new ol.layer.Image({
          //extent: [-13884991, 2870341, -7455066, 6338219],
          source: new ol.source.ImageWMS({
            url: 'http://159.203.81.20:8080/geoserver/wms',
            params: {'LAYERS': 'test2:test_text_layer'},
            serverType: 'geoserver'
          })
        })
      ];
      var map = new ol.Map({
        layers: layers,
        target: 'map',
        view: new ol.View({
          center: londonWebMercator,
          zoom: 10
        })
      });

Here is a snapshot of the page:

Here is a snapshot on zoom out:

Solved a similar problem by adding predefined bounding points (like anchors) to my database and then feed those points in geoserver as my bounding box:

• Create 4 points (ex: North, South, East, West) which will define a box big enough to fit all of your data's visualization inside.
• In geoadmin find your layers bounding box and choose calculate from data.
• In your sld you can define a rule to make those bounding points invisible.

That recalculates the bounding box in which the geoserver will display your data in any projection.