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
  • 19,463
  • 8
  • 77
  • 114
vvavepacket
  • 1,882
  • 4
  • 25
  • 38
  • 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... – vvavepacket 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. – vvavepacket May 26 '17 at 21:20

1 Answers1

-1

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

Yevhenii Maher
  • 81
  • 10