Predix_Logo
  • Categories
    • Questions
    • Predix | Updates
      • Pricing
      • Product
    • Deloitte - Private
    • How-To
    • Accenture-Private
  • Explore
    • Topics
    • Questions
    • Articles
    • Feedback or Feature Requests
  • Sign in
  • Home /
  • Questions /
avatar image
0
Question by jeffrey.knapp@ge.com · May 18, 2017 at 12:36 PM · schedulingmapping

Change px-map-marker-static color

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).

Comment
Add comment
10 |1200 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

2 Replies

  • Sort: 
avatar image
0
Best Answer

Answer by Randy Askin · May 18, 2017 at 01:01 PM

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>


Comment
Add comment · Show 6 · Share
10 |1200 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image francois.vallernaud@ge.com · Jun 19, 2017 at 08:27 AM 0
Share

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

avatar image Randy Askin francois.vallernaud@ge.com · Jun 19, 2017 at 08:38 AM 0
Share

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.

avatar image francois.vallernaud@ge.com · Jun 19, 2017 at 12:54 PM 0
Share

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 ?

avatar image Randy Askin francois.vallernaud@ge.com · Jun 19, 2017 at 01:20 PM 0
Share

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>

avatar image robin.kalappurathattel@exeloncorp.com Randy Askin · Jan 09, 2018 at 07:13 AM 0
Share

Is there any way to create custom types and map them to different colors as I need more than 4 distinct colors??

avatar image Randy Askin robin.kalappurathattel@exeloncorp.com · Jan 09, 2018 at 08:49 AM 0
Share

Answered here.

avatar image
0

Answer by jeffrey.knapp@ge.com · May 18, 2017 at 02:02 PM

Thanks!! Never would have guessed that's where more info would be

Comment
Add comment · Share
10 |1200 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

Follow this Question

Answers Answers and Comments

73 People are following this question.

avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image

Related Questions

GIS services on PREDIX with vendors like ESRI? 3 Answers

Does Predix support Quartz Scheduler? 3 Answers

how to simplify px-map screen 3 Answers

Unable to Schedule an orchestration, getting 403 Forbidden 4 Answers

Intelligent Mapping Service - Error uploading JSON data 3 Answers

GE Monogram
  • Legal
  • Cookies
  • Forum Terms
  • Contact Us
  • Copyright © 2017 General Electric Company. All rights reserved.


Enterprise
Social Q&A

  • Anonymous
  • Sign in
  • Create
  • Ask a question
  • Create an article
  • Submit your feedback or feature request
  • Categories
  • Questions
  • Predix | Updates
    • Pricing
    • Product
  • Deloitte - Private
  • How-To
  • Accenture-Private
  • Explore
  • Topics
  • Questions
  • Articles
  • Feedback or Feature Requests