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:
Zoom into the Los Angeles area
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.