I am using React Native Maps from react-native-maps library, and I have a problem with on of the icons of the userLocation, I don't want it to show up, But it is there, the problem is when I set a property showsUserLocation to false to make disappear I am losing a functionality.
I will explain more with code and images, this my code :
<MapWrapper
ref={this.mapRef}
followUserLocation
zoomEnabled
showsUserLocation
mapType={isSatMode ? 'satellite' : 'standard'}
rotateEnabled={false}
>
{!isNilOrEmpty(markers) && !isNilOrEmpty(selectedMenuItem) && markers.map(marker => this.renderMarker(marker, handleOnClickMark))}
{!isNilOrEmpty(polylines) && polylines.map(this.renderPolyline)}
</MapWrapper>
The showsUserLocation is true now, which means that I have two icons on my Map :
the blue Icon pointing on my location
The icon that I can click on the move to my location ( I want to get rid of this )
With images :
When I change the showsUserLocation to false, the two of them are no longer there, but I need the blue icon on my View.
Any help would be much appreciated.
By setting showsMyLocationButton to false it works.
Related
I have a bool called isStarted that is initially set to false.
I have two divs, one that has:
hidden={isVisible}
and the other has:
hidden={!isVisible}
I have a href link that has a onclick that calls a function which changes the bool value to it's inverse value. I confirm this by also console.logging the bools value. Each time I click it the value changes.
However the the divs do not change visibility, it just keeps showing the first one.
div1:
<div
className="relative"
hidden={isVisible}
> div1 </>
div2:
<div
className="relative"
hidden={!isVisible}
> div 2 </>
I also confirmed these divs show independently by manually setting the isVisible to true and false at the start.
EDIT:
This way works to change the visibility also, but only works the first time when the app goes live:
{isVisible && <div>wow</div>}
However when I click and change the isVisible value it still won't change the divs.
The hidden HTML attribute does not exist. You might be looking for the display CSS attribute.
<div style={{ display: none }} />
Offtopic personal suggestion: I'd suggest you starting learning React using TypeScript from the beginning. TS will warn you when an attribute does not exist and help you on your learning path.
EDIT:
It is display: none (removes the element) or visibility: hidden (hides but still takes space. I might have been on drugs when writing this.
I am new in react native , I want to scroll the image continuously bottom to top in react native.
We can scroll image in html using marquee tag.
E.g.,
<marquee behavior="scroll" direction="up">
<img src="../t1.png"/>
</marquee>
Similar thing I want to achieve in react native.
currently I am using the below code
<Animatable.Image
animation={{
from: { translateY: 0 },
to: { translateY: -70 },
}}
duration={10000}
delay={1}
easing={t => Math.pow(t, 1.7)}
iterationCount={100}
useNativeDriver
source={require('./../assets/images/gradient_bg.png')}
style={LoginStyles.scrollerImage}>
</Animatable.Image>
this code works but it resets the the posion of image to 0 and starts again can someone help me fix this
Thanks.
Set the iteration count to infinite
iterationCount="infinite"
If you read their documentation , there's an option to make the iteration in an infinite loop.
I think you should try this package
react-native-marquee-scroll
It works for me.
I am mapping of array of object which multiplies my component, its working properly but the problem is when I add another object to it somehow its hidden not sure why
{EditMultiObject.map((object, key) => (
<SubFormEditCom
key={key}
identifyNumber={key}
onEditBasicChange={onEditBasicChange}
onEditCalendarChange={onEditCalendarChange}
onEditChangeUrl={onEditChangeUrl}
lastObject={EditMultiObject.length === key + 1 ? true : false}
onEditAddNewObject={onEditAddNewObject}
/>
))}
You will noticed the first element is the initial object I set the second is the one I created when I click a add button. The style on the second div is missing(the newly added one) an inline style, note that I didnt even put an inline style in my code I assume it was added by react
I think I know now whats the solution for this I think its because of the third party library
I know there is a lot of topic about this but i can't find answer. My custom icon won't display. Here is my link http://maps.googleapis.com/maps/api/staticmap?zoom=15&size=640x200&scale=2&markers=icon:http%3A%2F%2Fwww.ide-imprimerie.com%2Fdata%2FnewTemplate%2Fpin.png|45.7472473,-0.6246753000000353
But the map is working well as you can see here : http://maps.googleapis.com/maps/api/staticmap?zoom=15&size=640x200&scale=2&markers=45.7472473,-0.6246753000000353
also the icon here : http://www.ide-imprimerie.com/data/newTemplate/pin.png
I encoded the URL, tried 32x32/64x64 icon, different icon and I still don't understand why this custom icon won't show up, thank you for reading and helping !
EDIT: Didn't find the issue but shortened url works so thread closed.
I believe this will works for you..
var marker = new google.maps.Marker({
position: map.getCenter(),
icon: 'http://www.ide-imprimerie.com/data/newTemplate/pin.png'
map: map
});
I am new to google maps. right now I'm using ng-map with angularjs. I am finding it difficult to put animations on the makers (like bounce) when I click on a div. Can anybody tell me how can I do that?
I've written an example of how to animate a marker by clicking on a Div element (See the div under the map which has the text "Div element - Click me to toggle marker animation!"). It can be found here:
http://plnkr.co/edit/KATXex?p=preview
The code to animate the marker is as follows:
if (marker.getAnimation() !== null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
Note that to get this to work properly I had to set the marker's animation property to null in the "on" event e.g.
$scope.$on('mapInitialized', function(evt, evtMap) {
map = evtMap;
var mapMarker = map.markers[0];
mapMarker.setAnimation(null);
marker = mapMarker;
});
By default it is undefined, which means that without this step you'd normally have to click on the marker twice, once to set the animation to null, second to set the animation e.g. to BOUNCE. The issue with "undefined" may be an issue with the ng-maps library.