My MapBox Map is working well in development(localhost) but when I deployed the map is not loading the map.
<ReactMapGL
{...viewPort}
mapboxApiAccessToken={process.env.REACT_APP_MAP_BOX_TOKEN}
onViewportChange={setViewPort}
// zoom={13}
mapStyle={process.env.REACT_APP_MAP_BOX_STYLE}
scrollZoom={true}
touchZoom={true}
>
<Marker
longitude={marker.longitude}
latitude={marker.latitude}
offsetTop={-20}
offsetLeft={-10}
draggable
onDragStart={onMarkerDragStart}
onDrag={onMarkerDrag}
onDragEnd={onMarkerDragEnd}
followUserLocation={true}
followUserMode="course"
>
<Pin size={20} />
</Marker>
<GeolocateControl
style={geolocateStyle}
positionOptions={positionOptions}
trackUserLocation
auto
/>
{/* <div className="nav" style={navStyle}>
<NavigationControl showCompass />
</div> */}
</ReactMapGL>
I'm using react-map-gl npm package.
IN LOCALHOST(This is not my location😉)
IN PRODUCTION
NB: I've added Private Token and added URL also in MapBox.
ERROR MESSAGE IN CONSOLE
I JUST DOWNGRADED THE MAPBOX VERSION. NOW IT IS WORKING
Related
I have installed the better-react-mathjax library to a react project, to aid me with latex, but it doesn't render in production mode, there's no errors in the console nor a warning message, see the snipped below:
{questions[currentQuestionIndex] && (
<Fragment>
<Text
size="xl"
mb="md"
mt="md"
color={'white'}
className={isLoading ? `hidden` : `shown`}
>
<MathJax>
{`${questions[currentQuestionIndex].number}. ${questions[currentQuestionIndex].description}`}
</MathJax>
</Text>
{!isLoading && questions[currentQuestionIndex].figureUrl && (
<Image
className={isLoading ? `hidden` : `shown`}
alt=""
hidden={!questions[currentQuestionIndex].figureUrl}
radius="md"
src={questions[currentQuestionIndex].figureUrl}
/>
)}
</Fragment>
)}
in development mode:
However it does not when I deploy it to vercel:
Any idea of how can I fix this?
I've tried checking the latex markup, whether the latex files and the font is loaded and see if other components on the page have the same issue and surprisingly some parts of the page are rendered, see the screenshot below:
expo version : sdk42
react-native-maps: 0.28 and 0.27.1 both
using react-native-maps-directions
here is code
<MapView
provider={PROVIDER_GOOGLE} // remove if not using Google Maps
style={styles.map}
region={getMapRegion()}
>
<MapViewDirections
origin={origin}
destination={destination}
apikey={GOOGLE_MAPS_APIKEY}
strokeWidth={3}
strokeColor="blue"
/>
<Marker
coordinate={getMapRegion()}
title="Test Title"
description="This is the test description"
>
<Callout tooltip>
<Text>{text}</Text>
</Callout>
</Marker>
</MapView>
lineDashPattern={[number]} add this in polyline or react MapViewDirections
<MapViewDirections
lineDashPattern={[0]}
origin={origin}
destination={destination}
apikey={GOOGLE_MAPS_APIKEY}
/>
I am trying to loop a very simple video contained in src/Assets/videos.
When I deploy a local server with npm start, the video performs as expected, however, when I publish to production the video does not load. I am using AWS Amplify CLI to publish the app.
I tried to:
1). View the app in a different browser (Firefox and Chrome).
2). Load the video from /public via an environment variable.
3). Load the video via the react-player module.
My initial code was home.js component rendered in app.js:
import heroVideo from '../../Assets/videos/heroVid.mp4';
//...
export default function HomePage() {
return (
<div id="hero" align="center" className="center">
<div>
<video muted autostart autoPlay loop >
<source src={heroVideo} type="video/mp4"/>
Your browser does not support the video tag.
</video>
</div>
<div style={{width: '90%'}}>
<div>
<img src={logo} style={{height: '200px', borderRadius: '100px'}} className={classes.blue} alt={`${props.brandName} Logo`}/>
<h4>A QC HOME BUYERS COMPANY</h4>
<h1>QC General Contractors</h1>
<h2 className="script">Let's build your future together</h2>
<NavLink to="/request-quote" className="simple-link"><Button variant="contained" color="secondary">Request a quote</Button></NavLink>
</div>
</div>
</div>
)
}
Then I tried to load from /public:
export default function HomePage() {
return (
<div id="hero" align="center" className="center">
<div>
<video src={process.env.PUBLIC_URL + 'Videos/heroVid.mp4} muted autostart autoPlay loop />
</div>
<div style={{width: '90%'}}>
<div>
<img src={logo} style={{height: '200px', borderRadius: '100px'}} className={classes.blue} alt={`${props.brandName} Logo`}/>
<h4>A QC HOME BUYERS COMPANY</h4>
<h1>QC General Contractors</h1>
<h2 className="script">Let's build your future together</h2>
<NavLink to="/request-quote" className="simple-link"><Button variant="contained" color="secondary">Request a quote</Button></NavLink>
</div>
</div>
</div>
)
}
Finally react-player:
import heroVideo from '../../Assets/videos/heroVid.mp4';
import ReactPlayer from 'react-player'
//...
export default function HomePage() {
return (
<div id="hero" align="center" className="center">
<div>
<ReactPlayer url={heroVideo} loop="true" volume="0" muted="true" playing="true" style={{height: "100%"}} />
</div>
<div style={{width: '90%'}}>
<div>
<img src={logo} style={{height: '200px', borderRadius: '100px'}} className={classes.blue} alt={`${props.brandName} Logo`}/>
<h4>A QC HOME BUYERS COMPANY</h4>
<h1>QC General Contractors</h1>
<h2 className="script">Let's build your future together</h2>
<NavLink to="/request-quote" className="simple-link"><Button variant="contained" color="secondary">Request a quote</Button></NavLink>
</div>
</div>
</div>
)
}
I am still relatively new to react and AWS Amplify - Is there something I am missing?
Thanks in advance for any guidance.
Have you modified your rewrite rules to add mp4 ?
</^[^.]+$|\.(?!(css|mp4|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>
I was having the same issue as well, the easiest solution I found was to create an S3 bucket on AWS and upload the video file there and grab the src from said video. You're also gonna have to add public read access for your bucket/object.
Did #jsc31994 recommendation :
Uploaded the video on a S3 bucket and then used ReactPlayer
<ReactPlayer
url='https://xxx.s3.us-east-2.amazonaws.com/xxx-background.mp4'
playing={true}
loop={true}
muted={true}
controls={false}
id="background_video"
/>
I am developing a web application using React and Semantic UI React as a front-end framework. The application is tested and works in Chrome, Microsoft Edge, Safari and Mozilla Firefox. However in this last browser I noticed a problem with iframes. The image below shows a modal window with iframe with a pdf. The window opens correctly but as soon as I try to click inside it or scroll the pdf downwards, the modal window is displayed incorrectly.
I tried to identify any problems in the rendered HTML code using the Firefox developer tools (F12) but I didn't notice anything.
Â
I am using Firefox v77.0.1 64bit (latest version) and the modal window is implemented as follows:
<Modal closeIcon open={this.state.open} onClose={this.onClose}>
<Modal.Content>
<Steps ... />
<div style={{ width: "100%", height: "500px" }}>
<Iframe url={...} width={"100%"} height={"460px"} />
<Checkbox ... />
</div>
</Modal.Content>
<Modal.Actions>
<Button color='red' onClick={this.props.onRefuse}>
<Icon name='remove' />
Refuse
</Button>
<Button color='green' onClick={this.props.onAccept}>
<Icon name='check' />
Accept
</Button>
</Modal.Actions>
</Modal>
I am creating a project in react but I came across a problem when creating the responsive menu. That is, when using a menu that uses href it does not work on the apache server and Link To does not solve my problem. I have this code:
return (
<div>
<ResponsiveMenu
menuOpenButton={<FaBars size={30} color="MediumPurple" />}
menuCloseButton={<FaRegWindowClose size={30} color="MediumPurple" />}
changeMenuOn="500px"
largeMenuClassName="large-menu"
smallMenuClassName="small-menu"
menu={
<Menu>
<ul>
<li>INICIO</li>
<li>PROJETO</li>
<li>PARCERIA</li>
<li>PLANTAS & LÃ</li>
<li>RECURSOS</li>
<li>CONTACTOS</li>
</ul>
</Menu>
}
/>
</div>
);