Good morning,
I get data from JSON, with physical addresses that get converted to geo coordinates (If needed I can put the whole code here or a link to the site under construction).
Then I need to work with these coordinates to calculate distances or whatever. But somehow I can't access them.
my code (extract) looks like this:
var positionsCenter = [];
for (let i = 0; i < positions.length; i++) {
lux.geocode({
num: positions[i].num,
street: positions[i].street,
zip: positions[i].zip,
locality: positions[i].locality
}, function (position) {
**positionsCenter[i] = position;**
var pFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform(position, 'EPSG:2169', 'EPSG:3857')),
id: i
});
vectorSource.addFeature(pFeature);
});
}
These are coordinates on a map (vector layer) but something's wrong. When I output this via:
console.log(positionsCenter);
It gives me this:
[]
0: (2) [75980.11870000046, 75098.00039954418]
1: (2) [87897.10419999996, 63546.633999540085]
2: (2) [88238.34310000022, 63389.17289954127]
3: (2) [73701.38559999966, 76385.07059954498]
4: (2) [71212.77219999957, 74969.26619954518]
5: (2) [80450.28039999957, 72414.96529954427]
6: (2) [83811.06230000037, 75487.27249954658]
7: (2) [86081.38100000011, 86362.58049954918]
8: (2) [77022.02340000033, 80667.17809954635]
9: (2) [66163.39429999988, 62664.86699954068]
length: 10
__proto__: Array(0)
But when I try to access one of the entries like this:
console.log(positionsCenter[1]);
or
console.log(positionsCenter[1][1]);
or even
console.log(positionsCenter.length);
it's always undefined!
What do I miss? I'm confused :-/
Thank you for any help. Best regards, Claude
Here's the whole part of this code:
var map;
var vectorSource;
var highlightedFeature = null;
var selectedFeature = null;
function loadMap() {
map = new lux.Map({
target: 'map',
bgLayer: 'basemap_2015_global', //default basemap_2015_global, streets_jpeg
zoom: 16, //18
position: [75977, 75099],
showLayerInfoPopup: true,
search: {
target: 'searchbox',
dataSets: ['Adresse', 'Coordinates']
}
});
//-------------------------------------------------------------- FEATURES -
vectorSource = new ol.source.Vector({
features: []
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
function styleFunction(feature, resolution) {
var sti = feature.get('status');
const liv = 'livraison';
const tak = 'take-away';
var newColor = [128, 128, 128];
if (sti.includes('ouvert')) {
newColor = [0, 255, 0];
}
var imgSource = '../images/pin.png';
if (sti.includes(liv) && sti.includes(tak)) {
imgSource = '../images/pin-livraison-takeaway.png';
} else {
if (sti.includes(liv)) {
imgSource = '../images/pin-livraison.png';
} else {
if (sti.includes(tak)) {
imgSource = '../images/pin-takeaway.png';
}
}
}
var isSelected = feature.get('selected') || feature.get('highlighted');
var iconStyle = new ol.style.Style({
image: new ol.style.Icon(({
anchor: [0.5, 0.5],
color: newColor,
anchorXUnits: 'fraction',
anchorYUnits: 'fraction',
src: imgSource,
scale: isSelected ? 1.5 : 1
}))
});
return [iconStyle];
}
vectorLayer.setStyle(styleFunction);
map.addLayer(vectorLayer);
for (let i = 0; i < positions.length; i++) {
lux.geocode({
num: positions[i].num,
street: positions[i].street,
zip: positions[i].zip,
locality: positions[i].locality
}, function (position) {
positionsCenter[i] = position;
var pFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform(position, 'EPSG:2169', 'EPSG:3857')),
id: i
});
const sti = statuses[i];
pFeature.set('status', sti);
pFeature.setId(i);
pFeature.set('selected', false);
pFeature.set('highlighted', false);
vectorSource.addFeature(pFeature);
});
//console.log(positions[i]);
}
map.on('click', function (evt) {
var feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
return feature;
});
if (feature !== undefined) {
if (selectedFeature !== null) {
selectedFeature.set('selected', false);
selectedFeature = null;
}
feature.set('selected', true);
selectedFeature = feature;
var outPut = feature.get('id');
infoField.innerHTML = arr[outPut].innerHTML;
infoField.style.display = 'block';
CloseinfoField.style.display = 'block';
galImage.style.display = 'none';
ClosegalImage.style.display = 'none';
getThumbs(outPut);
for (let j = 0; j < arr.length; j++) {
arr[j].classList.remove('active');
}
arr[outPut].className += ' active';
var current = document.getElementById('item' + outPut);
current.scrollIntoView({
behavior: 'smooth',
block: 'center'
});
} else {
console.log('');
}
});
map.on('pointermove', function (evt) {
if (highlightedFeature !== null) {
highlightedFeature.set('highlighted', false);
highlightedFeature = null;
}
var feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
return feature;
});
if (feature !== undefined) {
highlightedFeature = feature;
highlightedFeature.set('highlighted', true);
}
});
//------------------------------------------------------------------ DISTANCE -
var sourceProj = map.getView().getProjection();
var wgs84Sphere = new ol.Sphere(6378137);
var coordinates1 = [75977, 75099];
var coordinates2 = [76977, 75099];
// EDIT/UPDATE ----------------------------------------
function delay(ms) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
resolve();
}, ms);
});
}
function getFive() {
return delay(100).then(function () {
return positionsCenter[0];
})
}
getFive().then(function (five) {
console.log(five);
});
// EDIT ----------------------------------------
var c1 = ol.proj.transform(coordinates1, sourceProj, 'EPSG:4326');
var c2 = ol.proj.transform(coordinates2, sourceProj, 'EPSG:4326');
var distance = wgs84Sphere.haversineDistance(c1, c2);
console.log(distance);
//----------------------------------------------------------------- /DISTANCE -
document.getElementById('myLocation').addEventListener('click', getLocation);
document.getElementById('navList').addEventListener('click', getnavList);
}
