Is anyone else having problems with InfoBox?
Is there a better way to create infoBoxes and assign them classes? I can't set a class!
var myOptions = {
content: boxText,
disableAutoPan: false,
boxClass: "CLASS", <----
pixelOffset: new google.maps.Size(-140, 0),
zIndex: null,
boxStyle: {
background: "url('tipbox.gif') no-repeat",
opacity: 0.75,
width: "280px"
},
closeBoxMargin: "10px 2px 2px 2px",
closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
};
Seems to work for me:
JsFiddle Example
Element Attributes:
Related
What is the best practice to output a block of code on a styled object in Emotion?
A simple boolean statement looks like this:
const StyledComponent = styled('div')(({ check }) => ({
position: check ? 'relative' : undefined
})
But what is the best solution for a block of code like the following example if I don't want to check each line of code?
const StyledComponent = styled('div')(({ check }) => ({
// some style here
// ...
// only load pseud element if "check" is true
'&::before': {
content: `''`,
position: 'absolute',
left: '0%',
top: '0%',
width: '100%',
height: '100%',
background: 'blue'
}
}))
I have some solutions in mind.
Add the if statement on the content: as without content the rest won't show. It is not my favourite because the rest of the code still getting loaded.
Add the if statement to load a new div inside this component. This way I can target this specific div instead of using the pseudo-class before.
I gave it some thought and got to this solution:
const StyledComponent = styled('div')(
{
// some style here
position: 'relative'
},
({ check }) =>
// only load pseudo element if "check" is true
check
? {
'&::before': {
content: `''`,
position: 'absolute',
left: '0%',
top: '0%',
width: '100%',
height: '100%'
}
}
: undefined
)
I'm trying to style a map layer for a leafletJS map and have the following code but it doesn't seem to colour at all:
var vectorTileOptions = {
rendererFactory: L.canvas.tile,
vectorTileLayerStyles: {
weight: 2,
color: 'yellow',
},
};
var mapLayer = L.vectorGrid.protobuf("/tiles/admin_countries/{z}/{x}/{y}", vectorTileOptions)
It's just comes renders the standard blue, i'm not sure what i'm doing wrong, any suggestions would be great.
This would do it:
.setStyle({fillColor: '#dd0000', color: '#dd0000', weight: 1, opacity: 0.8, fillOpacity: 0.8});
actually, no I think you need to just adjust what you have there:
vectorTileLayerStyles: {
weight: 2,
fillColor: '#9bc2c4'
},
there is a lot about it here: https://leaflet.github.io/Leaflet.VectorGrid/vectorgrid-api-docs.html#styling-vectorgrids
The answer can be found here, by having a click log e.layer to console you can get the property which is used as the key for the vectorTileOptions and then style as appropriate.
This is a subject based on "jqGrid - Change filter/search pop up form - to be flat on page - not a dialog" .
I've made the search form to be flat based on the subject , but right now I want not to show always on page , I want to show it only when the user press Search button from the jqGrid.
Can anyone give me an hint or solution how to do that, please?
#Oleg can you help me with that , please?
Thanks
Th solution could be very close to the old one. You can use the following options of the searching dialog:
overlay: 0,
drag: false,
beforeShowSearch: function ($form) {
var $searchDialog = $form.closest(".ui-jqdialog"),
$gbox = $(this).closest(".ui-jqgrid");
$searchDialog.insertBefore($gbox);
$searchDialog.css({
position: "relative",
zIndex: "auto",
float: "left"
})
$gbox.css({clear:"left"});
}
Other options (like closeOnEscape: true, closeAfterSearch: true, closeAfterReset: true, searchOnEnter: true, searchOperators: true and other) can be chosen depend on your preferences.
The demo displays the searching dialog like
If you prefer to use Bootstrap CSS instead of jQuery UI CSS then one should add some additional lines:
overlay: 0,
drag: false,
beforeShowSearch: function ($form) {
var $searchDialog = $form.closest(".ui-jqdialog"),
$gbox = $(this).closest(".ui-jqgrid");
$searchDialog.insertBefore($gbox);
$searchDialog.css({
position: "relative",
zIndex: "auto",
padding: 0,
float: "left"
});
$searchDialog.children(".modal-dialog").css({
marginTop: 0,
marginBottom: 0
});
$searchDialog.find(".modal-content").css({
boxShadow: "none"
});
$gbox.css({clear:"left"});
}
See the demo which displays:
I have a Google Geochart with this bunch of options:
options = {
displayMode: 'markers',
sizeAxis: { minSize: 5, maxSize: 5, minValue: 5, maxValue: 5 },
colorAxis: { colors: ['#ac2925'] },
defaultColor: '#ac2925',
markerOpacity: 0.9,
width: '100%',
legend: false
};
I have an html table with some data inside, and I want to highlight a marker into the chart if I have a mousehover into the table and if the content of the cell is the same of the 'Value' field of the chart element.
How can I do that?
its too late, but the answer might useful for some one.
In your HTML, call the JS function
<tr onmouseover="selectMyOption(0)">
<td>My Label</td>
</tr>
In JS, get the position of the arrayToDataTable, make an object and pass to setSelection method.
function selectMyOption(x) {
var obj = [{row:x,column:null}]
geochart.setSelection(obj);
}
Is there a way to create a Legend control for series that belong to Indicator Plot with Dojo Charting.
I've tried some standard well described ways from the documentation. But with no success! Legend are not appearing for Indicator Plot.
Maybe somebody know is it possible to draw legend for this case or not?
Thanks in advance!
EDIT(my code added):
1. id - id of chart dom element.
2. opts.chartOpts - chart options from outside js.
3. legname - id of legend dom element.
4. scale.avg - is just a double value.
this.chart = new Chart(id, this.opts.chartOpts);
this.chart.addPlot("default", {
animate: { duration: 1000, easing: easing.linear },
type: ColumnsPlot,
markers: true,
gap: 1
});
this.chart.addPlot("avgline", {
type: IndicatorPlot,
vertical: false,
lineStroke: { color: "#00ff00", style: "ShortDash" },
stroke: { width: '1.2px' },
fill: '#eeeeee',
font: 'normal normal normal 11px Arial',
labels: 'none',
offset: { x: 32, y: 4 },
values: [scale.avg],
precision: this.opts.precision
});
//Add axis code goes here... cutted for clearance
this.chart.addSeries('Power', chartOptions.data);
this.chart.addSeries('Average', [scale.avg], { plot: 'avgline' });
var tip = new Tooltip(this.chart, "default", { 'class' : 'kaboom' });
var mag = new Magnify(this.chart, "default");
var hightlight = new Highlight(this.chart, "default");
this.chart.render();
this.leg = new Legend({ chart: this.chart, horizontal: false }, this.legName);
And as result of this code I see legend for 'default' plot 'Power' series only. And nothing for 'Average' series.