Tips for maintaining a marker at the bottom of the screen while zooming, similar to Google Maps

Is there a way to customize the zoom behavior in my project? I want to maintain the bottom position while resizing the other three directions, and also include pitch adjustments.

https://i.sstatic.net/hQdg8.gif https://i.sstatic.net/m3xef.gif

I aim for the marker to remain static during zoom operations, similar to the first gif provided.

Currently, when the gesture ends, the camera transitions to a newly generated marker to avoid glitches in the animation.

const markerLatLng: LatLng = {latitude: 42.00352792344026, longitude: 21.396884999999997}

const generatedMarker: LatLng = computeDestinationPoint(
  markerLatLng,
  currentDistance,
  currentHeading,
);

mapViewRef.current?.animateCamera(
  {
    center: generatedMarker,
    heading: currentHeading,
    pitch: defaultPitch,
    zoom: currentZoom,
  }
)
javascripttypescriptreact-nativegoogle-mapsreact-native-maps

Answer №1

To disable scroll during rotation or zoom, utilize the prop scrollDuringRotateOrZoomEnabled and set it to false.

With this setting, zoom functionality will still work (assuming zoomEnabled prop is true, which is the default behavior), allowing pinch and double tap gestures while keeping the map's center relatively stable with only minor adjustments.

In my implementation, I have used the onRegionChangeComplete prop to receive updated coordinates after a region change. This allows me to update the "region" state with latitude, longitude, latDelta, and lngDelta values. However, it is important for me to ensure that changes fall within certain specified thresholds. As onRegionChangeComplete can occasionally trigger twice for the same event, updating the "region" state multiple times unnecessarily should be avoided.

Before making changes to the "region" state (which includes marker information from the previous region), I perform the following check:

const diff = (a: number, b: number) => (a > b ? a - b : b - a);

const onRegionChange = (newRegion: Region) => {
    if (marker && (
          diff(newRegion.latitude, marker.latitude) > 0.0001 ||
          diff(newRegion.longitude, marker.longitude) > 0.0001)
    ) {
      setRegion(newRegion);
    }
};

<MapView
    ref={mapRef}
    region={region}
    scrollDuringRotateOrZoomEnabled={false}
    provider={PROVIDER_GOOGLE}
    style={Styles.MapsStyles.mapView}
    onRegionChangeComplete={e => regionChange(e)}
/>

Note:
Upon further testing, it appears that this prop functions correctly on iOS devices but not on Android.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips to prevent redirection in a JavaScript function

