OpenLayers Lat Lon overlay animation doesn't work

Question

I'm new to OpenLayers and trying to experiment with this code snippet. The idea is to show the Los Angeles area and then overlay it with several points defined at certain latitude and longitude. Highlight and animate them to show how these geo-codes are important to the business. I've changed this code to:

1. Zoom into the Los Angeles area

2. Instead of the random points, I've defined two arrays of latitudes and longitudes. Then, I want a lat and long to be chosen from these arrays but only correspondingly. So not (lon[0], lat[2]) but only at the same index like (lon[2], lat[2]). And then that point defined by longitude and latitude should be animated.

For these two changes, I altered the original js code at these two places:

view: new ol.View({
          center: [-13180189,4018753],
          zoom: 8

function addRandomFeature() {
        var lat = [34.152568,34.069787,34.21377,33.81761,33.82508,33.824989,33.905536,33.895896,33.921715,34.19184,34.190977,34.021206,34.050864,34.060165,34.07235,34.076094]
        var lon = [118.347831,118.384738,118.227904,118.070374,118.14034,118.144561,118.05531,118.046738,118.098677,118.33581,118.338151,117.976882,117.989626,117.991428,118.381041]

        for (i=0; i< lat.length; i++){
            x = lon[i];
            y = lat[i];
            var geom = new ol.geom.Point(ol.proj.fromLonLat([x, y]));
            var feature = new ol.Feature(geom);
            source.addFeature(feature);
        }
      }

Zooming into Los Angeles works but the second change doesn't show the points defined by the lat long highlighted as the blue spot that gets animated, as was the case in the original code snippet -- albeit defined by random points in the space, not latitude and longitude. A single point somewhere in China is being shown with a red halo. No lat long in the Los Angeles area is being highlighted with the blue circle.

Answer 1

There's few errors.

First, the center coordinates you want is around LA but the arrays have wrong position. lon should be its negative coordinates.(the coordinates of LA is like 33.929053, -118.488669)

center: ol.proj.fromLonLat([-118.227904, 33.929053]),

Second, if you want interval effect, there shouldn't be a for loop.(there's no matter if you want the animation at the same time)

Third, the length of lat is 16 but lon is 15.

so you can fix your code like:

var lat = [34.152568,34.069787,34.21377,33.81761,33.82508,33.824989,33.905536,33.895896,33.921715,34.19184,34.190977,34.021206,34.050864,34.060165,34.07235,34.076094]
var lon = [-118.347831,-118.384738,-118.227904,-118.070374,-118.14034,-118.144561,-118.05531,-118.046738,-118.098677,-118.33581,-118.338151,-117.976882,-117.989626,-117.991428,-118.381041, -118.381041]
var cnt = 0;
function addRandomFeature() {
  var geom = new ol.geom.Point(ol.proj.fromLonLat([lon[cnt], lat[cnt]]));
  var feature = new ol.Feature(geom);
  source.addFeature(feature);
  cnt++;
}

to prevent memory over-usage, clear interval once it's finished.

var interval = window.setInterval(function() {
  addRandomFeature();
  if (cnt === lat.length) {
    clearInterval(interval);  
  }
}, 1000);

Here is a working example: https://codesandbox.io/s/sharp-mahavira-2fjh3v?file=/src/index.js