I have a map of my country divider to touristic regions (PathOverlay), I wanna be able to have the name of every region above it, with just plain text, no bubbles no anything.
I've already searched how to do this but all I found was ItemizedOverlayWithFocus in the svn trunk of osmdroid.
Does anyone have any idea how to add simple text on the map (with latitude and longitude of course) ?
Sub-class Overlay (as for instance a "SimpleTextOverlay").
In the constructor or with setters, initialize your text, its position (GeoPoint), and the Paint to be used.
Then implement draw method this way:
#Override protected void draw(Canvas canvas, MapView mapView, boolean shadow) {
if (shadow) return;
//Get the screen position:
final Projection pj = mapView.getProjection();
pj.toMapPixels(geoPosition, screenPosition);
//And draw your text at screenPosition:
canvas.drawText(text, screenPosition.x, screenPosition.y, paint);
}
Answer posted here
How to add text below/above in the middle of the polyline in osmdroid
Use the Marker overlay class, which was added to osmdroid somewhere around v5.2.
Set the title, then set the icon to null, then add it to the map (in that order)
distanceMarker = new Marker(mapView);
distanceMarker.setIcon(null);
distanceMarker.setTextIcon(distance);
distanceMarker.setOnMarkerClickListener((marker, mapView) -> true);
GeoPoint p3 = new GeoPoint((loc.getLatitude()+poi.getLat())/2,(loc.getLongitude()+poi.getLon())/2);
distanceMarker.setPosition(p3);
mapView.getOverlayManager().add(distanceMarker);
Related
I have an list of widgets. The widgets are background images for a website. The last widget(image) in this list is displayed onscreen. As nav functions push/pop, the last element is removed/added.
One of the fields in the Widget(BackdropImage) is a bool called 'isForeground'. I need access to it.
Why? Some background images are foreground and are to be rendered above the site's semi-transparent background texture, some are to be rendered behind it.
If I have a List(BackDropImage) and the BackDropImage contains:
Path, BoxFit, Opacity, isForeground(bool) etc etc. How can I get access to the last BackDropImage in BackDropImage list and access its isForground field?
//PSUDO WIDGET TREE:
if(backdropImageList.last's 'isForground' field is FALSE) BackDropImage.last,//render here below the texture
BackgroundTextureWidget,
if(backdropImageList.last's isForground field is TRUE) BackDropImage.last //render here above the texture
HeadingWidget,
OtherWidgets
I'd appreciate help if possible (or alternative approaches). The alterative is to flip a bool programmatically every time a button is pressed/popped and keeping track of what images are displayed where. Knowing which images are fore/background in the first place and controlling from the object itself is much neater IMO.
Thanks folks.
list.firstWhere((x) => x['isForground'] == true);
Widget is an abstract class. When working with Widgets like Container etc that have member variables you need to access programmatically, it can be done like this:
Widget testContainer = Container (width:100)
print(testContainer.width) // WON'T WORK
print((testContainer as Container).width) // WILL WORK
To access the member variables of individual Widgets in a list of Widgets:
List<Widget> listOfWidgets = [Container(color:Colors.blue), Container(color:Colors.red), Container(color:Colors.green)]
void printColorsOfAllContainers () {
for (var element in listOfWidgets) {
if (element is Container) {
print(element.color);
}
}
}
Alternatively, you can also do things like this:
void printColorsOfAllContainers() {
final List<Color> listOfContainerColours = [];
for (var element in listOfWidgets) {
element as Container;
listOfContainerColours.add(element.color!);
}
}
What is the easiest way to draw an arrow instead of the bar?
I have tried this method, to add an image in every point, but the arrow is not responsive and I can't set the size of each arrow image.
// Variables 'sun' and 'cloud' are created before with `new Image()`
Chart.pluginService.register({
afterUpdate: function(chart) {
chart.config.data.datasets[0]._meta[0].data[7]._model.pointStyle = sun;
chart.config.data.datasets[1]._meta[0].data[2]._model.pointStyle = cloud;
}
});
And will give you this result.
I have achieved it here JSFiddle link.
In the default openlayers draw interaction, there is no line segment which connects where your mouse is to the finish point (first image). When I set up a custom style, this segment is present which I don't want (second image). Does anyone know how I eliminate this final segment, like the default style does?
You'll need a style function that can style points, lines and polygons and distinguish by the geometry's type. Important: the polygon style should only have a fill, not a stroke. Because the boundary of the polygon is a separate linestring. A minimal working style function for the draw interaction would look like this:
var styles = {
Point: new ol.style.Style({
image: new ol.style.Circle()
}),
LineString: new ol.style.Style({
stroke: new ol.style.Stroke()
}),
Polygon: new ol.style.Style({
fill: new ol.style.Fill()
})
};
function styleFunction(feature) {
return styles[feature.getGeometry().getType();
}
I had trouble removing the selected and down state colors for a spark list using IconItemRender. If you are making a mobile app and using IconItemRender (instead of ItemRenderer) there is no autoDrawBackground property.
I figured I'd drop it in here after figuring it out thanks to this page: http://www.sajeevkumar.com/2012/01/08/flex-4-6-list-mobile-iconitemrenderer-background-image/
You can do the following to muck around with the down and selected colors. For more control over items in a list using IconItemRender look at the LabelItemRenderer class and the drawBackground function.
override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void {
var bgColor:uint = 0xffffff;
graphics.clear();
graphics.beginFill(bgColor,1);
graphics.lineStyle();
graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
graphics.endFill();
// Draw the separator for the item renderer
super.drawBorder(unscaledWidth, unscaledHeight);
opaqueBackground = bgColor;
}
I tried setting all possible styles to something other than grey, just to try and get rid of the grey overlay as shown in the "Hello item 1" in the attached image of a list. Nothing worked. I examined the ListSkin class too and didn't fins anything that would draw these. How to get rid of these overlays?
<s:List id="list" width="100%" height="100%"
dataProvider="{dp}"
focusAlpha="0"
contentBackgroundAlpha="0"
contentBackgroundColor="0xFFFFFF"
selectionColor="0xFFFFFF"
downColor="0xFFFFFF"
borderVisible="false"
>
</s:List>
I just helped a client with this same thing. You, basically, have to extend the LabelItemRemderer class to not draw the rectangle. It is not exposed via styles or colors for you to change.
Look at this code (Starting at line 853 in the LabelItemRemderer):
// Selected and down states have a gradient overlay as well
// as different separators colors/alphas
if (selected || down)
{
var colors:Array = [0x000000, 0x000000 ];
var alphas:Array = [.2, .1];
var ratios:Array = [0, 255];
var matrix:Matrix = new Matrix();
// gradient overlay
matrix.createGradientBox(unscaledWidth, unscaledHeight, Math.PI / 2, 0, 0 );
graphics.beginGradientFill(GradientType.LINEAR, colors, alphas, ratios, matrix);
graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
graphics.endFill();
}
You basically need some way to force this code to not run. You can do this by creating your own itemRenderer from scratch. Or you can extend the LabelItemRenderer, override the drawBackground() method and copy all the parent drawBackground() code into your extended child; minus the block above.
I'd love to see the color exposed as a style or something. I'd love to see a magic property (or style) we could use to make the overlay vanish altogether. Feel free to log this as a bug into the Apache Flex Jira.