I'm trying to get GeoJSON according to the selection of a particular area. For example, if I have selected a built up area it will only show that area . I'm calling GeoJSON data through a PHP page, and I have created the plunker for this (this is the example).

The main problem I'm having is how to assign the vector value from another page to show the GeoJSON.

See this is my JavaScript page where I'm trying to assign the data:

       $.getJSON("php/drpdwn.php", success = function(data){
            var items="";
            for(var i = 0; i< data.length; i++){
                items +="<option value='"+data[i].id+"'>" + data[i].name+"</option>";
      var selectedValue = $(this).find(":selected").text();
   if( selectedValue == "Landuse/landcover") {

              $.getJSON("php/lulc_db.php",success = function(data){              
                  var items="";
                  for(var i = 0; i< data.length; i++){
                      items+="<option value='"+data[i]+"'>" + data[i] +"</option>";
                  var myNode = document.getElementById("a2_title");
                  while (myNode.firstChild) {
                  // ADD NEW ITEMS
        $.ajax('php/geojson.php?layer=Built Up').then(function(response) {

  var geojsonFormat = new ol.format.GeoJSON();
  var features = geojsonFormat.readFeatures(response,
      {featureProjection: 'EPSG:4326'});

And this is the way I'm adding vector layer:

         var vectorSourcec = new ol.source.Vector({
              format: new ol.format.GeoJSON(),
    var vector = new ol.layer.Vector({

var map = new ol.Map({
  layers: [new ol.layer.Tile({
            source: new ol.source.OSM()
          }), vector],
  renderer: 'canvas',
target: document.getElementById('map'),

            view: new ol.View({
            Projection: 'EPSG:4326',
                center: ol.proj.fromLonLat([79.17436, 21.01668]),
  zoom: 5

Please improve me here where I'm doing.

  • You said " I'm calling geojson data through php page ", how is that? i don't see it. Commented Apr 29, 2016 at 5:57
  • @ShahzadBacha not in the plunker ..i'm getting that result in my project ..In plunker ..calling it through json there is multipolygon.json file...just for information i write here
    – ads
    Commented Apr 29, 2016 at 6:25

1 Answer 1


Once you have your geojson back use the ol.format.GeoJSON() to parse the object and create the features.

var format = new ol.format.GeoJSON();
var myGeoJsonObj = ....asign the geojson result here
var myGeoJsonFeatures = format.readFeatures(myGeoJsonObj ) 

and then you may place your features in a vector layer using. vecLayer.getSource().addFeatures(myGeoJsonFeatures);

@Shahzad Bacha is correct. No call to get geojson within your plunker

UPDATE check this fiddle to see your data in action

  • Please check the pluncker again in script.js file i'm calling multipolygon.json
    – ads
    Commented Apr 29, 2016 at 6:35
  • plnkr.co/edit/y21BMZ4Z2PANLVAyuw7k?p=preview check this i have tried your way it doesn't work .I'm getting an error vectorSources.getSource is not a function
    – ads
    Commented Apr 29, 2016 at 6:59
  • there are several errors within your plunker. Your get request is never called. Check the network within the firebug cosnole, no request is executed
    – pavlos
    Commented Apr 29, 2016 at 8:21
  • I have updated my answer to provide you a fiddle using your geojson data.
    – pavlos
    Commented Apr 29, 2016 at 8:34
  • Please the question ...i'm able to call directly on page ` var vectorSourcec = new ol.source.Vector({ format: new ol.format.GeoJSON(), Projection: 'EPSG:4326' url : 'php/geojson.php?layer=Built Up' });` but i'm not able to call dynamically ..please correct me on my code
    – ads
    Commented Apr 29, 2016 at 8:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.