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.
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 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.
I am trying to move the element height of an entity that is loaded from a geojson file in cesium.js. I'm using the example App.js file from Cesium Workshop/
How would I modify the code below to adjust the height of the data entities so that they are pinned to the elevation of the terrain. The geojson file that I have has an altitude value of 0. This altitude needs to match the terrain at that location. When I render this data many of the points are under the terrain. I assume I also need to lookup the terrain height, convert the data to Cartesian coordinated back and forth to polar coordinates to add the offset into the entity.
var geojsonOptions = {
clampToGround : true
};
var testLinePromise = Cesium.GeoJsonDataSource.load('./Source/SampleData/testLines.geojson', geojsonOptions);
// Save an new entity collection of neighborhood data
var testLines;
testLinePromise.then(function(dataSource) {
// Add the new data as entities to the viewer
viewer.dataSources.add(dataSource);
testLines = dataSource.entities;
// Get the array of entities
var testLineEntities = dataSource.entities.values;
for (var i = 0; i < testLineEntities.length; i++) {
var entity = testLineEntities[i];
if (Cesium.defined(entity.polygon)) {
// Tells the polygon to color the terrain. ClassificationType.CESIUM_3D_TILE will color the 3D tileset, and ClassificationType.BOTH will color both the 3d tiles and terrain (BOTH is the default)
entity.polygon.classificationType = Cesium.ClassificationType.TERRAIN;
// Generate Polygon center
var polyPositions = entity.polygon.hierarchy.getValue(Cesium.JulianDate.now()).positions;
var polyCenter = Cesium.BoundingSphere.fromPoints(polyPositions).center;
polyCenter = Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);
entity.position = polyCenter;
// Generate labels
entity.label = {
text : entity.name,
showBackground : true,
scale : 0.6,
horizontalOrigin : Cesium.HorizontalOrigin.CENTER,
verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
distanceDisplayCondition : new Cesium.DistanceDisplayCondition(10.0, 8000.0),
disableDepthTestDistance : 100.0
};
}
}
});
Here is the geojson file
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"name": "623dd9c1-26cb-4248-8e41-ebc8c3a16af5",
"description": "descr A",
"company": "ACME"
},
"geometry": {
"type": "LineString",
"coordinates": [
[
-114.5305072,
20.61238237,
0
],
[
-111.9486,
10.46916111,
0
]
]
}
},
{
"type": "Feature",
"properties": {
"name": "15966b86-26d0-4e0b-ba6e-7fa0c98bfe5e",
"description": "descr C",
"company": "ACME"
},
"geometry": {
"type": "LineString",
"coordinates": [
[
-135.9989702,
45.7677603,
0
],
[
-134.5305072,
50.61238237,
0
]
]
}
},
{
"type": "Feature",
"properties": {
"name": "00ca37f5-de78-4d5b-88b5-d39808ff8143",
"description": "descr D",
"company": "ACME"
},
"geometry": {
"type": "LineString",
"coordinates": [
[
-125.9989702,
65.7677603,
0
],
[
-129.0238961,
67.96685,
0
]
]
}
},
{
"type": "Feature",
"properties": {
"name": "22e5e02f-fa43-445e-a2eb-29ad760a964c",
"description": "descr E",
"company": "ACME"
},
"geometry": {
"type": "LineString",
"coordinates": [
[
-105.9989702,
55.7677603,
0
],
[
-100.7366501,
55.67798889,
0
]
]
}
},
{
"type": "Feature",
"properties": {
"name": "c4aefe46-a2a6-4a97-ac36-571c9e370d31",
"description": "descr A",
"company": "ACME"
},
"geometry": {
"type": "LineString",
"coordinates": [
[
-111.994653,
78.84398434,
0
],
[
-128.4816326,
16.68839404,
0
]
]
}
}
]
}
I'm trying to render multiple points using Mapbox but it only displays the last one. I've added the feature parameter but nothing. This should render the two markers but i don't know why it doesn't. I'm not getting any errors in the console.
I'm stuck and can't find a way to solve it. Help?
This is the code responsible for the points.:
map.on('load', function() {
map.loadImage('images/celltower.png', function(error, image) {
if (error) throw error;
map.addImage('tower', image);
map.addLayer({
"id": "points",
"type": "symbol",
"source": {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [21.42559803007430, 42.00038270989050]
},
"geometry": {
"type": "Point",
"coordinates": [21.38529272846381, 42.0080397578202]
}
}]
}
},
"layout": {
"icon-image": "tower",
"icon-size": 0.25
}
});
});
});
Thanks :)
You have a duplicate geometry key. Judging by the fact that features is an array, I would guess this is the proper way to do it:
map.on('load', function() {
map.loadImage('images/celltower.png', function(error, image) {
if (error) throw error;
map.addImage('tower', image);
map.addLayer({
"id": "points",
"type": "symbol",
"source": {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [21.42559803007430, 42.00038270989050]
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [21.38529272846381, 42.0080397578202]
}
}]
}
},
"layout": {
"icon-image": "tower",
"icon-size": 0.25
}
});
});
});
According to the GeoJSON specification, there should be a way to specify multiple points. E.g.:
"features": [{
"type": "Feature",
"geometry": {
"type": "MultiPoint",
"coordinates": [
[21.42559803007430, 42.00038270989050],
[21.38529272846381, 42.0080397578202]
]
}
}]
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
]
}
}
]
}