I'm trying to draw some text at a particular height (so it's drawn at the same height as some other primitive) in Cesium. Text-wise, I can't seem to be able to draw anything but labels clamps to the ground (in the example below, the first little circle is at ground level). As such:
var entity = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(parseFloat(terrain[5]), parseFloat(terrain[4])),
ellipse : {
semiMinorAxis : 10000,
semiMajorAxis : 10000,
height : 1000,
fill : true,
outline: true,
material : Cesium.Color.fromCssColorString(someColour).withAlpha(0.5),
outlineWidth : 2
},
label: {
id: 'my label',
text: "Blabla",
scale: .5,
height: 1000
}
});
Is there any way to draw text at a specific height in Cesium?
The text height needs to be part of entity.position. Try adding it as a 3rd parameter to Cartesian3.fromDegrees on the 2nd line there.
Related
I have added some text markup using the following code:
const text = new Autodesk.Viewing.Extensions.Markups.Core.CreateText(
editor,
data.id
textPosition,
{ x: 1, y: 0.5 }, //Size of the label
data.name,
textStyleObject,
);
This looks like this when rendered:
Is there a way to automatically calculate the width of the label based on the content and reduce it accordingly so that it looks something like this:
Thanks in advance!
I'm using justgage.1.0.1.js on my ASP page. I have configured colors for the progress line into 4 sectors like this:
var g1 = new JustGage({
id: "gauge1",
value: 0,
min: 0,
max: 100,
title: "Some Title",
showMinMax: 0,
label: '0 of 2',
levelColorsGradient: false,
countComplete: 0,
countTotal: 2,
levelColors: [ "#ff0000", "#ff9900", "#ffcc00", "#cccc00" ]
});
And in case countComplete = 0 it chows me an empty pipe with a grey background color:
What I need is to change this empty pipe's background to red, but only if countComplete equals 0 and countTotal is greater than 0. In all other cases the background should stay gray:
``
If this is possible to do, can you show me how to do it?
Already figured this out. To change the background of the gauge line, you just have to add a parameter to the gauge's body:
gaugeColor: "#ff0000"
I have a geoJSON file with over 11 000 polygons. I've calculated some property for each of them and stored it in the geoJSON as a Feature. Is it possible to have the opacity of each cell vary based on the calculated property? Fe. if the property is 1, I'd like the cell to be almost see-through, if it's 6, I want it to be almost solid etc.
EDIT
Ok, so I've gotten around to actually placing the opacity values into the geoJSOn. Now an entry looks like this:
{'geometry': {'coordinates': [[[10.927456267537572, 45.68179119797432],
[10.940290010697588, 45.68157387892596],
[10.939979018768243, 45.67257819153854],
[10.927147329501077, 45.672795442796335],
[10.927456267537572, 45.68179119797432]]],
'type': 'Polygon'},
'id': 1,
'properties': {'cellId': 39},
'style': {'opacity': 0.38888888888888884},
'type': 'Feature'}
This, however, doesn't use the opacity from the JSON. I've tried to implement the solution as:
map.data.setStyle(function(feature) {
var value = feature.getProperty('opacity');
var opacity = value;
return {
fillOpacity: opacity,
strokeWeight: opacity
};
});
which doesn't work, with error Cannot read property 'data' of undefined.
Since you have your polygons in geoJSON format I assume you are using google.maps.Data layer to display them. In that case you can use Declarative style rules to style respective polygons based on value of one of it's properties (see docs for more, look for "Declarative style rules"). So, for example, you would have:
map.data.setStyle(function(feature) {
var value = feature.getProperty('myProperty');
var opacity = value <= 1 ? 0.1 : 1;
return {
fillOpacity: opacity,
strokeWeight: 1
};
});
If you want to have opacity 1 if value of your myProperty is bigger then 1, otherwise 0.1. Of course you can calculate any opacity based on the value, my computation of the opacity from value is just an example.
If this answer won't accommodate all your needs, take a look at this SO answer where I show how you can change styles of individual boundaries (polygons) based on their id.
EDIT
To answer update of your question: First mistake you are making is that you should have styles attribute inside the feature's properties attribute, to be able to access it via feature.getProperty e.g. like this:
{'geometry': {'coordinates': [[[10.927456267537572, 45.68179119797432],
[10.940290010697588, 45.68157387892596],
[10.939979018768243, 45.67257819153854],
[10.927147329501077, 45.672795442796335],
[10.927456267537572, 45.68179119797432]]],
'type': 'Polygon'},
'id': 1,
'properties': {
'cellId': 39,
'style': {'opacity': 0.38888888888888884}
},
'type': 'Feature'}
Then your styling function should look like this:
map.data.setStyle(function(feature) {
var value = feature.getProperty('style');
var opacity = value.opacity;
return {
fillOpacity: opacity
};
});
Even if the bars have value of zero in bar chart created using chartjs, they still show a visible bar. This is misleading for my purpose and I would like to have it removed and show nothing there (meaning that, I still want to show labels with zero value but not the bar). I tried changing min value of y-axis but it doesn't make a difference. The image below shows this problem for columns 56, 60 and 78. Is there a way to get rid of this? Thanks!
And here is my script:
<div>
<canvas id="canvas_bar" height="250", width = "300" ></canvas>
</div>
<script>
var barChartData = {
labels : [56, 60, 78, 90],
datasets : [
{ fillColor : "rgba(139,0,0,0.5)",
strokeColor : "rgba(220,220,220,0.8)",
data : [20.0, 0, 0, 50] },
{ fillColor : "rgba(1,187,205,0.5)",
strokeColor : "rgba(151,187,205,0.8)",
data : [0, 0.0, 40.0, 10] }
]
}
window.onload = function(){
var ctx = document.getElementById("canvas_bar").getContext("2d");
window.myBar = new Chart(ctx).Bar(barChartData, {
animation: false,
responsive : false,
barValueSpacing : 15,
scaleShowVerticalLines: false,
});
}
</script>
By default the barStrokeWidth value is 2.
Just add this :
barStrokeWidth:0,
or :
barShowStroke : false,
In your options.
http://www.chartjs.org/docs/#bar-chart-chart-options
//Boolean - If there is a stroke on each bar
barShowStroke : true,
//Number - Pixel width of the bar stroke
barStrokeWidth : 2,
update December 2021:
barStrokeWidth is deprecated.
I used inflateAmount: 0 (default value is auto) and it fixed the issue for me
docs: https://www.chartjs.org/docs/latest/charts/bar.html#dataset-properties
if barShowStroke : true
not working try to
barRadius: 0
I found that you can add skipNull property to dataset objects. And bars where value is null or undefined won't take any space.
https://www.chartjs.org/docs/3.2.0/charts/bar.html
I've been searching on and off stackoverflow and haven't found the answer, so here goes...
I have a custom SVG image path of a bus (see below) and it's drawing properly and "cutting out" portions that I want transparent as it should, just not the headlights. I've looked through the SVG path data docs at http://www.w3.org/TR/SVG/paths.html#PathData and must be missing something. I don't know how (in the path data, or maybe NOT in it) to identify what gets filled and what is part of a transparency mask or non-fill area. Here's what I'm working with.
var busSvg = {
// Bus body
// 282 wide... 322 wide with the sides added
top : 'c-4,-20,-18,-30,-38,-38 c-20,-8,-68,-18,-113,-19 c-35,1,-83,11,-113,19 c-20,8,-34,10,-38,38',
left : ' l-20,150 v170',
bottom : ' h26 v25 c0,30,45,30,45,0 v-25 h200 v25 c0,30,45,30,45,0 v-25 h26',
right : ' v-170 l-20,-150z',
// Marquee
marquee : 'm-60,10 h-182 c-20,0,-20,-25,0,-25 h182 c20,0,20,25,0,25z',
// Windshield
windshield : 'm-220,150 c-11,0,-14,-8,-12,-16 l12,-85 c2,-10,5,-17,18,-17 h220 c13,0,17,7,18,17 l12,85, c1,8,-1,16,-12,16 h-235z',
// Tires
tire_left : 'm15,100 c0,30,45,30,45,0 c0,-30,-45,-30,-45,0',
tire_right : 'm180,0 c0,30,45,30,45,0 c0,-30,-45,-30,-45,0',
};
var busIcon = {
path: 'M0,-100 '+busSvg['top']+busSvg['left']+busSvg['bottom']+busSvg['right']+busSvg['marquee']+busSvg['windshield']+busSvg['tire_left']+busSvg['tire_right'],
fillColor: "red",
fillOpacity: 1,
scale: .3, //.05,
strokeColor: "black",
strokeWeight: .5
};
fill-rule determines what portions of a shape are inside/outside it.