I have just started using mapbox and i have some troubles with it.
I have added angle to my geojson data in order to rotate the image to a specified angle from geojson, but I'm having trouble with writing its rotate function :(
we are acquiring our data from AJAX so the function should be compatible with AJAX.
Any help would deeply appreciated.
This is my geojson data:
{ "type": "Feature", "geometry": { "type": "Point", "coordinates": [-79.00, 40] }, "properties": { "title": "Big astronaut","id":"100", "icon": { "iconUrl": "_vehicle.png", "iconSize": [32, 32], "iconAnchor": [50, 50], "popupAnchor": [0, -55], "className": "dot", "angle":"87" } } }
Thank you
Related
I am new to Threejs.
I am trying to understand the JSON structure for JSON Object Scene format 4.
"object": {
"uuid": "89529CC6-CBAC-412F-AFD1-FEEAE785BA19",
"type": "Scene",
"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],
"children": [
{
"uuid": "33FA38D9-0AAC-4657-9BBE-5E5780DDFB2F",
"name": "Box 1",
"type": "Mesh",
"geometry": "C3BF1E70-0BE7-4E6D-B184-C9F1E84A3423",
"material": "87D95D6C-6BB4-4B8F-8166-A3A6945BA5E3",
"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]
},
{
"uuid": "16F2E381-2B73-44C4-A7BB-38D7E1CD2381",
"name": "PointLight 1",
"type": "PointLight",
"color": 16777215,
"intensity": 1,
"distance": 0,
"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,100,200,150,1]
}
]
}
"matrix": [1,0,0,0,0,1,0,0,0,0,1,0,100,200,150,1]
Does this matrix depicts this: "matrix": [xx,xy,xz,?,yx,yy,yz,?,zx,zy,zz,?,px,py,pz,?]
What are the "?" in this matrix?
The matrix property in the JSON refers to the Object3D.matrix property which is in fact a 4x4 matrix.
The Matrix4 class in three.js stores its numbers in the elements property. It is an array which holds the numbers in column-major order. When a matrix is serialized/deserialized, this order is maintained.
So what you see in the JSON is a serialized 4x4 matrix in column-major order.
Using rotated labels on category X axis. (Real graph uses long names but results are the same.)
A: Alignment of axis labels and their data points is fine without label rotation.
B: Labels are not aligned when rotated.
The only difference between A and B graph coding is the addition of "labels":{"rotation":90} in the xAxes renderer.
How can alignment be fixed?
var chart =am4core.createFromConfig({
"colors": { "list": ["#DB3", "#000", "#888"] },
"data": [$data],
"legend": { "markers":{"width":20, "height":10},
"position":"top",
"useDefaultMarker":true
},
"series": [
{ "dataFields": { "categoryX":"X", "valueY":"Y1" },
"name": "[font-size:16px;font-weight:600;]{$n1}[/]",
"strokeWidth": 2,
"type": "LineSeries"
},
{ "dataFields": { "categoryX":"X", "valueY":"Y2" },
"name": "[font-size:16px;font-weight:600;]{$n2}[/]",
"strokeWidth": 2,
"type": "LineSeries"
},
{ "dataFields": { "categoryX":"X", "valueY":"Y3" },
"name": "[font-size:16px;font-weight:600;]others[/]",
"strokeWidth": 2,
"type": "LineSeries"
}
],
"xAxes": [
{ "dataFields": { "category": "X" },
"renderer": { "minGridDistance":11, "labels":{"rotation":90}},
"type": "CategoryAxis"
}
],
"yAxes": [
{ "renderer": {"minGridDistance":15},
"title": {"text": "[font-size:16px;font-weight:600;]Values[/]"},
"type": "ValueAxis"
}]
}, "line", am4charts.XYChart);
LABELS renderer needed "verticalCenter":"middle" with rotation.
I don't know how many other things I tried!
D3 newbie.
How I adjust the spacing between bars in vega-lite bar chart and override the default? binSpacing I think only works on histograms. See code below.
I'll want to adjust colour of text and font family too... But am having trouble finding it in the docs.
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"width": 1200,
"height": 900,
"data": {
"url": "data/seattle-weather.csv"
},
"mark": "bar",
"encoding": {
"x": {
"aggregate": "count",
"type": "quantitative"
},
"size": {
"value": 40
},
"y": {
"field": "date",
"type": "temporal",
"timeUnit": "month",
"axis": {
"title": "Regions"
}
},
"color": {
"field": "weather",
"type": "nominal",
"scale": {
"domain": [
"0-20 days",
"21-27 days",
">28 days"
],
"range": [
"red",
"orange",
"green"
]
},
"legend": {
"title": "Case Ageing"
}
}
}
}
I can understand your confusion. It seems there are three questions:
How do I change bin width for histograms? This is documented here. If you have trouble with a reproducible example, I will be happy to help.
How do I adjust the spacing of the bars? This is controlled by padding, paddingInner and paddingOuter all documented at the encoding level and at the config level. You might be having trouble since you are setting size manually with "size": {"value": 40}, but I am guessing this is a remnant from experimenting. Here is a working spec from this gist. You can play with paddingOuter, paddingInner, or add padding to apply to both inner and outer.
How do I change font styling? See this gist.
I have a TopoJSON file containing the boundaries of various districts in Uttar Pradesh, India. When you load the data on a map, you see only the outlines of the districts; the districts themselves are not filled.
I believe the problem is that each district is of type GeometryCollection that has its own geometries made up of a series of LineStrings.
Instead, I want each district to be of type Polygon that just has arcs.
For example, the first object is:
{
"type": "GeometryCollection",
"geometries": [{
"type": "GeometryCollection",
"properties": {
"district_number": 1,
"district_name": "Ghaziabad"
},
"geometries": [{
"type": "LineString",
"arcs": [0]
}, {
"type": "LineString",
"arcs": [1]
}, {
"type": "LineString",
"arcs": [2]
}, {
"type": "LineString",
"arcs": [3]
}, {
"type": "LineString",
"arcs": [4]
}, {
"type": "LineString",
"arcs": [5]
}]
}
I think I want to convert it, and every other object, to:
{
"type": "Polygon",
"properties": {
"district_number": 1,
"district_name": "Ghaziabad"
},
"arcs": [[0,1,2,3,4,5]]
}
I could fix it manually, but that seems insane. Is there a better way?
Update
So I figured out how to convert the object into the result I thought I wanted, but I got some very wacky polygons. Here is my (very clunky) code. Thanks to Saeed Adel Mehraban for some guidance with this.
d3.json('map.topojson',function(error,data){ // get my json that needs to be converted
var arr = data.objects.collection.geometries; // this is the relevant array
var newArr = []; // in order to map each object, i need to put each one into a new array as a single-item array
arr.forEach(function(d,i){
var curr = [d];
newArr.push(curr);
})
newArr.forEach(function(e,i){ // now that i have my new array, i want to convert each object that contains a LineString into a Polygon
var output = e.map(function(d){
var arcsArr = []; // an empty array to push each single value of the LineString arcs into
return {
"type": "Polygon", // change the type to polygon
"properties": d.properties, // keep the properties
"arcs": d.geometries.map(function(g) { // a single key-value pair for arcs, made up of the individual arcs from the LineString
arcsArr.push(g.arcs[0]);
return [arcsArr]; // the array of arcs must be in another array
})
};
});
var output = output[0]; // get only the first item in the output array, which is the object i have modified
output.arcs = output.arcs[0]; // and change the arcs so we're only taking the first array (as we've duplicated the arrays)
$('body').append(JSON.stringify(output)+','); // append the whole thing to the body so I can copy it and paste it into the appropriate part of the JSON
});
});
This "worked" in the sense that my LineStrings were indeed converted to Polygons, retaining the original border. But the polygons themselves are a nightmare, with straight lines crisscrossing the map at all kinds of angles.
Is there something like a command line tool that can convert boundaries made of LineStrings into Polygons?
I believe I ran into the same problem being described.
This is Zambia drawn as a svg polyline foreach arc (red being the first arc listed, and magenta being the last):
However when attempting to create a polygon by concatenating the arcs:
What happened was the arcs for every object were listed clockwise, but the points in every individual arc were listed counterclockwise. Without seeing the topojson that OP is using I cannot 100% confirm this, but I suspect that this was the case.
I solved this by reversing the points in an arc before pushing them to the array of points to draw the polygon and now all is well:
Maybe a map function like below? (I write that with simplistic assumption about data schema. I can't guarantee that it works for complex linestrings since I'm not familiar with topojson format. But it works with your provided data)
var foo = [
{
"type": "GeometryCollection",
"geometries": [{
"type": "GeometryCollection",
"properties": {
"district_number": 1,
"district_name": "Ghaziabad"
},
"geometries": [{
"type": "LineString",
"arcs": [0]
}, {
"type": "LineString",
"arcs": [1]
}, {
"type": "LineString",
"arcs": [2]
}, {
"type": "LineString",
"arcs": [3]
}, {
"type": "LineString",
"arcs": [4]
}, {
"type": "LineString",
"arcs": [5]
}]
}]
}
];
var bar = foo.map(function(d) {
return {
"type": "Polygon",
"properties": d.geometries[0].properties,
"arc": d.geometries.map(function(g1) {
return g1.geometries.map(function(g) {
return g.arcs[0];
});
})
};
});
console.log(bar);
I 'm trying to generate svg maps from the GEOFLA shapefiles.
Using 'bbox' bounds mode with manually setting the bbox values works well :
{
"layers": [{
"id": "depts",
"src": "data/DEPARTEMENTS/DEPARTEMENT.shp",
"filter": {"CODE_REG": "24"},
"simplify": {
"method": "distance",
"tolerance": 8
},
"attributes": "all"
}],
"bounds": {
"mode": "bbox",
"data": [-4.5, 42, 8, 48],
},
"export": {
"width": 600,
"ratio": 0.8
}
}
But when setting the bounds mode to 'polygons', then i get an empty svg map :
{
"layers": [{
"id": "depts",
"src": "data/DEPARTEMENTS/DEPARTEMENT.shp",
"filter": {"CODE_REG": "24"},
"simplify": {
"method": "distance",
"tolerance": 8
},
"attributes": "all"
}],
"bounds": {
"mode": "polygons",
"data": {
"layer": "depts"
},
"padding": 0.06
},
"export": {
"width": 600,
"ratio": 0.8
}
}
I had a look in kartograph files and i noticed that the "get_features" method in "map.py" return a Polygon which coordinates doesn't intersect with the features geometry previouly extracted from the shapefile.
Then, each feature are throw away in the "get_features" method of the "maplayer.py" file when checking if feature geometry intersects with the "layer.map.view_poly" property.
I had a similar problem using GEOFLA file projection.
The solution I've found is basically to change my shapefile projection using QGIS. My idea was to use the projection of the shapefile given in installation guide which worked for me.
Get example shape file from kartograph installation page
Load this vector layer in QGIS Add your GEOFLASH layer in QGIS
Right-click on GEOFLASH layer and "Save as..." menu
In the save window, give a new name for your layer (eg : DEPARTEMENT_WGS84.shp)
Click CSR button and select the test layer projection (WGS 84 / EPSG:4326)
Click OK
Check the new shape file has correct projection :
cat DEPARTEMENT_WGS84.prj
GEOGCS["GCS_WGS_1984",DATUM["D_WGS_1984",SPHEROID["WGS_1984",6378137,298.257223563]],PRIMEM["Greenwich",0],UNIT["Degree",0.017453292519943295]]
Now your script should work fine using new shape file.