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.
Related
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"
});
I created a map of Toronto wards some years ago when there were 44 wards. Now we have 25 wards and I am attempting to convert the map. I haven't been working with D3 for some time and am not sure where to start.
The previous json had the following definition and was much larger than the one I got from the city
{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:EPSG::4269" } },
"features": [
{ "type": "Feature", "properties": { "GEO_ID": 14630026, "CREATE_ID": 63519, "NAME": "Scarborough-Rouge River (41)", "SCODE_NAME": "41", "LCODE_NAME": "EA41", "TYPE_DESC": "Ward", "TYPE_CODE": "CITW", "OBJECTID": 1, "SHAPE_AREA": 0.0, "SHAPE_LEN": 0.0 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -79.264840294724905, 43.779537878926838 ],
The new one starts
{"type":"FeatureCollection", "features": [
{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[318236.529,4840171.519],[318236.25,4840170.941],
So that I can use the existing javascript I would really like to find a way of converting the new file to the older one. Is that possible?
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
]
}
}
]
}
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
I'm trying to create geoJson object, for displaying flickr images on a map with mapbox.js and the flickr-api.
I can't manage to get the right format somehow, all kinds of quotation marks are missing, can anyone help? I've posted both the loop and type of JSON i need to create below.
var data = [];
window.jsonFlickrApi = function(rsp) {
var photos = rsp.photos.photo;
for (var i = 0; i < photos.length; i++) {
var p = photos[i];
var url = [ 'http://farm', p.farm, '.static.flickr.com/', p.server, '/', p.id, '_', p.secret, '_s.jpg' ].join('');
data.push({"geometry":{
"type": "Point",
"coordinates": [p.latitude, p.longitude]},
"properties":{
"url": url,
"image": url,
"name":p.title,
"description": "something"}
});
}
}
console.debug(data);
Here's the type of JSON i want to create:
{ "type": "feature collection",
"features":[
{
"geometry": { "type": "Point", "coordinates": [5.123699,52.071039]},
"properties": {
"image": "https://lh4.googleusercontent.com/-YDA7Borc-K8/S2vU_zk9GKI/AAAAAAAAAQ0/4rn5myADmdE/s912/pavello.jpg",
"url": "http://timcastelijn.nl",
"name": "pavello",
"description": "paviljoentje voor hergebruik",
}
}, {
"geometry": { "type": "Point", "coordinates": [5.117997,52.085776]},
"properties": {
"image": "http://farm9.staticflickr.com/8363/8376204495_61d75a7f10.jpg",
"url": "http://timcastelijn.nl",
"name": "hout en bank",
"description": "houten bedframe en puntgave tweezitter",
}
}, {
"geometry": { "type": "Point", "coordinates": [5.08, 52.08]},
"properties": {
"image": "http://1.bp.blogspot.com/_aq9-5vIIz5s/TNbBtAJLaJI/AAAAAAAAANs/92_6emkfm8s/s1600/hout.jpg",
"url": "http://timcastelijn.nl",
"name": "boomstammen",
"description": "30 stammetjes van ca 1m lang",
}
}, {
"geometry": { "type": "Point", "coordinates": [5.12, 52.11]},
"properties": {
"image": "http://www.deouderust.nl/wp-content/uploads/2011/09/kast-%E2%82%AC2200-.jpg",
"url": "http://timcastelijn.nl",
"name": "oude kast",
"description": "kast, uit hardhout onderdelen",
}
}]
}
As for this bit: "coordinates": [p.latitude, p.longitude] - GeoJSON coordinates are in longitude, latitude order - not vice-versa.