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);

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.

  • 1
    What isn't working with the lat long point? Please edit the question to add more details
    – nmtoken
    Dec 10, 2017 at 10:20
  • @nmtoken thanks for your reply. added more color to the question. let me know if this works. the whole idea is to instead of the random points, points defined by a lat and long get highlighted and animated.
    – skrubber
    Dec 10, 2017 at 13:37

1 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);

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

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

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

  • thanks. the center with that lat long puts it in east Africa. I think we need to transform the projection of that lat long, rather than pure numbers. My original numbers work though. have created a fiddle here. two questions: 1. after the function call completes, the points are disappearing. how can we make them permanent? 2. can the terrain of the map be changed to any other type of map so that the points stand out? opacity or something may be.
    – skrubber
    Dec 11, 2017 at 12:28
  • don't mix ol2, ol3 and please put working example. If you remove return; in the sample code, points remain when animation end.
    – Chase Choi
    Dec 11, 2017 at 12:49
  • sorry use this fiddle. tried removing return earlier; didn't work
    – skrubber
    Dec 11, 2017 at 13:05
  • clearInterval makes the points remain and it's more safe way.
    – Chase Choi
    Dec 12, 2017 at 1:30
  • sorry Dude. doesn't work. also, a little type: the conditional must be ==. maybe, am missing the something here. can you pls update the fiddle instead and paste it in the comment? right now the update # is 15. also, read that requestAnimationFrame is preferred over setInterval.
    – skrubber
    Dec 12, 2017 at 1:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.