I have added an overlay to the map and changed colors of the overlay. I was wondering is it possible to add a hover event to the overlays? basically to when you hover over a US state if is is colored blue it will change to green. stuff like that. This is what i have right now.
http://www.opsdivina.net/soum/
thanks in advance
I think this will work!
google.maps.event.addListener(polygon,"mouseover",function(){
this.setOptions({fillColor: "#00FF00"});
tooltip.style.visibility = 'visible';
});
google.maps.event.addListener(polygon,"mouseout",function(){
this.setOptions({fillColor: "#FF0000"});
tooltip.style.visibility = 'hidden';
});
The following links will help!
http://econym.org.uk/gmap/example_mouseover.htm, http://philmap.000space.com/gmap-api/poly-hov.html, http://econym.org.uk/gmap/example_hoverchange75.htm
http://groups.google.com/group/kml-support-getting-started/browse_thread/thread/66e7a7ab1b269104/d050e85ab54679a1
For some reason the quote below isn't formatting directly and skipping some of the xml so you want to just go to the link listed above for exact solution. Tried to format it correctly here.
If you want to highlight a polygon upon mouse-over you need to add a
StyleMap to the feature with that polygon geometry.
Here's an example:
<?xml version="1.0" encoding="utf-8" ?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<Style id="sn_style">
<PolyStyle>
<color>00ff8080</color>
<fill>0</fill>
</PolyStyle>
</Style>
<Style id="sh_style">
<PolyStyle>
<color>7fff8080</color>
</PolyStyle>
</Style>
<StyleMap id="msn_style">
<Pair>
<key>normal</key>
<styleUrl>#sn_style</styleUrl>
</Pair>
<Pair>
<key>highlight</key>
<styleUrl>#sh_style</styleUrl>
</Pair>
</StyleMap>
<Placemark>
<name>Polygon with fade in/out</name>
<styleUrl>#msn_style</styleUrl>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<coordinates>
138.64,-34.93 138.64,-34.94 138.63,-34.94 138.62,-34.94
138.62,-34.95 138.62,-34.96 138.61,-34.97 138.60,-34.97
138.59,-34.97 138.58,-34.97 138.57,-34.97 138.57,-34.96
138.57,-34.95 138.57,-34.94 138.57,-34.93 138.57,-34.92
138.57,-34.91 138.56,-34.91 138.56,-34.90 138.57,-34.90
138.57,-34.89 138.56,-34.88 138.57,-34.88 138.58,-34.87
138.58,-34.86 138.58,-34.85 138.60,-34.85 138.61,-34.85
138.63,-34.85 138.64,-34.86 138.64,-34.87 138.63,-34.87
138.63,-34.88 138.62,-34.88 138.62,-34.89 138.63,-34.89
138.63,-34.90 138.64,-34.90 138.64,-34.91 138.64,-34.92
138.64,-34.93
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
</Document>
</kml>
You can also combine technique that with a Region to only show when
polygon is "active" in user's view. Examples at
http://kml-samples.googlecode.com/svn/trunk/kml/Region/
Related references:
http://code.google.com/apis/kml/documentation/kmlreference.html#stylemap
http://code.google.com/apis/kml/documentation/kmlreference.html#region
Hover states in KMZ and KML does not work in V3. the only way to really accomplish this would be to call the polygon directly in the scripting. Doing that would allow you to add the listener inline.
Related
How do i set the color of text in RDLC? Many example show changing color using Microsoft visual basic. But how do i add it in my code without it. I see many examples giving the same code such as below
My Condition (value): Textbox4 = 0
=IIF(Fields!Textbox4.Value = 0,"Red","Black").
But where do i put them? I tried to put in between the styles but it doesnt work.
<TablixCell>
<CellContents>
<Textbox Name="Textbox4">
<CanGrow>true</CanGrow>
<KeepTogether>true</KeepTogether>
<Paragraphs>
<Paragraph>
<TextRuns>
<TextRun>
<Value>Total Work Time</Value>
<Style>
<FontSize>8pt</FontSize>
<FontWeight>Bold</FontWeight>
</Style>
</TextRun>
</TextRuns>
<Style>
<TextAlign>Left</TextAlign>
</Style>
</Paragraph>
</Paragraphs>
<rd:DefaultName>Textbox4</rd:DefaultName>
<Style>
<Border>
<Color>LightGrey</Color>
<Style>Solid</Style>
</Border>
<PaddingLeft>2pt</PaddingLeft>
<PaddingRight>2pt</PaddingRight>
<PaddingTop>2pt</PaddingTop>
<PaddingBottom>2pt</PaddingBottom>
</Style>
</Textbox>
</CellContents>
</TablixCell>
Go to the tablecell where you want conditional color. Then go to Placeholder Properties.. then select Font then you can see beside color dropdown there is a button named Fx. Click the button and put your code there
=IIF(Fields!Textbox4.Value = 0,"Red","Black")
You are correct about putting it in the style tag. But there is some issue.I think you post the code for header textbox. You should do it in the value textbox. Value textbox will contain a DbColumn from your dataset as value and that field should look like below..
<TablixCell>
<CellContents>
<Textbox Name="Textbox4">
<CanGrow>true</CanGrow>
<KeepTogether>true</KeepTogether>
<Paragraphs>
<Paragraph>
<TextRuns>
<TextRun>
<Value>=Fields!SomeDbColumn.Value</Value>
<Style>
<Color>=IIF(Fields!SomeDbColumn.Value = 0,"Red","Black")</Color>
<FontSize>8pt</FontSize>
<FontWeight>Bold</FontWeight>
</Style>
</TextRun>
</TextRuns>
<Style>
<TextAlign>Left</TextAlign>
</Style>
</Paragraph>
</Paragraphs>
<rd:DefaultName>SomeDbColumn</rd:DefaultName>
<Style>
<Border>
<Color>LightGrey</Color>
<Style>Solid</Style>
</Border>
<PaddingLeft>2pt</PaddingLeft>
<PaddingRight>2pt</PaddingRight>
<PaddingTop>2pt</PaddingTop>
<PaddingBottom>2pt</PaddingBottom>
</Style>
</Textbox>
</CellContents>
How to change text color and font of rows header in browse fragment?.
The text not in menu but the text that appears above the rows.
I am assuming you are using the provided android.support.v17.leanback.widget.RowHeaderPresenter as the presenter for the HeaderFragment in your BrowseFragment.
The RowHeaderPresenter inflates the layout from R.layout.lb_row_header which looks like this:
<android.support.v17.leanback.widget.RowHeaderView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/row_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="?rowHeaderStyle" />
As you can see, this uses a style attribute called rowHeaderStyle, which is normally pointing to #style/Widget.Leanback.Row.Header. You can override this by putting the following in your styles.xml:
<style name="MyCustomRowHeaderStyle" parent="Widget.Leanback.Row.Header">
<item name="android:textColor">#color/red</item>
</style>
<style name="MyCustomBrowseStyle" parent="Theme.Leanback.Browse">
<item name="rowHeaderStyle">#style/MyCustomRowHeaderStyle</item>
</style>
And then use MyCustomBrowseStyle for the Activity containing the BrowseFragment by declaring it in your AndroidManifest.xml.
In addition to David's answer.
rowHeaderStyle applies the style both to menu items in HeaderFragment and row titles in RowFragment (these two fragments compose your BrowseFragment).
If you want their styles (font colors in particular) to be different, you can override BrowseFragment::onCreateHeadersFragment() and apply specific theme at that point.
1) Add these styles to styles.xml:
<style name="AppTheme.Leanback.Browse.Row" parent="#style/Theme.Leanback.Browse">
<item name="rowHeaderStyle">#style/AppTheme.Leanback.Row</item>
</style>
<style name="AppTheme.Leanback.Browse.Header" parent="#style/AppTheme.Leanback.Browse.Row">
<item name="rowHeaderStyle">#style/AppTheme.Leanback.Header</item>
</style>
<style name="AppTheme.Leanback.Row" parent="Widget.Leanback.Row.Header">
<item name="android:textColor">#color/font_row</item>
</style>
<style name="AppTheme.Leanback.Header" parent="Widget.Leanback.Row.Header">
<item name="android:textColor">#color/font_header</item>
</style>
2) Apply AppTheme.Leanback.Browse.Row theme to your activity in manifest.
3) Apply AppTheme.Leanback.Browse.Header theme to headers in your BrowseFragment:
// Kotlin snippet
override fun onCreateHeadersFragment() : HeadersFragment {
class CustomHeadersFragment : HeadersFragment() {
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View {
return super.onCreateView(
inflater.cloneInContext(ContextThemeWrapper(inflater.context, R.style.AppTheme_Leanback_Browse_Header)),
container,
savedInstanceState
)
}
}
return CustomHeadersFragment()
}
The answer by david.mihola helps with the color, however I still had problems with setting a custom font globally. For everybody who stumbles upon this question and is puzzled about this as well, here is my solution:
Thanks to the awesome work done by chrisjenx (Calligraphy), you can easily set a global (custom) font.
Simply add Calligraphy to your gradle.build and add the following snippet to your Application.onCreate():
CalligraphyConfig.initDefault(new CalligraphyConfig.Builder()
.setDefaultFontPath("fonts/MyCustomFont.ttf")
.setFontAttrId(R.attr.fontPath)
.build()
);
and in every Activity add the following:
#Override
protected void attachBaseContext(Context newBase) {
super.attachBaseContext(CalligraphyContextWrapper.wrap(newBase));
}
This has done the font-trick for me on every single TextView, without modifying layouts. The documentation of Calligraphy also offers some more possibilities. Check it out.
I hope this helps other people who find this question and are trying to set (custom) fonts globally.
I'm working on a project where we are displaying a map of the state of Oregon using google maps. Right now I have a KML Layer that has lines for all the counties and a red overlay. I'm trying to change the color of the overlay but any changes I make to the style tags in the kml file aren't showing up.
The kml file is here, http://sixswords.net/oregon/kml/oregon_counties.kml
You can see the map with the overlay here https://maps.google.com/?q=http://sixswords.net/oregon/kml/oregon_counties.kml
Edit for more specific information:
The original kml file style looks like this.
<Style id='Style0-polygon-3'>
<LabelStyle>
<scale>0.0</scale>
</LabelStyle>
<LineStyle>
<color>ff666666</color>
<width>1</width>
</LineStyle>
<PolyStyle>
<color>7f0000ff</color>
</PolyStyle>
<BalloonStyle>
<text>$[description]</text>
</BalloonStyle>
</Style>
<Style id='Style0-polygon-3-hover'>
<LineStyle>
<color>ff666666</color>
<width>1</width>
</LineStyle>
<PolyStyle>
<color>7f0000ff</color>
</PolyStyle>
<BalloonStyle>
<text>$[description]</text>
</BalloonStyle>
</Style>
<StyleMap id='Style0-polygon-3-map'>
<Pair>
<key>normal</key>
<styleUrl>#Style0-polygon-3</styleUrl>
</Pair>
<Pair>
<key>highlight</key>
<styleUrl>#Style0-polygon-3-hover</styleUrl>
</Pair>
</StyleMap>
I've tried changing the color value for the polystyle tag in the Style0-polygon-3 style but it doesn't actually change anything.
That KML specifies red polygons.
This is the same with green polygons
https://developers.google.com/kml/documentation/kmlreference?csw=1#colorstyle
<color>
Color and opacity (alpha) values are expressed in hexadecimal notation. The range of values for any one color is 0 to 255 (00 to ff). For alpha, 00 is fully transparent and ff is fully opaque. The order of expression is aabbggrr, where aa=alpha (00 to ff); bb=blue (00 to ff); gg=green (00 to ff); rr=red (00 to ff). For example, if you want to apply a blue color with 50 percent opacity to an overlay, you would specify the following: 7fff0000, where alpha=0x7f, blue=0xff, green=0x00, and red=0x00.
so <color>
<PolyStyle>
<color>7f0000ff</color>
</PolyStyle>
Is red.
<PolyStyle>
<color>7f00ff00</color>
</PolyStyle>
Is green.
I've written an R script to create a KML file and the resultant KML below loads icon18.png fine when viewed in Google Earth:
<kml xmlns:xsd="http://schemas.opengis.net/kml/2.2.0/ogckml22.xsd" xmlns:xmlns="http://www.opengis.net/kml/2.2/" version="1.0">
<Document>
<name>Member locations</name>
<open>1</open>
<Folder>
<name>SpatialPointsDataFrame</name>
<Style id="pnt1">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/kml/pal2/icon18.png</href>
</Icon>
</IconStyle>
<BalloonStyle>
<text>$[description]</text>
</BalloonStyle>
</Style>
<Placemark>
<name>1</name>
<styleUrl>#pnt1</styleUrl>
<Point>
<extrude>1</extrude>
<altitudeMode>clampToGround</altitudeMode>
<coordinates>151.26250,-33.89374,0</coordinates>
</Point>
</Placemark>
</Folder>
</Document>
</kml>
However when loaded into a KmlLayer using the maps API and the following code it displays as the default blue 'teardrop' marker:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=mykey&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var ctaLayer = new google.maps.KmlLayer('http://www.peter-johnson.com.au/test.kml');
ctaLayer.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
Looking at other questions here I could only see ones posted without code that went unanswered or some related to the web server not being publically available.
A few indiciated there problem was now OK so I guess loading custom icons into a KmlLayer is supported but I have some problem with the KML format or the way I'm loading it?
As suggested in a comment I've just placed the KML in a publically available area here:
http://www.peter-johnson.com.au/test.kml
And here is the HTML:
http://www.peter-johnson.com.au/test.htm
The KML you have posted doesn't work with either Google Maps or KmlLayer even after I make it validate
Your KML on Google Maps - Blue default marker
Your KML on Google Maps API v3 map - Blue default marker
For what it is worth, it does work with geoxml3
Your version does have an invalid schema (at least according to feedvalidator)
UPDATE:
The problem is with the location of the definition of the shared styles.
This works and on Google Maps
The Style definition didn't work where you had it. Shared styles look like they have to be in a Document.
I'm trying to create an XSLT which lists out movies, and I'm styling the titles so that each title has it's own color, I then select the title with with interpolation (XPath?)
Here is the XSL file:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<head>
<title>Videos</title>
<style>
table, tr, td { border: thin black solid }
th { background-color: #AAFFAA }
.Daredevil { color: red; }
/* Look at those spaces! Hrmphf! */
.Drag Me To Hell { color: green; }
</style>
</head>
<body>
<table>
<tr><th>Movies</th></tr>
<xsl:apply-templates select="//movie"/>
</table>
</body>
</html>
</xsl:template>
<xsl:template match="//movie[not(#title=preceding::movie/#title)]">
<!-- Title should be the one of the titles in the CSS -->
<tr class="{#title}"><td><xsl:value-of select="#title"/></td></tr>
</xsl:template>
</xsl:stylesheet>
The problem however is that some movie titles contain spaces. Can I have spaces in the name? If not, are there any workarounds (besides having underscores or the like in the XML)?
Update:
Ok, I get that it's not possible. At the moment I'm using translate(#title, ' ', '-') Which works when the CSS-names are delimited by -. I would still like to know if there are any better way of doing this. :)
class="Drag me to" creates an element with three different classes.
The selector .Drag.Me.To will match elements with all three classes.
However, it will match them in any order, and won't count duplicates.
No, you cannot have spaces in CSS rule names
CSS classes / id´s cannot contain spaces.
Since a space is used to seperate different classes.
You will have to resolve to a (-)
It feels a bit odd to me to tie the CSS to the actual data content in this way. Your stylesheet seems to know in advance what it expects to find in the data file, and that feels like bad design - it should be generic. Why not introduce an indirection from movie title to CSS classes:
<xsl:variable name="movieStyles">
<movie title="Drag me to hell" css-class="hell-class"/>
<movie ...
</xsl:variable>
then <tr class="{f:css-class-for-title(#title)}" ...
where the function f:css-class-for-title uses the lookup data to map movie titles to CSS classes.