Develop Reference

How to create JavaScript object and fill data dynamically? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
Improve this question
I want to create a data object dynamically with key-value pairs. In this object, there is also an array named features and also within this array element called geometry one more array coordinates.
In feature array, properties like title and content will add dynamically and also values of coordinates array.
How to add data in coordinates array: "geometery":{"coordinates":[]}.. ?
data = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"title": "Day 1",
"content": "This is where some people moved to."
},
"geometry": {
"type": "Point",
"coordinates": [
-73.7949,
40.7282,
1
]
}
},
{
"type": "Feature",
"properties": {
"title": "The Next Day",
"content": "This is where some people grooved to."
},
"geometry": {
"type": "Point",
"coordinates": [
-74.3838,
40.9148,
1
]
}
},
{
"type": "Feature",
"properties": {
"title": "Amazing Event",
"content": "This is where they went to have fun."
},
"geometry": {
"type": "Point",
"coordinates": [
4.899431,
52.379189,
1
]
}
},
{
"type": "Feature",
"properties": {
"title": "1776",
"content": "This where they went when the revolution had begun."
},
"geometry": {
"type": "Point",
"coordinates": [
-71.3489484,
42.4603719,
1
]
}
},
{
"type": "Feature",
"properties": {
"title": "1776",
"content": "This where they went when the revolution had begun."
},
"geometry": {
"type": "Point",
"coordinates": [
-71.2272,
42.4473,
1
]
}
},
{
"type": "Feature",
"properties": {
"title": "1984",
"content": "So they all came here...and disappeared without a trace!"
},
"geometry": {
"type": "Point",
"coordinates": [
-0.118092,
51.509865,
1
]
}
},
{
"type": "Feature",
"properties": {
"title": "12/22/63",
"content": "Now, this can be quite the scary place."
},
"geometry": {
"type": "Point",
"coordinates": [
-70.2553259,
43.661471,
1
]
}
},
]
}
var data = {
features: []
};
for (piece in pieces){
data.features.push({
type: "Feature",
properties: {title: '{piece.title}' , content: '{piece.content}' },
geometry: {type: "Point"},
});
}

What have you already tried and where was your problem?
You could do something like this:
var data = {
features: []
};
data.features.push({
type: "Feature"
});

CesiumJS JSON - description image remove properties from infobox

I have a JSON file with all the data that I need. I would like after this to able to pull data from the Database. After putting a description of my entity(image)it removes properties. Others entities without descriptions are showing them as they should. What am I missing?
JSON
"type": "FeatureCollection",
"features": [
{ "type": "Feature",
"geometry": {"type": "Point","coordinates": [80.2066734649931, 13.0187039189613]}, "color":{
"rgba":[0,0,255,95]},
"properties": {
"Name": "Mika",
"Age": 17,
"Type": "Policeman",
"description":"PICTURE:<div><img src='https://image.shutterstock.com/z/stock-photo-british-police-officer-140116003.jpg' height='300' width='300'></img><p></p>"
}
},
{ "type": "Feature",
"geometry": {"type": "Point","coordinates": [ 120.2072495864164, 34.0191043036246]},
"properties": {
"Name": "Zika",
"Age": "Worker"
}
},
{ "type": "Feature",
"geometry": { "type": "Point","coordinates": [ 140.2067574402883, 84.0191983952581]},
"properties": {
"Name": "Pera",
"Age": 23,
"Type": "Student"
}
}
]
}
App.js - loading data from JSON
let data = require('../data.json')
let dataSource = Cesium.GeoJsonDataSource.load(data);
viewer.dataSources.add(dataSource);
I expect to have Name, Age and Type with the image in infobox.

Duplicating Point Layer for Simulation

I'm trying to simulate city traffic movements (at the moment I'm only into vehicles) but I'm having a problem.
What happens is that I'm trying to simulate 1 car per point at the map, but I don't know how to duplicate a certain layer (and each one has a different route), for example this one:
map.addSource('point', {
"type": "geojson",
"data": pointOnCircle(0)
});
map.addLayer({
"id": "point",
"source": "point",
"type": "circle",
"paint": {
"circle-radius": 10,
"circle-color": "#007cbf"
}
});
I don't know if I could just loop and generate N points with different names or do it in another way.
Here's a video of what I've done until now (for simulating it I created 2 different layers because I didn't know how to duplicate them) :
https://www.youtube.com/watch?v=xWZD9aBUFlg

You should put all your points in the one data layer:
map.addSource('points', {
"type": "geojson",
"data": pointsOnCircle(0) // change this function to return multiple features
});
map.addLayer({
"id": "points",
"source": "points",
"type": "circle",
"paint": {
"circle-radius": 10,
"circle-color": "#007cbf" // possibly make this a data-driven function
}
});
Your GeoJSON data source would look like:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
146.25,
-37.16031654673676
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
138.515625,
35.460669951495305
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
-81.5625,
33.43144133557529
]
}
}
]
}

Create an interactive map leaflet-ajax

In order to create an interactive map consisting of several layers I use the plugin leaflet-ajax with downloading of the files. geojson. When you direct at the object of the layer, the attribute information (objects attributes) displays.
It is required to include a link to the html page in a number of the objects attributes. I rack my brains over this task a week, please, help me know how to do it!
The code is given below.
{
"type": "FeatureCollection",
"crs": {
"type": "name",
"properties": {
"name": "urn:ogc:def:crs:OGC:1.3:CRS84"
}
},
"features": [{
"type": "Feature",
"properties": {
"id": 2,
"date": "2012\/02\/05",
"material": "plastic",
"Number": 1,
"support,feeder": "2 2"
},
"geometry": {
"type": "MultiPoint",
"coordinates": [
[34.377387101428354, 54.063054027736584]
]
}
}, {
"type": "Feature",
"properties": {
"id": 4,
"date": "2012\/02\/05",
"material": "plastic",
"Number": 1,
"support , feeder": "4 2"
},
"geometry": {
"type": "MultiPoint",
"coordinates": [
[34.378052287959541, 54.062481025595972]
]
}
}, ]
}

Looks like this is happening because you are never actually adding the layers to the map. Make sure to add map.addLayer(dorogi) for each one of those AJAX layers after you initialize them.
Or you can watch the data:loaded event and add them after all data has been downloaded. Docs at https://github.com/calvinmetcalf/leaflet-ajax

Syntax error on JS script

I have the following .js file, and Dreamweaver reports a syntax error on line 2.
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"id": 0,
"properties": {
"Id": 0,
"Title": "River & Trail HQ",
"Other": null,
"Parking": "Yes"
},
"geometry": {
"type": "Point",
"coordinates": [
-8649997.6690437607,
4769179.73322534
]
}
}
]
}
Seems something is wrong with
"type": "FeatureCollection",
line.

If that's the whole JavaScript file, then it's giving you an error because it's interpreted as a block instead of an object literal. To fix this, you could assign it to something, like
var someObj = {
"type": "FeatureCollection",
...
}
You may also be thinking of a JSON file (which is probably the case, since a free-floating object literal isn't going to do you much good anyway). JSON and JavaScript are not the same. If you really want a JSON file, then save it as such (.json).

Try
var x = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature", "id": 0, "properties":
{
"Id": 0, "Title": "River & Trail HQ", "Other": null, "Parking": "Yes"
},
"geometry":
{
"type": "Point", "coordinates": [ -8649997.6690437607, 4769179.73322534 ]
}
}
]};

http://jsonlint.com shows it as valid JSON and I can't see any issues with it on visual inspection.