1

I'm using android, and why is that when there is a scroll bar, the map is not reacting fluidly to the touch events. I'm trying to drag the map but the whole page is scrolling up. How do we make it in a way that when we drag inside the map, only the map container will respond to touch events?

If there is no scrollbar / only leaflet is in the screen, the map pans/drag gracefully.enter image description here

PS: I have tried setting tap:false in map options, but it doesn't work. I am using leaflet 1.0.3

Example code:

MainForm component

  <Container>
                <Header>
                <Title>Main</Title>
                </Header>
                <Content>
                <TestWV />
                <Grid>
                    <Col style={{ height: 700, 
                                    justifyContent: 'center',
                                    alignItems: 'center', }}
                    >
                        <Row size={1} >
                            <TouchableOpacity onPress={this.onMiniApp1Press.bind(this)}>
                                <Thumbnail square size={100} source={oneminute} 
                                />
                            </TouchableOpacity>
                        </Row>
                        <Row size={1} >
                        </Row>
                    </Col>
                    <Col style={{ height: 700, 
                                    justifyContent: 'center',
                                    alignItems: 'center', }}
                    >
                        <Row size={1} >
                            <TouchableOpacity>
                                <Thumbnail square size={100} source={pakipoo} 
                                />
                            </TouchableOpacity>
                        </Row>
                        <Row size={1} >
                        </Row>
                    </Col>
                </Grid>
                </Content>
            </Container>

TestWV component

     <View>
     <WebView
        source={{uri: 'http://yahoo.com'}}
        javaScriptEnabled={true}
        domStorageEnabled={true}
        startInLoadingState={true}
        style={{ height: 500, flex: 1 }}

        >
    </WebView>
    </View>
Blair Anderson
  • 18,297
  • 7
  • 71
  • 100
WantIt
  • 1,831
  • 4
  • 24
  • 36
  • What framework and version do you use exactly? What hybrid / cross-platform tool do you build your app with? Could not reproduce your issue with Cordova on an Android device. – ghybs May 26 '17 at 11:48
  • React native. But i believe this is platform agnostic.. i could send you some html file and you can load it as webview... – WantIt May 26 '17 at 15:14
  • Indeed please provide what is necessary to reproduce your issue, otherwise I am not sure you could get meaningful help... – ghybs May 26 '17 at 15:26
  • @ghybs i have added sample react code. Can you let me know if you can convert this into cordova/html like code? I hope you get the idea. Let me know any issues. – WantIt May 26 '17 at 21:20

2 Answers2

2

You can make a simple custom map and override the onTouchEvent() method to let 

    @Override
public boolean onTouchEvent(MotionEvent ev) {
    int action = ev.getAction();
    switch (action) {
    case MotionEvent.ACTION_DOWN:
        // Disallow ScrollView to intercept touch events.
        this.getParent().requestDisallowInterceptTouchEvent(true);
        break;

    case MotionEvent.ACTION_UP:
        // Allow ScrollView to intercept touch events.
        this.getParent().requestDisallowInterceptTouchEvent(false);
        break;
    }

    // Handle MapView's touch events.
    super.onTouchEvent(ev);
    return true;
}

there is another approach (but it's the same I think) found in this answer

whd.nsr
  • 850
  • 5
  • 11
-1

Because, ScrollBar does not support nested scrolls. And MapView has its own Scroll behavior

Yevhenii Maher
  • 81
  • 10