We Keep Coding

Clusters, and markers randomly loading onPageLoad *MapBox*

So what I want is for all the clusters and markers to be visible from the start. that is, when entering the page. But that's not the case.
Everything that should be on the map loads completely sporadically. Like when i hit hard refresh some times it suddenly wont load.
const bounds = Map.current
? Map.current.getMap().getBounds().toArray().flat()
: null;
The code block above might be the issue. When the map is empty of markers and clusters this code block logs null aswell. How can i use this in useEffect if that could work?
Cluster code:
const points = useMemo(
() =>
data.map((store) => ({
type: "Feature",
properties: {
cluster: false,
storeId: store.id,
category: store.country_code,
},
geometry: {
type: "Point",
coordinates: [store.coords[0], store.coords[1]],
},
})),
[data]
);
const bounds = Map.current
? Map.current.getMap().getBounds().toArray().flat()
: null;
const { clusters } = useSupercluster({
points,
bounds,
zoom: viewport.zoom,
options: { radius: 75, maxZoom: 20 },
});
Before and after refresh/move on map/saving code/pretty much anything
So when i console log this:
Before:
After:

#Kruzt are you using Mapbox GL JS? In that case, I'm not sure there's a need for the supercluster library. Have you tried something like this example? https://docs.mapbox.com/mapbox-gl-js/example/cluster/

Pinterest API: Cannot access 'Metadata' object property, even though other properties are accessible

I am working with the Pinterest API. I can access all of the data returned from my response EXCEPT the metadata object property.
This is my code to get the Pins Data:
let boarddata = [];
axios
.get(`PINTEREST_API_URL`)
.then(
function(response) {
boarddata = response.data.data;
console.log(response.data.data);
}.bind(this)
);
Console.log of response.data.data[0]:
0:
id: "167899892346462055"
link: "https://www.pinterest.com/r/pin/167899892346462055/5073939286663940267/f1b6e174ab1a06c38171839b6712e3a30ca6f73f0ee7ca480a72f8fb416f6537"
note: " "
url: "https://www.pinterest.com/pin/167899892346462055/"
attribution: null
image:
original: {
url: "https://i.pinimg.com/originals/27/e4/d6/27e4d67ba04f011da678fdd0da8c1d1a.jpg",
width: 713,
height: 1024
}
__proto__: Object
metadata:
link: {
title: "Berry French Toast Casserole (Make Ahead Overnight) - Joyous Apron",
description: "This Berry French Toast Casserole recipe is an eas…topped with berries. Make ahead the night before!",
favicon: "https://i.pinimg.com/favicons/5c0314c869b732323c11…64e959475480.ico?70361f3f8b1918702ceaa18bc4b74ebe",
locale: "en",
site_name: "Joyous Apron"
}
article: {
name: "Berry French Toast Casserole",
description: "This Berry French Toast Casserole recipe is an eas…topped with berries. Make ahead the night before!",
authors: Array(0),
published_at: "2018-07-26T00:00:00"
}
recipe: {
name: "Berry French Toast Casserole",
servings: {…},
ingredients: Array(6)
}
__proto__: Object
original_link: "http://www.joyousapron.com/berry-french-toast-casserole/#wprm-recipe-container-2578"
__proto__: Object
I want to map the response object and pull out data so i can build a display of the users pins on the page. I can access everything else except the metadata object property which is what I need the most. Here is the code for how I want to access and use the object data.
showPins = boarddata => {
let boardPins = this.state.boardPins;
console.log(boarddata);
boarddata.map((pin, index) => {
const newPin = {
id: pin.id,
image: pin.image.original.url,
name: pin.metadata.link.title,
description:
pin.metadata.article.description ||
pin.metadata.link.description,
ogLink: pin.original_link
};
boardPins.push(newPin);
});
this.setState({
boardPins
});
console.log(this.state.boardPins);
};
This returns:
index.js:337 Uncaught (in promise) TypeError: Cannot read property 'title' of undefined
at index.js:337
at Array.map (<anonymous>)
at t.a.showPins (index.js:333)
at t.<anonymous> (index.js:316)
When I console log the properties I need before executing the map function they show up. (see below)
console.log(boarddata[0].image.original.url); //https://i.pinimg.com/originals/27/e4/d6/27e4d67ba04f011da678fdd0da8c1d1a.jpg
console.log(boarddata[0].id); //167899892346517912
console.log(boarddata[0].metadata.link.title); //Berry French Toast Casserole (Make Ahead Overnight) - Joyous Apron
console.log(boarddata[0].metadata.link.description); //This Berry French Toast Casserole recipe is an eas…topped with berries. Make ahead the night before!
console.log(boarddata[0].original_link); //http://www.joyousapron.com/berry-french-toast-casserole/#wprm-recipe-container-2578
Any suggestions would be greatly appreciated

It's not actually the metadata property that's undefined, it's the link property of the metadata property. Are you sure that ALL of the data objects are the same? It's quite possible that they are inconsistent. Is seems as if you only examined the first element of your response data (response.data.data[0] and boarddata[0])
To examine this further, try something like:
showPins = boarddata => {
let boardPins = this.state.boardPins;
console.log(boarddata);
boarddata.map((pin, index) => {
console.log(`${index}: ${JSON.stringify(pin.metadata)}`);
// ...
});
this.setState({
boardPins
});
console.log(this.state.boardPins);
};

Do I need to add a source to my map in order to use clustering?

