Hiding/Removing business names & markers in react-native-maps' mapview - react-native

I'm implementing my custom marker pin in MapView component. Are there a way to hide or remove third party markers, like hotels, restaurants, sales stores, etc...?
I have searched in component docs but found nothing.


As far as I know, there is one way to turn off the business texts and markers. It is when we are applying a style to <MapView>'s customMapStyle property.
From this site, https://mapstyle.withgoogle.com/
, skip to styling selecting "use the Legacy JSON styling wizard"
Then select "more options" for a more specific styling.
Select Points of Interest, then select Business, then select Text fill and Text Outline and make their visibility as hidden.
We'll click "Finish" button, then "copy JSON" button. Now we have JSON formatted data copied.
You may hold this info in a variable named, say mapStyle
mapStyle=
[
{
"featureType": "poi.business",
"elementType": "labels.text.fill",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.business",
"elementType": "labels.text.stroke",
"stylers": [
{
"visibility": "off"
}
]
}
]
The last thing to do is to use mapStyle and making it equal to customMapStyle property like this..
<MapView
customMapStyle={mapStyle}
{/*other properties*/}
/>

Related

Does SurveyJS have a built-in way to specify "show N questions per page"

We are using Survey Creator to allow our users to build questionnaires. However, we want to keep it simple and we don't want them to have to deal with pagination.
In other words, in the builder, we want to disable pages (showPagesToolbox = false) and have them create a set of questions all on a single page.
When we present this to respondents, we want them to see a single question per page. I.e. Q1 is on page 1, Q2 is on page 2, etc.
Does the SurveyJS library provide a way of handling this situation, i.e. here are all the questions, show them with N questions per page?

There is an option, whch allows you to automatically display one question per page. To enable this you need to set "questionsOnPageMode": "questionPerPage" on the survey level. Here's an example:
{
"pages": [
{
"name": "page1",
"elements": [
{
"type": "text",
"name": "question1"
},
{
"type": "checkbox",
"name": "question2",
"choices": [
"item1",
"item2",
"item3"
]
}
]
}
],
"questionsOnPageMode": "questionPerPage"
}
This is also configurable through the SurveyJS creator by opening the "Survey Settings" dialog, then going to the "Navigation" section, and finally setting the "Questions on page mode" value.
Unfortunately at this time there is no option to specify N number of questions per page. The documentation for this setting is here.

Vega mark vs view mouseout events

I'm trying to write a Vega signal that stores data when you mouseover a particular mark, and then resets when you mouseout from the entire view.
I tried the following:
{
"name": "mysignal",
"on": [
{
"events": {
"source": "scope",
"type": "mouseover",
"markname": "layer_0_layer_0_marks"
},
"update": "datum"
},
{"events": {"source": "view", "type": "mouseout"}, "update": "null"}
]
}
But when you mouseout of the mark specified the signal gets set back to null, even though I didn't mouseout of the entire view. I have a full spec in the editor link below so you can observe the behaviour I'm talking about. My question is: Is there a way to prevent the signal from being set to null on mouseout from the mark, so that it only gets reset on mouseout from the whole view.
Open the Chart in the Vega Editor

Specifying color mapping in react components

Using the new "Colors" section of the analytical designer, I can specify custom colors to use for my insight:
When I get my visualization object, this comes through with properties that look like this:
"colorMapping": [
{
"id": "fdda26a33ca048f28bc702f047c04d73",
"color": {
"type": "guid",
"value": "guid3"
}
},
{
"id": "893b13af5d064ec5ba57f82ea3241bbe",
"color": {
"type": "guid",
"value": "guid4"
}
}
]
Passing that into the config section of the react component props results in some console errors (item.predicate is not a function in color.js:219). It seems to me that the color map values aren't coming through correctly when I get the visualization object.
Is there any way to get the custom color values and set them in the react component props?

If you use Visualization component consuming URI of existing visualization, it will automatically use this color mapping from visualization object so no extra config is needed.
If you use explicit components like BarChart or so, you need to transform colorMapping into form of so called predicates. For more info please read Gooddata.UI documentation and provide also colorPallete config. Hope this helps

Where can I find all list of style properties supported by react native?

Where can I get a list of the style properties supported by React Native for each type of component?

Here's a cheatsheet:
React Native Styling Cheat Sheet
The supported styles are in the official documentation for each component. Here are the links for View and Text components:
View : https://reactnative.dev/docs/view#style
Text: https://reactnative.dev/docs/text#style
Note that where it says View Style Props... on the top of styles for Text, it means it also supports (most of) the styles that View supports.

I have extracted a list of valid styles from react native logs.
Below collection help me alot during regular work.
[
"alignContent",
"alignItems",
"alignSelf",
"aspectRatio",
"backfaceVisibility",
"backgroundColor",
"borderBottomColor",
"borderBottomLeftRadius",
"borderBottomRightRadius",
"borderBottomWidth",
"borderColor",
"borderLeftColor",
"borderLeftWidth",
"borderRadius",
"borderRightColor",
"borderRightWidth",
"borderStyle",
"borderTopColor",
"borderTopLeftRadius",
"borderTopRightRadius",
"borderTopWidth",
"borderWidth",
"bottom",
"color",
"decomposedMatrix",
"direction",
"display",
"elevation",
"flex",
"flexBasis",
"flexDirection",
"flexGrow",
"flexShrink",
"flexWrap",
"fontFamily",
"fontSize",
"fontStyle",
"fontVariant",
"fontWeight",
"height",
"includeFontPadding",
"justifyContent",
"left",
"letterSpacing",
"lineHeight",
"margin",
"marginBottom",
"marginHorizontal",
"marginLeft",
"marginRight",
"marginTop",
"marginVertical",
"maxHeight",
"maxWidth",
"minHeight",
"minWidth",
"opacity",
"overflow",
"overlayColor",
"padding",
"paddingBottom",
"paddingHorizontal",
"paddingLeft",
"paddingRight",
"paddingTop",
"paddingVertical",
"position",
"resizeMode",
"right",
"rotation",
"scaleX",
"scaleY",
"shadowColor",
"shadowOffset",
"shadowOpacity",
"shadowRadius",
"textAlign",
"textAlignVertical",
"textDecorationColor",
"textDecorationLine",
"textDecorationStyle",
"textShadowColor",
"textShadowOffset",
"textShadowRadius",
"tintColor",
"top",
"transform",
"transformMatrix",
"translateX",
"translateY",
"width",
"writingDirection",
"zIndex"
]
Implementation details are here:
https://github.com/vhpoet/react-native-styling-cheat-sheet/blob/master/README.md

Datatables 1.10 bSelectedOnly equivalent

I'm trying to find the equivalent of bSelectedOnly in the new version of Datatables 1.10.
I only want to print rows that the user has selected, or print all rows if they havn't selected any.
"tableTools": {
"sSwfPath": "/Datatables-1.10.0/extensions/TableTools/swf/copy_csv_xls.swf", //Add buttons for saving table data in these formats
"sRowSelect": "os", //allow user to select multiple rows in the table
"aButtons": [
{
"sExtends": "print",
"bSelectedOnly": "true",
},
{
"sExtends": "select_none",
},
]
},

It hasn't changed (see docs). But you have an error in your code. Instead of
"bSelectedOnly": "true",
it should be
"bSelectedOnly": true,
Also, bSelectedOnly is not available as a print option. It is only available as a flash button option. See here. That is the actual reason why what you're trying to do will not work :)