CODEWITHSUNDEEP
javascriptopenlayers
Musthafa
Musthafa

Reputation: 632

Display popup from shapefile data

I am using openlayers library and geoserver to display a map on a webpage. I want to fetch the data from the map [ which is an ImageWMS file ] and display as a popup feature as when a user clicks on any points on the map. I am using geoserver layer to display the map and I would like to display the details of that layer as a popup on each map points.

I have created a constructor map function then using that I have added a google map. Then using ol.addLayer method I added a new layer which contains the data. After that I created a select variable for click event and variable popup for displaying the popup. Someone please help me with displaying the data from the below url. 

<!DOCTYPE html>
      <html>
      <head>
      <title>Overlay</title>
      <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
     <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
      <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
      </head>
  <body>
        <div id="map" class="map">
        </div>

    <script>

var map = new ol.Map({
    target: 'map',
   view: new ol.View({
       center: ol.proj.fromLonLat([76.6927, 11.8083]),
       minZoom: 4,
       zoom: 12,
       interactions: ol.interaction.defaults({ altShiftDragRotate:false, pinchRotate:false })
   })
});

var format = 'image/png';

map.addLayer(new ol.layer.ImageWMS({
    source: new ol.source.ImageWMS({
       ratio:1,
       projection:'EPSG:4326',
       url:'url',
       params:{'FORMAT':format,
               'VERSION':'1.1.1',
               STYLES:'',                    
               LAYERS:'layer',
              }
   }),
    style: function(f) {
      return new ol.style.Style({ 
        image: new ol.style.RegularShape({
          radius: 5,
          radius2: 0,
          points: 4,
          stroke: new ol.style.Stroke({ color: "#000", width:1 })  
        }),
        text: new ol.style.Text ({
          text: f.get('id').toString(),
          font: 'bold 11px sans-serif',
        }),
        stroke: new ol.style.Stroke({
          width: 1,
          color: [255,128,0]
        }),
        fill: new ol.style.Fill({
          color: [255,128,0,.2]
        })
      })
    }
  }));
//Interaction
var select = new ol.interaction.Select({
    hitTolerance: 5,
    multi: true,
    condition: ol.events.condition.singleClick
  });
  map.addInteraction(select);


//Select control

var popup = new ol.Overlay.PopupFeature({
    popupClass: 'default anim',
    select: select,
    canFix: true,
    template: {
        title: 
          function(f) {
            return f.get('gwl')+' ('+f.get('id')+')';
          }
    }
  });



map.addOverlay (popup);



    </script>
  </body>
</html>

I need to display a popup whenever a user tries to click on any of the points on the shapefile.

Upvotes: 0

Views: 795

Answers (1)

Mike
Mike

Reputation: 17872

With a WMS source you would use GetFeatureInfo similar to https://openlayers.org/en/master/examples/getfeatureinfo-image.html but instead of the info display below the map you would display in in a popup similar to https://openlayers.org/en/master/examples/popup.html For more control over what data is displayed use {'INFO_FORMAT': 'application/json'}

The ol-ext example you linked uses a vector layer. You could get vector data from your server instead of WMS by using its WFS service, see https://openlayers.org/en/master/examples/vector-wfs.html

Upvotes: 1

Related Questions