Plotting messages on the map

We get all the messages based on the extent.

ol.source.Vector

This is used to provide a feature source for the layers. In simple terms, it is used to add a marker on the map.
It has the following options:

• loader: This is used to load features like from a remote source. In our case, we are fetching from a remote source using AJAX.
• strategy: This is used to set the strategy to load the features. Default uses ol.loadingstrategy.all, which loads all the features at once.

ol.Feature

A vector object representing the geographic features with a geometry and other attribute properties. It usually has a single geometry property, which in our case is used to add a marker to the specified coordinates using ol.geom.Point, which holds the co-ordinate:

    /* Show messages on the Map */

    var vectorSource = new ol.source.Vector({
      loader: function (extent, resolution, projection) {
        var url = '/message/bbox/' + extent[0] + "," + extent[1] + ","    
         + extent[2] + "," + extent[3];
      // Get all the messages from the server based upon the extent
        $.ajax({
          url: url,
           dataType: 'json',
           success: function (response) {
             if (response.error) {
               alert(response.error.message);
             } else {
                 // Plot message icon on the map
                 $.each(response, function (index, value) {
                   var feature = new ol.Feature({
                     geometry: new                
                      ol.geom.Point(value.location.coordinates),
                      content: value.content
                   });
                 vectorSource.addFeature(feature);
                 });
               }
           }
        });
      },
      strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ({
        tileSize: 512
      }))
    });

We plot on the map by adding a layer of vector and setting the source of this vector data to our previous vectorSource where we actually fetch the messages from the backend:

    // Styling the vector to message icon
    var vector = new ol.layer.Vector({
      source: vectorSource,
       style: new ol.style.Style({image: new ol.style.Icon({src:   
       "message-box.png", scale: 0.5})})
    });
    map.addLayer(vector);