Is there a way to change the color of the px-map-marker-static element? I have several but I want them to be classified / grouped by colors (i.e. these markers are check in data points and are green for good. These ones are bad check ins and are red).
If you go to the map demo page (https://www.predix-ui.com/#/components/px-map/) and use the dropdown at the top to select the px-map-marker-static subcomponent, you'll see that you can change the type to "important" for red markers.
We don't currently have a green marker type out of the box, but you can use these CSS variables to override the color for "unknown" "info" or "warning" types to be green. David from our team is going to look into why these variables are missing from the documentation page.
If you're not already familiar with using CSS variables on Polymer elements, you can use these variables in your application's block as follows:
<style is="custom-style">
:root { // or use a selector to target your map specifically
--px-map-icon-info-color: green;
}
</style>
I'm trying to to apply what you suggest to override the color for "unknown" "info" "warning" and "important" types. So in my main scss file I'm doing something like that $px-map-icon-unknown-color: $green; @import 'px-map/???_scss
My problem is that in the px-map bower component there is no scss file. So I don't know what file I have to import
Those sass variables are only used internally within the px-map component. You can see they are defined as, for example $px-map-icon-info-color: var(--px-map-icon-info-color, $primary-blue) which basically translates to "use the color defined in the css variable called --px-map-icon-info-color, unless nothing is found, in which case fall back to $primary-blue." You shouldn't try to use the sass variable, you should provide a value for the CSS variable as I've shown in the code snippet above.
Thanks, it helps. . Nevertheless to integrate the snippet in my app I had to clone px-map.html to px-map-n20.html with new id px-map-n20 and to use px-map-n20 in my view. I had no other idea to take the snippet. My app is not full polymer but is based on agularjs and is consuming polymer components such as px-map.
Do you think that there was a better way to integrate your snippet. I mean without having to duplicate and rename px-map ? For example is it possible to init root somewhere in the javascript of my an agular controller ?
You shouldn't need to fork our component in order to get styling to work. As I said in my comment, you don't necessarily need to use the :root selector either, you could give your px-map an id or class and target it that way using regular css rules instead. Or you could even provide the css in-line, e.g. <px-map style="--px-map-icon-info-color: green;" ... ></px-map>
Is there any way to create custom types and map them to different colors as I need more than 4 distinct colors??
Thanks!! Never would have guessed that's where more info would be
