I have a mapbox layer (created in studio) with different icons based on data conditions. Now I'm adding a toolbar to show and hide various icons based on the filter. This works great, but I want to adjust the transition to make it a bit smoother.
I've read some posts about icon-opacity-transition, but it didn't work for me.
map.setPaintProperty('layer-name', 'icon-opacity-transition', { "duration": 300 } );
results in cannot read property 'value' of undefined
Is it possible to change the icon-opacity transition or is it at least possible to show and hide a layer with some custom transition values?
Not sure if this will help you still, but it was very important for our project. Its a 'global map property' called 'fadeDuration'...
new mapboxgl.Map({
fadeDuration: 0,
...
})
I'm not sure about accessing by layer though...
https://github.com/mapbox/mapbox-gl-js/issues/6519#issuecomment-390001993
Related
I'm using the Inovua React Data Grid for a project, and we are trying to make some subtle changes to increase the amount of data we can see on a smaller grid. We only have limited space, so we're trying to remove unnecessary clutter. I have been struggling to find any answers to my questions on the API reference documentation, which in my opinion is quite lacking.
Trying to decrease the padding- I believe there is a default padding of 8px within the grid, but seemingly nowhere to change it. I want to trim it down a bit, so it appears more like an Excel sheet.
I want to remove the header ellipsis!! There literally is a page in their reference docs for this (columns.headerEllipsis), but it just doesn't work when I try it. Perhaps they're demo/example is just awful, but I try adding headerEllipsis: false as a column property and my terminal tells me it 'isn't a known property'.
This seems like bad design on their part, but when a column/data gets trimmed (with or without ellipsis) because the text is too long, hovering over it does not display the entire text. Is there no way to change this?
I have considered writing a custom header render function to specifically change the ellipsis style settings to solve (2) as well as to render the headers as a tooltip to solve (3), but this seems excessive. Is there a better way to do this?
Thanks!
Still unable to solve the padding issue (1), but I was able to easily resolve (2) and (3) by building that custom header render function after all. It wasn't difficult, here is what I did:
const getHeader = (name: string) => {
return (cellProps: CellProps) => {
cellProps.headerEllipsis = false; // disables ellipsis
return <div>
<Tooltip title={name}> {/* material-ui Tooltip: */}
<span>{name}</span> {/* displays text on hover */}
</Tooltip>
</div>
}
};
And then I just added this line where I defined columns:
name: e,
header: getHeader(e), // add this line
By defining the custom header render function, it also overwrites a lot of the default styles (i.e. headerEllipsis). This actually made it much easier to adjust the spacing and shrink the columns in the grid, so even though I couldn't find the solution to (1), this custom render function is definitely the way to go!
I am trying to create a profile menu for my polymer website, something on the lines of github.com
If you notice,there is a triangular tip at the top of the menu.I am trying to create a similar triangle at the top of paper-listbox.
The problem I am facing is that the triangle seems to hide as soon as it gets out of the boundaries of paper-listbox.
I have create a jsbin to demonstrate my problem: http://jsbin.com/samaloqowu/1/edit?html,console,output
If you change the top property of the triangle (say -16px), it hides when it gets out of the listbox region. Please help me solve this CSS issue.
Short answer : No you can't.
Explanation : Because the dropdown content get encapsulated in a slotted element that gets styled inside the shadowRoot of the custom element you try to modify the behavior. And the paper-menu-button doesn't actually gives you a way to directly customize the slotted.
But there is a trick ! You can access the slotted through classic javascript. Just alter your connectedCallback function and add this line :
...
connectedCallback() {
super.connectedCallback();
this.$.profileMenu.$.dropdown.querySelector('.dropdown-content').style.overflow = 'visible';
...
}
...
This should do the trick, I agree this looks totally awful and trying to force and change the initial behavior of an element is not really recommended but well it seems to work, just make some tests when the element gets in a new context to see if anything breaks.
UPDATE (22/09/2017) :
Thinking of that again, I think this is a terrible idea to change this overflow to visible, I guess the polymer team has set the overflow to auto because if the list get long and you force the height of the element, the list will flow and be visible which is not really a dropdown anymore, but more like a full list display and that will mess with the general design purpose of your app. IMO when you start trying to mess with the inner properties of a custom element it means this element doesn't quench your requirement, and that it's time to make your own, especially when you try to modify the design of a custom element that has a design already implemented.
I'd like to customize the featureType "landscape" so that the underlying relief (mountains and valleys) remains untouched, but the landscape cover, which is mostly green, is removed.
Specifically, I am interested in Swiss map. (see Swiss map). Now, if I set
{
featuretype: "landscape.natural.terrain",
stylers: [
{ visibility: "off" }
]
}
everything related to "landscape.natural" disappear. The same thing happens if I set
{
featuretype: "landscape.natural.landcover",
stylers: [
{ visibility: "off" }
]
}
The list of available featureTypes doesn't provide any other landscape type to affect the landcover more specifically, but I am not an expert, so I am wondering whether what I'd like to do is even possible, and if so how.
Thank you very much in advance for your support,
Franco
It is because you set the visibility of all related to the featureType to off.
Styled maps allow you to customize the presentation of the standard Google base maps, changing the visual display of such elements as roads, parks, and built-up areas.
Styled maps use two concepts to apply colors and changes to a map:
Map features are the geographic elements that can be targeted on the map. These include roads, parks, bodies of water, and more, as well as their labels.
Stylers are color and visibility properties that can be applied to map features. They define the display color through a combination of hue, color, and lightness/gamma values.
The one you use
visibility (on, off, or simplified) indicates whether and how the element appears on the map. A simplified visibility removes some style features from the affected features; roads, for example, are simplified into thinner lines without outlines, while parks lose their label text but retain the label icon.
Familiarize yourself to MapTypeStyle object specification
List of FeatureType
ElementType
Styler
To learn more on styling the maps go to Customizing Google Maps: Styling the Base Map
Hope this helps
I am currently facing the challenge to realize a Slider in SAPUI5 exactly like the Threshold-Slider from Webdynpro, which looks like this.
How would you do this? It is highly dynamic, the scale (can be 5 values, can be 3 values etc), the descriptions are depending on the scale value ...
Currently I only find Slider in API, but I doubt this is realizable with it ... any ideas?
18.06.2015: currently I am working on extending the sap.ui.commons.Slider, what I got right now is far away from what I try to achieve:
When clicking on slider, Change Background Color via renderer (each value should have another Color
Textfield on the right-hand side and a link on the left side (optional parts, coloring is more important)
What i got...
sap.ui.commons.Slider.extend("my.Slider", {
renderer : {
renderInnerAttributes : function(oRm, oControl) {
console.log(oRm); // try to find out, what I re-style
console.log(oControl); // try to find out, what I re-style
oRm.addStyle('background-color', '#ffff00'); // no effect
},
}
});
var oSlider6 = new my.Slider({
id : 'Slider6',
tooltip : 'Slider6',
width : '500px',
min : 1,
max : 4,
value : 0,
totalUnits : 4,
smallStepWidth : 1,
stepLabels : true,
labels : [
"Bad", "Medium", "Good", "Very Good"
]
});
return oSlider6;
I think the easiest way to achieve this is to either copy the sap.m.Slider and modify it or to inherit from sap.m.Slider with the UI5 extend mechanism and overstyle it. Or you could extend the sap.m.ProgressIndicator and make it interactive but that would be a bit more work.
All the basic functionality is already there in the slider (scale, number of values, ...) and you can easily modify the background color and the styling of the handle. A link a textual value can be added with a label control next to it.
Check this youtube video on custom controls for more details on how to use the extension mechanism of UI5:
https://www.youtube.com/watch?v=4KPS2-LHoO0
Hope that helps,
Michael
you could also choose a d3js control. Either way would take some changes. You can add a style in the xml view. By adding css in your css file you could make them visually the same as your desired controls. The slider has min, max and step by default.
In the change event you could add or remove style classes (addStyleClass/removeStyleClass) to show different colors.
The text you could show seperately and handle with formatters.
If you want it all in one control, you should review this page.
I have the following code which is a custom icon on Google Maps V3. I want to rotate it using the jQuery.Rotate plugin.
var image = new google.maps.MarkerImage(
"markers/test.png",
new google.maps.Size(52, 52), // size
new google.maps.Point(0, 0), // origin
new google.maps.Point(20, 0) // anchor
);
marker = new google.maps.Marker(
{
map: map,
draggable: false,
position: markerData[i].latLng,
visible: true,
icon: image,
optimized: false
});
The problem is jQuery.Rotate is wanting the DOM id to identify the element to rotate.. Markerimage doesn't have one and I can't specify it.
Eg.
<img src="img" id="image">
$("#image").rotate(15);
Can anyone show me some sample code that will allow me to either assign an id to the MarkerImage so that jQuery.Rotate can use it eg. #image assuming the id is id="image", or is there another way of telling jQuery.Rotate to use the MarkerImage rather than point to a DOM element?
Any help would be appreciated.. If I can't find an answer to this I'll need to create 360 versions of the same icon for every icon I use of which there are many. I prefer to use this particular plugin though. Hopefully there's an easy answer.
I can't provide an 'answer', just a hint and observation.
Assuming that your map is a DOM object called 'map', have a look at the DOM object map.l.innerContainer.outerHtml. (thats a lower case "l" - map.l)
In outerHtml, amongst many other divs, you should be able to find a div that contains the img file for your icon.
I've wanted to do the same thing as you, rotate icons on the fly, but I haven't yet found the time to see if I can organise a way to put an id on these divs to facilitate using jquery to rotate them. The divs are created by the api.
There are some DOM mutation events (like DOMNodeInsertedIntoDocument) described in the literature but evidently their implementation is unreliable / uneven and it sounds like they have been removed from the W3C spec. I haven't tried any of these yet so can't comment from personal experience.
In my case I just decided to create icon files for each cardinal direction, N NNE NE ENE etc. For my application that seems to get the icons aligned well enough to look ok.
If you succeed in your quest please share your solution here for others.