Pass json data to JavaScript without creating new object

Question

I am querying json data from database then performing some filtering and further procedures. After that I want to display that data on map, so I am passing it through JSInterop to JavaScript. Everything seems to be working except that on each method execution I am getting new map on my webpage. So after executing method 4 times, I am having 4 maps on web page.

Please comment, if additional code is necessary...

Index.razor:

<div>
  <select id="layer-select" style="visibility:hidden;">
    <option value="osm" selected>Open Street Map</option>
  </select>

  <div class="card-body p-0">
    <div id="map"></div>
    <div id="popup" class="ol-popup">
      <a href="#" id="popup-closer" class="ol-popup-closer"></a>
      <div id="popup-content"></div>
    </div>
  </div>
</div>

Index.razor.cs:

[Inject] IJSRuntime JSRuntime { get; set; }
...

private async Task UpdateData()
{
  this.SelectedDate = this.SelectedDate.Value.AddDays(1);

  this.FilteredDataRecords = this.DataRecords
   .Where(w => w.TimeNow.Date == SelectedDate.Value.Date && (w.Latitude != 0 || w.Longitude != 0))
   .OrderBy(o => o.TimeNow)
   .ToList();

  string jsonData = JsonSerializer.Serialize(this.FilteredDataRecords);

  await JSRuntime.InvokeAsync<object>("olMap.showMap", jsonData);
}

map.js:

window.olMap = {
  showMap: function (jsonData) {

    var HereLayers = [
      {
        base: 'base',
        type: 'maptile',
        scheme: 'osm',
      },
    ];

    ...

    var vectorLayer = new ol.layer.Vector({
     source: loadMarineData(JSON.parse(jsonData)), //JSON.parse(jsonData)
      visible: true,
      style: new ol.style.Style({
        stroke: new ol.style.Stroke({ color: '#d12710', width: 4 })
      })
    });

    var map = new ol.Map({
      overlays: [overlay],
      target: 'map',
      layers: layers,
      view: new ol.View({
        center: ol.proj.fromLonLat([25.2849, 60.0917]),
        zoom: 8
      })
    });

    map.addLayer(vectorLayer);
    map.addLayer(nauticLayer);

   ....

    var select = document.getElementById('layer-select');

    function onChange() {
      var scheme = select.value;
      for (var i = 0, ii = layers.length; i < ii; ++i) {
        layers[i].setVisible(HereLayers[i].scheme === scheme);
      }
    }

    select.addEventListener('change', onChange);

    onChange();
  }
};

Answer 1

i've not used this map engine before but i would suggest

var map = new ol.Map({
  overlays: [overlay],
  target: 'map',
  layers: layers,
  view: new ol.View({
    center: ol.proj.fromLonLat([25.2849, 60.0917]),
    zoom: 8
  })
});

should be

if(! document.map){
     document.map = new ol.Map({
      overlays: [overlay],
      target: 'map',
      layers: layers,
      view: new ol.View({
        center: ol.proj.fromLonLat([25.2849, 60.0917]),
        zoom: 8
      })
    });
}
const map = document.map

this basically says get the already created map and only create a new map it if doesn't exist

just remember that because you are using the same map over and over again you will need to clean up the previous runs yourself

ie before

map.addLayer(vectorLayer);
map.addLayer(nauticLayer

do

for(const layer of map.getLayers())
{
    map.removeLayer(layer)
}

(note this is example code to demonstrate the idea, not functioning code)

you should also avoid the var keyword instead you should use const and let var is a hold over from the early days of JS before the introduction of scoping and it has some nasty side effects if you use it in the wrong way