When a user clicks on a specific link, the HideN function is triggered. Here's an example: <a href="<?php echo $dn5['link']; ?>" onclick="HideN('<?php echo $dn5['id'];?>','<?php echo $dn5['fro ...

javascriptphpjqueryajaxhttp-redirect

Utilizing $.when to merge AJAX requests and then passing the resulting data to a designated function

I am struggling with sending data between functions and using $.when in my JavaScript code. I have separate functions and AJAX calls that update content on the page, but they need to load together on page load. Despite trying various solutions to combine A ...

javascriptjqueryajaxjsonmultiple-instances

Expanding the width of an MUI Button smoothly using transitions

I am currently working on a custom ToggleButton that changes its text based on certain state changes. However, I am facing an issue where the width of the button abruptly grows when the text changes. How can I smoothly transition this change in width? Bel ...

reactjstypescriptmaterial-uicss-transitions

Mobile Size Setting

Could someone please explain to me why when I test this code on Google Chrome using the mobile emulator for Galaxy S3, it displays the correct size (640x360), but when I try to load it on my actual Galaxy S5 or any other device, the size is different from ...

javascriptandroidhtmlmobileresponsive-design

Exploring Techniques for Adjusting Website to User's Screen Resolution

My website is currently designed for a screen resolution of 1024x768. However, I am aware that when viewed on computers with smaller or larger screen resolutions, the layout starts to distort. Is there a way to make the website adaptable to any user&apos ...

javascriptcsshtmlresolution

Display validation in HTML5 only when the form is submitted

Here is the code snippet I am referring to: <input required pattern="[0-9]{5,10}" oninput="setCustomValidity('')" oninvalid="setCustomValidity('Type something')" /> I'm looking for a way to remove o ...

javascriptjqueryhtmldom

Using and accessing Ajax response across all routes in an application

I am developing a Node.js Express API application that requires several AJAX calls at the start of the application for global data access in all requests. At the beginning of my app.js file, I include: var users = require('./modules/users'); I ...

javascriptnode.jsajaxexpressglobal-variables

Error: The callback specified is not a valid function

Here is a function example: reportAdminActions.reportMemberList(project, function(data) { console.log(data); }); This particular function gets called by another ajax operation, similar to the one shown below: reportMemberList: function(projectId, ca ...

javascriptjqueryajax

The start-up process of AngularJS applications with Bootstrap

Curious about the predictability of the initialization flow in AngularJS apps? Want to understand the order of execution of different blocks within an HTML document? I came across a question on bootstrapping in Angular JS, but it didn't delve into th ...

javascriptangularjshtmlexecution

Displaying API logs on an Html console

function updateData(e) { const animeName = e.target.value; const apiUrl = `https://nyaaapi.herokuapp.com/nyaa/anime?query=${animeName}`; fetch(apiUrl) .then((res) => res.json()) .then(displayAnimeData); } const inputField = document.getEl ...

javascripthtmljsonapi

Customize chrome's default shortcuts with JavaScript

I'm working on an application that requires me to override some shortcut keys in the Chrome browser. While I'm able to create custom shortcuts to trigger alerts like in this Stackblitz example, I'm having trouble overriding a few default sho ...

javascripthtmlgoogle-chrome

What could be causing the "AJAX data not defined" error

Attempting to make an Ajax post request to the root directory on my Express server. By simply using the HTML form and submitting an artist name, I successfully receive a response back and can send the information to the client without any issues... As se ...

javascriptjquerynode.jsexpress

TypeScript combines strong typing for arrays into a unified array of objects

I developed a JavaScript function that can merge multiple arrays into an array of objects based on provided key names. Here’s an example: const mergeArraysToSeries = (arrs, keys) => { const merged = []; for (let dataIndex = 0; dataIndex < arrs ...

typescript

Transform your JavaScript XMLHttpRequest into jQuery just like that

Is it possible to convert this code to jQuery? Perhaps by utilizing jQuery.get(). However, it seems that there is no responsetype of arraybuffer. var request = new XMLHttpRequest(); request.open("GET", url, true); request.responseType = "arraybuffer"; req ...

javascriptjqueryajaxget

Utilizing Promise.all to update subdocuments with Mongoose

Encountered an error while checking the value in promiseArr, seeking assistance or suggestions for a better approach. Thanks! **Error** <rejected> { MongooseError: Callback must be a function, got [object Object] at new MongooseError (D:\P ...

javascriptnode.jsreactjsexpressmongoose

What is the process of incorporating a video into a react.js project through the use of the HTML

I'm experiencing an issue where my video player loads, but the video itself does not. Can anyone shed light on why this might be happening? class App extends Component { render() { return ( <div className="App& ...

javascripthtmlreactjs

When incorporating conditional statements into your code, make sure to utilize the tags <script> along with

I have some script tags as shown below: <script src="cordova-2.5.0.js"></script> <script src="js/jquery-1.7.2.min.js"></script> <script src="js/jquery.mobile-1.1.1.min.js"></script> <script src="js/jquery.xdomainajax ...

javascriptjqueryhtml

Is there a way to retrieve an audio file using npm request in a Node.js environment?

I'm dealing with a piece of code that retrieves raw data for me requestPromisePost(options) { return new Promise((resolve, reject) => { request(options, function (error, response,dfdf) { if (error) return ...

javascriptnode.jsrequest

Unable to locate the module '/workspace/mySQL/node_modules/faker/index.js'

Hi there, I'm currently facing an issue while trying to run the app.js file in my project through the terminal. It keeps showing me an error message that I am unable to resolve. To provide some context, I have already installed the faker package using ...

javascriptnode.jsfaker

Creating a dynamic form that efficiently captures user information and automatically redirects to the appropriate web page

Sorry for the unusual question, but it was the best way I could think of asking. I have come across websites with fill-in-the-blank lines where you can input your desired information and then get redirected to another page. For example: "What are you sea ...

javascripthtmlcsswordpress