react-native-mapmagic-gl/javascript/components/MapMagicView.js

Mapmagic GL is a react-native interactive maps library

import React from 'react';
import {
  View,
  Text,
  Image,
  Platform,
  Dimensions,
  StyleSheet,
} from 'react-native';
import MapView from './MapView';
import { Logo } from '../images';

const mapStyle = 'https://api.mapmagic.co.th/v1/get-map-style';

const isIphoneX = () => {
  const dimen = Dimensions.get('window');
  return (
    Platform.OS === 'ios' &&
    !Platform.isPad &&
    !Platform.isTVOS &&
    (dimen.height === 812 || dimen.width === 812)
  );
};
class MapMagicView extends MapView {
  getMapProps() {
    let { styleURL } = this.props;
    if (styleURL.length === 0) {
      styleURL = `${mapStyle}?app_id=${this.props.app_id}&api_key=${
        this.props.api_key
      }&lang=${this.props.lang}`;
    }
    // console.log(styleURL);
    return {
      ...this.props,
      styleURL,
      centerCoordinate: this._getCenterCoordinate(),
      contentInset: this._getContentInset(),
    };
  }

  renderLogoMap() {
    let creditStyle = styles.credit;
    let logoStyle = styles.logo;
    if (this.props.isFullScreen) {
      if (isIphoneX()) {
        const offset = 10;
        creditStyle = StyleSheet.flatten([
          creditStyle,
          {
            paddingRight: offset,
            bottom: offset,
          },
        ]);
        logoStyle = StyleSheet.flatten([
          logoStyle,
          {
            left: offset,
            bottom: offset,
          },
        ]);
      }
    }
    return (
      <View style={styles.container} pointerEvents={'box-none'}>
        <Text style={creditStyle}>
          {'© THiNKNET Co.,Ltd. | © OSM contributors'}
        </Text>
        <Image
          style={logoStyle}
          source={Logo}
          resizeMode={Image.resizeMode.contain}
        />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    left: 0,
    bottom: 0,
    right: 0,
    height: 32,
    zIndex: 1001,
  },
  logo: {
    position: 'absolute',
    left: 0,
    bottom: 0,
    zIndex: 1002,
    width: 90,
    height: 21,
    margin: 2,
    marginLeft: 10,
  },
  credit: {
    position: 'absolute',
    right: 0,
    bottom: 0,
    zIndex: 1003,
    backgroundColor: '#FFFFFF99',
    padding: 3,
    fontSize: 8,
  },
});

MapMagicView.defaultProps = {
  ...MapView.defaultProps,
  attributionEnabled: false,
  logoEnabled: false,
  center: [100.49, 13.72],
  zoom: 9,
  lang: 'th',
  styleURL: '',
  isFullScreen: true,
};
MapMagicView.propTypes = {};
export default MapMagicView;