I am using alex3165/react-mapbox-gl and I have a problem. I'm trying to see x,y location but it isn't change. Constantly showing London. I also tried changing the node_module but result is the same. What should I do?
const coordinate=[29.371532589441756,40.896189603433761];
return (
<div>
<div className="col-md-7 col-xs-12">
<div id="map" className="map-sm">
<Map
style="mapbox://styles/mapbox/satellite-v9"
zoom={zoom}
containerStyle={{
height: "100%",
width: "100%",
center: {position}
}}>
<Layer
type="symbol"
id="marker"
layout={{ "icon-image": "marker-15" }}>
</Layer>
<Feature coordinates={coordinate}/>
</Map>
</div>
Use center attribute on the Map Component. You're just setting a feature to be displayed on the map by using the Feature component, this does not actually set the default position for MapBox.
<Map
style="mapbox://styles/mapbox/satellite-v9"
zoom={zoom}
containerStyle={{
height: "100%",
width: "100%",
}}
center={coordinate}
>
<Layer
type="symbol"
id="marker"
layout={{ "icon-image": "marker-15" }}>
</Layer>
<Feature coordinates={coordinate}/>
</Map>
Related
I've been using an outdated version of react-spring to animate a programmatic scroll.
The code used to be:
import { Spring } from "react-spring/renderprops";
// (...)
<Spring from={{ top: 0 }} to={{ top: LINE_HEIGHT * (page.from - 1) }}>
{(props) => (
<List
width={1}
height={LINE_HEIGHT * limit}
rowCount={sortedGauges.length}
rowHeight={LINE_HEIGHT}
rowRenderer={rowRenderer}
containerStyle={{
width: "100%",
maxWidth: "100%",
}}
style={{
width: "100%",
overflow: "hidden",
}}
scrollTop={props.top}
/>
)}
</Spring>
So the Spring component was updating a child with props.top each time the user clicked a button to get a smooth scroll. But I can't reproduce this result with the new useSpring API. What is the correct syntax?
I want to create circle radius in react. I have used the react-mapbox-gl package. The map is working but I am not able to create a round circle radius.
My current code is as follows:
let Map = ReactMapboxGl({
accessToken:
helper.MapBoxPrimaryKey
});
let Obj = {
"circle-radius": 10,
// Color circles by ethnicity, using a `match` expression.
"circle-color": "purple",
"circle-stroke-color": "purple",
"circle-opacity": 0.5,
"circle-stroke-opacity": 1,
"circle-stroke-width": 5
}
<Map
style={mapStyles.day}
zoom={[location.zoomlevel]}
onRender={(e) => {
console.log('e.boxZoom._container.outerText',e.boxZoom._container.outerText)
setObjectVal(e.boxZoom._container.outerText)
}} //boxZoom._container.outerText
containerStyle={{
height: '300px',
//width: '310px'
}}
center={[location.lng, location.lat]}
// onStyleLoad={onStyleLoad}
>
<Layer type="circle" source="mine" id="circle" paint={Obj}
// layout={{ 'icon-image': 'custom-marker' }}
layout={{ "icon-image": "harbor-15" }}
>
<Feature coordinates={[location.lng, location.lat]} />
</Layer>
<ScaleControl />
<Marker
coordinates={[location.lng, location.lat]}
anchor="bottom">
<div className="mapboxgl-user-location-dot"></div>
</Marker>
</Map>
What am I doing wrong here?
I am using Parallax from react-spring to create a parallax effect. I understand that the can use the height of its parent to set its area. This solution, however, is causing a strange behaviour when scrolling by keeping the and visible on the screen. I have a few questions here:
How can I setup this layout in a way where it will behave normally?
Do I need to place the and inside the ParallaxComp with fixed heights (I am hoping there is a better solution)?
Is there a way to make the assume its height based on the contents inside rather than use the prop factor?
Thank you in advance.
Codesandbox
App.js
import React from "react";
import ParallaxComp from "./ParallaxComp";
import "./styles.css";
export default function App() {
return (
<div className="App">
<nav style={{ height: "5rem", background: "purple", color: "white" }}>
Nav
</nav>
{/* <main style={{ height: "100%" }}> */}
<main style={{ height: "100vh" }}>
<ParallaxComp />
</main>
<footer style={{ height: "5rem", background: "blue", color: "white" }}>
Footer
</footer>
</div>
);
}
ParallaxComp.js
import React from "react";
import { Parallax, ParallaxLayer } from "react-spring/renderprops-addons";
let parallax;
const ParallaxComp = () => {
return (
<Parallax pages={2} scrolling={true} vertical ref={ref => (parallax = ref)}>
<ParallaxLayer
offset={0}
speed={0.1}
style={{
fontSize: "23.47222vw",
textAlign: "right",
textTransform: "uppercase"
}}
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 948.26 1122.2">
<path
d="M887 0c0 224.45-182.22 406.4-407 406.4S73 224.45 73 0h814z"
fill-rule="evenodd"
clip-rule="evenodd"
fill="#fec70e"
/>
</svg>
</ParallaxLayer>
<ParallaxLayer
offset={0}
speed={-0.4}
style={{
fontSize: "23.47222vw",
textAlign: "right",
textTransform: "uppercase"
}}
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 948.26 1122.2">
<path
d="M216 105.2c0 59.65-48.35 108-108 108S0 164.84 0 105.2h216z"
fill-rule="evenodd"
clip-rule="evenodd"
fill="#037e36"
/>
</svg>
</ParallaxLayer>
</Parallax>
);
};
export default ParallaxComp;
I've implemented the default react-google-map component and it is displaying the map correctly. However, is there a way to initialize it into street view with a given coordinate?
Original code I would like to modify below:
const Map = compose(
withProps({
containerElement: <div style={{ height: `100%` }} />,
mapElement: <div style={{ height: `100%` }} />
}),
withGoogleMap
)(props => (
<GoogleMap
defaultZoom={18}
defaultCenter={{ lat: props.coord.lat, lng: props.coord.lng }}
>
{true && (
<Marker position={{ lat: props.coord.lat, lng: props.coord.lng }} />
)}
</GoogleMap>
));
I have shared codesandbox for streetViewPanorama. But you need to add your API key in map url.
codesandbox : https://codesandbox.io/s/147kvk67zj
Feel free to ask any question.
<LoadScript googleMapsApiKey={api}>
<GoogleMap
mapContainerStyle={{width: "100%", height: "100%"}}
center={center}
zoom={10}
options={options}
>
<StreetViewPanorama position={center} visible={true}/>
</GoogleMap>
</LoadScript>
I'm using a clipped under the app bar drawer with a canvas as the primary content. I have three collapsible cards in the drawer and when all set to be open by default, it shows a vertical scrollbar on the body and white space below the html element with the body element. If you close all three of the cards the scroll goes away. If you reopen the cards, the scroll doesn't appear. The issue only seems to occur when the page is loaded with all three cards open.
Our short term solution is to load the page with only two cards open, but I want to note even with two open, the drawer content extends below the window with no scroll. The CSS for the drawer shouldn't be the issue either. Anyone else experience this issue?
drawerPaper: {
position: 'relative',
width: 400,
overflowX: 'hidden',
overflowY: 'hidden',
'&:hover': {
overflowY: 'auto',
},
'&::-webkit-scrollbar': {
display: 'none',
},
},
<MuiThemeProvider theme={this.state.useDarkTheme ? darkTheme : lightTheme}>
<div className={classes.root}>
<AppBar position="absolute" className={classes.appBar}>
<Toolbar>
<div className={classes.flex}>
<Typography className={classes.headerTextColor} variant="title">
Title
</Typography>
{sealedBy}
</div>
<HeaderTools />
<Tooltip id="toggle-icon" title="Toggle light/dark theme">
<IconButton className={classes.headerTextColor} onClick={this.toggleTheme}>
<BrightnessMediumIcon />
</IconButton>
</Tooltip>
</Toolbar>
{spinner}
</AppBar>
<Drawer
variant="permanent"
classes={{
paper: classes.drawerPaper,
}}
>
<div className={classes.fixedWidth}>
<div className={classes.toolbar} />
<DocumentTools />
<SealingTools />
<AnnotationTools />
</div>
</Drawer>
<main className={classes.content}>
<div className={classes.toolbar} />
<DrawingCanvas />
</main>
</div>
</MuiThemeProvider>
You need to add height: 100% css property on some container components, and to styles to drawerPaper need add too.
I have setup here, its working, but probably depends on container components:
drawerPaper: {
width: 250,
overflow: "auto",
height: "100%",
[theme.breakpoints.up("md")]: {
overflow: "auto",
width: drawerWidth,
position: "relative",
height: "100%"
}
}