I want to add clustering to my map from mapbox, I followed the getting started as they suggest:
https://www.mapbox.com/install/js/cdn-add/
And now I have a map, I also added some of my own markers, which are users from my backend that have lats and longs.
So I have a map and some markers.
Now, I want to add clustering, and in the example:
https://docs.mapbox.com/mapbox-gl-js/example/cluster/
they add a source:
map.addSource("earthquakes", {
})
which I don't have, and at this moment I don't think I even need. because I can see the tiles and my markers.
I thought about adding a source, but which source? I don't need a source, I already have what I needed, the tiles and the markers... but the cluster option is in the addSource method on the map. So.. I'm lost here.
This is what they show in the example, but as I said, I don't have or need any other source, as I already see the tiles and my markers, I just want to cluster.
map.addSource("earthquakes", {
type: "geojson",
data: "https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson",
cluster: true,
clusterMaxZoom: 14, // Max zoom to cluster points on
clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50)
});```

I found the solution,
I had to create a geoJson object from my users like this:
const geoJsonMarkers = users.map( (place, i ) => {
const [placeLng, placeLat] = place.location.coordinates;
const position = { lat: placeLat, lng: placeLng };
return {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [position.lng, position.lat]
},
"properties": {
"name": place.name
}
}
})
const usersArray = {
"features": geoJsonMarkers
}
And then pass it to the data property of the source like so:
map.on('load', function() {
// Add a new source from our GeoJSON data and set the
// 'cluster' option to true. GL-JS will add the point_count property to your source data.
map.addSource("users", {
type: "geojson",
// Point to GeoJSON data. This example visualizes all M1.0+ earthquakes
// from 12/22/15 to 1/21/16 as logged by USGS' Earthquake hazards program.
data: usersArray,
cluster: true,
clusterMaxZoom: 14, // Max zoom to cluster points on
clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50)
});
...
the addSource name is arbitrary, could be anything in my case are users so I called it users.

ECharts - Set options to externally loaded arrays

So I am using the library ECharts to create some charts and graphs for various data that I have on a website. This is my first time using the library and I am fairly new to Javascript/jQuery. What I am trying to do is set the xAxis data to the results from a local page which will return a JSON Object with an array containing the days of the week. After I can do this, I then plan to load the Series data in the same way.
The jSON that is returned is this
When I am trying to set the data for xAxis, I am doing it as shown
xAxis: [{
type: 'category',
boundaryGap: false,
data: function(){
$.ajax({
type: "POST",
url: "ajax/getData.php?test=t&graph_last_days=d&days=7",
cache: false,
success: function(result){
return result.data;
//console.log(result.data);
}
});
}
}],
However, I keep getting the error Uncaught TypeError: o.slice is not a function and this error is only being outputted when I try and use this method of setting the data. In addition to this, if I try and make a function to return the data from the external page and set a variable to that, whenever I try and print it to the console it says undefined
If I do not use my method of trying to load the external data and I predefine the data like so
xAxis: [{
type: 'category',
boundaryGap: false,
data: [
'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
]
}]
Then there are no errors and it works just fine
Can anyone see the problem?

Seems that after speaking with some people, the only example usage or documentation available is this example they have which is closely related to my question here.
If anyone else wants some examples related to ajax or dynamic data loading with ECharts then here are some (in English) *
Line + Bar
Scatter + Candlestick
Pie + Radar
Helpful tip
If you do not speak Chinese and you are using some sort of translator for their code examples; be aware that it's common for websites such as Google Translate and Bing Translator to incorrectly translate the punctuation used in JS by doing things such as,
Translating arrays with single quotes into arrays with single quotes and double quotes: thus causing syntax errors.
Removing commas (,) from objects.
Changing Semi-colon's (;) into Colon's (:) or even removing them.

complete example for echarts pushing data from Ajax call
data.importPorts -> Array of strings
data.importBD -> Array of Objects { clientanem : [4,5,6,7,3]}
$.get("/Home/Graph1", { clients: "403,300", years: "2012" })
.done(function (data) {
var option = {
tooltip: {
show: true
},
legend: {
data: (function () {
var res = [];
for (var name in data.importBD) {
res.push(name);
};
return res;
})()
},
xAxis: [
{
type: 'category',
data: (function () {
var res = [];
data.importPorts.forEach(function (i) {
res.push(i);
});
return res;
})()
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
}
]
};
for (var name in data.importBD) {
var obj = {
name: name,
type: "bar",
data: data.importBD[name]
};
option.series.push(obj);
}
// Load data into the ECharts instance
imprtChart.setOption(option);
});

Highcharts Unable to set value of the property 'point': object is null or undefined

I am using high charts to construct stacked bar chart. I am able to construct it using mock data, but when pass object it throes me Unable to set value of the property 'point': object is null or undefined error.
Here is my code
var data.series1 = [{//some properties, y:21}];
var data.series2 = [{//some properties, y:21}];
var data.series3 = [{//some properties, y:21}];
var data.series4 = [{//some properties, y:21}];
var data.colors ={// color values};
chart(data);
Here is my chart configuration
var setConfig = function (data) {
//chart options
series: [{
name: 'avalPoints',
data:data.series1 ,
color: data.colors.avail
}, {
name: 'Q4',
data: data.series2 ,
color: data.colors.q4
}, {
name: 'Q3',
data: data.series3,
color: data.colors.q3
}, {
name: 'Q2',
data: data.series4,
color: data.colors.q2
}
}
When use static values like below
{
name: 'Q2',
data: [21],
color: data.colors.q2
}
it is working. Can anybody point where I am doing mistake please?

I suppose that you already have a var data already defined, so it seems that you have bad syntax.
var data.series1 = [/* */];
Should not work. Try:
data.series1 = [/* */];

Solved the issue. I have a property called dataLabel in data.series object. That is causing issue. After renaming it, charts are constructed.