CODEWITHSUNDEEP
jqueryhtmlajaxopenlayers
cedric
cedric

Reputation: 21

How to pass GeoJson data to a div out of the map

With OpenLayers3, I'm displaying dynamically on a map points from a geojson depending on the extend of the map which works fine. See code below:

var geoJSONFormat = new ol.format.GeoJSON();
var vectorSource = new ol.source.Vector({
    loader: function(extent) {
        var url = 'restaurant-geojson.php' + '?bbox=' + extent.join(',') ;
       $.ajax({
           url: url,
           success: function(data) {
               var features = geoJSONFormat.readFeatures(data);
               vectorSource.addFeatures(features);
           }
       }); 
    },
    strategy: ol.loadingstrategy.bbox
});
var vector = new ol.layer.Vector({
    source: vectorSource,
    style: new ol.style.Style({
        image: new ol.style.Circle({
            radius:6,
            stroke: new ol.style.Stroke({
                color: 'rgba(0, 0, 255, 1.0)',
                width: 2
            }),  
        })
    })
});
var raster = new ol.layer.Tile({
    source: new ol.source.OSM()
});

var map = new ol.Map({
    layers: [raster, vector],
    target: document.getElementById('map'),
    view: new ol.View({
      projection: 'EPSG:4326',
      center: [-79.80,22.10],
      maxZoom: 19,
      zoom: 12
    })
  });

  map.getView().on('change:resolution', function(evt){
    vectorSource.clear();

  });

Now I would like to also display the data of these points in a div out of the map. So each time the vectorsource is created (when loading and then on zoom or pan map) I would like the div displaying the points to be updated too. Is there a way to achieve this? Do I need to add some ajax inside the "success" of my ajax in the vectorSource? Do you have any example?

Upvotes: 0

Views: 84

Answers (1)

cedric
cedric

Reputation: 21

Ok so finally managed to do it. inside the success of ajax just add:

$.each(data.features, function (key, val) {
      geometry = val.geometry; 
      properties = val.properties;
      $("#name").append('<div>' + properties.name +'</div>'); 
    });

Upvotes: 1

Related Questions