How to update my map with the restored features from JSON format?

Question

I'm trying to implement a CRUD that have a map OpenLayers.

1. First, I drawed and saved the features with writeFeatures().

2. Second, I'm trying to show the polygon that I drawed, and here is my problem:

• After I set the map.setLayer my map doesn't show the features. I would like that when I select the product in the list, my map show the features that I read from my database, in format JSON. I saved using WriteFeatures();

• Could I need a loop to iterate each item of array?

What am I doing wrong?

My configuration:

• Laravel v6.18.22 with bootstrap;
• OpenLayers v6.3.1

In my HTML has:

<div id="map" class="map" </div>

  <script>
    const getFeatur = @json(route('homeController.getLavouras'));
  </script>

 <script type="application/javascript" >
  my_map.display();
 </script>

In my external JavaScript file (my_map.js) has:

    import 'ol/ol.css';
    import Feature from 'ol/Feature';
    import Geolocation from 'ol/Geolocation';
    import Map from 'ol/Map';
    import Point from 'ol/geom/Point';
    import View from 'ol/View';
    import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style';
    import {OSM, Vector as VectorSource} from 'ol/source';
    import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
    import VectorContext from 'ol/render/VectorContext';
    import GeoJSON from 'ol/format/GeoJSON';    
var my_map = {                       // <-- add this line to declare the object
    display: function () {           // <-- add this line to declare a method 
      
      var view = new View({
        center: ol.proj.fromLonLat([-49.450270, -15.496072]),
        zoom: 6 ,
      });
      
      var map = new Map({
        layers: [
          new TileLayer({
            source: new OSM(),
          }) ],
        target: 'map',
        view: view,
      });
      
      new VectorLayer({
        map: map,
        source: new VectorSource()
      });
       
document.getElementById('produtoid').onchange = function(){
var produtoid = document.getElementById('produtoid').value; 
var _token = $('input[name="_token"]').val();
        $.ajax({
                        url:getFeatur,
                        method:"GET",
                        data:{produtoid:produtoid, _token:_token},
                        success:function(result)
                        {             
 
                          var newSource = new ol.source.Vector({
                                        format: new ol.format.GeoJSON(),
                                        features: new GeoJSON().readFeatures(result.dados[0].feature, 
                                            {
                                                dataProjection: 'EPSG:26918',
                                                featureProjection: 'EPSG:3857'
                                             }),
                                        });

                          
                          var nwLayer = new ol.layer.Vector({
                              title: 'My Title',
                              source: newSource,     
                              visible: true,
                          });         
                          map.addLayer(nwLayer); --> I think that here my map has to refresh and show the features. 
                          
                      }            
                  });
                }


}                                // <-- close the method
};                                   // <-- close the object
export default my_map;               // <-- and export the object

Answer 1

There is no concept of map refreshing when it comes to OpenLayers, I think in your case style property is missing in the vector layer object

example vector layer looks like this -

  source: new VectorSource(),
  map: map,
  style: new Style({
    stroke: new Stroke({
      color: 'rgba(255, 255, 255, 0.7)',
      width: 2,
    }),
  }),
});

You can refer to this link here - Vector Layer in OpenLayers

Also, you can just update the source of the vector layer, it will reflect on the map directly, and you don't need to create a new layer every time.