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?
Related
I want to use the OverlayView component to show an image on top of the map. However, I'm having trouble preventing the image from scaling as I zoom. Basically, I want the corners of the image to stay at one single lat, lng position, i.e. shrink as I zoom out and vice versa.
I believe that the getPanes() and getProjection() methods provide all the information I need, but I just don't know when/how to use them correctly. I also think the GroundOverlay component might be a good alternative but I need to be able to control the rotation of the image (which I believe can only be done with the OverlayView).
Below is the example in react-google-maps that correctly renders a div on a map, but the div scales as it zooms.
const MapWithAnOverlayView = compose(
withStateHandlers(() => ({
count: 0,
}), {
onClick: ({ count }) => () => ({
count: count + 1,
})
}),
withScriptjs,
withGoogleMap
)(props =>
<GoogleMap
defaultZoom={8}
defaultCenter={{ lat: 62.300471, lng: -150.644 }}
>
<OverlayView
bounds={{
ne: { lat: 62.400471, lng: -150.005608 },
sw: { lat: 62.281819, lng: -150.287132 }
}}
mapPaneName={OverlayView.OVERLAY_MOUSE_TARGET}
>
<div style={{ background: `white`, border: `1px solid #ccc`, padding: 15 }}>
<h1>OverlayView</h1>
</div>
</OverlayView>
</GoogleMap>
);
<MapWithAnOverlayView
googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzasyT4miXrhCF4G5AwXI7sQNF6rvQJYpvjoP8&v=3.exp&libraries=geometry,drawing,places"
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `400px` }} />}
mapElement={<div style={{ height: `100%` }} />}
/>
I would expect that the div in the example would shrink as I zoom out and vice versa.
Also, here is a link to the docs that I've been using https://tomchentw.github.io/react-google-maps/#overlayview
and here is the regular example the Google provides
https://developers.google.com/maps/documentation/javascript/examples/overlay-simple
Basically, I just want the example to in the first link to behave like the second one. Any help would be greatly appreciated!
To create a custom overlay containing image which fits map bounds, OverlayView component could be initialized like this:
<OverlayView
bounds={{
ne: { lat: 62.281819, lng: -150.287132 },
sw: { lat: 62.400471, lng: -150.005608 }
}}
mapPaneName={OverlayView.OVERLAY_MOUSE_TARGET}
>
<img
style={{ width: "100%", height: "100%", position: "absolute" }}
src="https://developers.google.com/maps/documentation/javascript/examples/full/images/talkeetna.png"
/>
</OverlayView>
Here is a demo
I am leveraging VictoryCharts to add charts to my React app. I am trying to accomplish something like:
I combed through the docs and was not able to find a way to add Labels to a single bar chart.
Things I have tried
Nesting <VictoryLabel> andunder``` --> The axes show up and the docs recommend using VictoryGroup
Nesting <VictoryLabel> andunder``` --> VictoryGroup does not support VictoryLabel
Tried making a standalone <VictoryBar> & <VictoryLabel> and embedding it into <svg> --> Cannot see the chart contents on the page
This is the snippet I have right now:
import Box from '#material-ui/core/Box';
import React from 'react';
import { VictoryAxis, VictoryBar, VictoryChart, VictoryContainer, VictoryLabel, VictoryTheme } from 'victory';
const SampleChart = ({ stat=25, title = 'Sample' }) => (
<Box ml={5}>
<svg height={60} width={200}>
<VictoryLabel text={title.toLocaleUpperCase()} textAnchor='start' verticalAnchor='end' />
<VictoryBar
barWidth={10}
data={[{ y: [stat], x: [1] }]}
domain={{ y: [0, 100], x: [0, 1] }}
horizontal
labels={d => d.y}
labelComponent={
<VictoryLabel verticalAnchor='end' textAnchor='start' />
}
standalone
style={{ parent: { height: 'inherit' } }}
theme={VictoryTheme.material}
/>
</svg>
</Box>
);
ReactDOM.render(<SampleChart />, document.querySelector("#app"))
<div id='app'></div>
You could use an axis to this effect like so:
const CHART_WIDTH = 800;
const val = 28
function BarChart() {
return (
<div style={{ width: CHART_WIDTH }}>
<VictoryChart height={200} width={CHART_WIDTH}>
<VictoryAxis
dependentAxis
tickValues={[0,100]}
offsetY={190}
tickFormat={t => t===0 ? 'average age' : val}
style={{axis: { stroke: 'none'}}}
/>
<VictoryBar
barWidth={10}
data={[{ y: [45], x: [1] }]}
domain={{ y: [0, 100], x: [0, 1] }}
horizontal
/>
</VictoryChart>
</div>
);
}
https://codepen.io/anon/pen/RmaxOd?editors=0110#0
Not exactly what you wanted, but it gets the job done, and you can format the tick labels or provide custom components to make it look like your desired result.
I'm developing an admin panel for controlling some of the users with REACT. So in that, I'm using react-google-maps third-party module to enabling google map services with dynamically changing google API key by admin. Here, after changing API key by admin, google map API link not gets updated with new values still, it keeps the old values until I reload the page.
import {
withScriptjs,
withGoogleMap,
GoogleMap,
LoadScript,
withProps,
Circle,
Marker
} from "react-google-maps";
import Geocode from "react-geocode";
var locationUpdate = document.getElementsByClassName('location');
const CustomSkinMap = withScriptjs(withGoogleMap(props => (
<GoogleMap
ref={props.onMapLoad}
center={{ lat: props.center.lat, lng: props.center.lng }}
defaultZoom={13}
defaultCenter={{ lat:props.lat, lng: props.lng }}
onDragEnd={props.onDragEnd}
onBoundsChanged={props.onBoundsChanged}
defaultOptions={{
scrollwheel: true,
disableDefaultUI: true,
defaultVisible: true,
zoomControl: true
}
}
/>
)
)
);
class LocationDetails extends React.Component {
constructor(props) {
super(props);
...
render() {
const { classes } = this.props;
const { lat, lng, bounds, center } = this.state;
var url = `https://maps.googleapis.com/maps/api/js?key=${this.state.googleApi}&libraries=places`
const google = window.google;
console.log(google, this.props);
console.log('render', this.state.googleApi);
return (
<GridContainer>
<GridItem xs={12} sm={12} md={6}>
<Card>
<FormHelperText error={!!this.state.errors}>
{this.state.errors + (this.state.errors ? ' *' : '')}
</FormHelperText>
<CardBody>
<CustomSkinMap
onBoundsChanged={this.onBoundsChanged}
onMapLoad={this.handleMapLoad}
onDragEnd={this.handleMapDrag}
onSearchBoxMounted={this.handleSearchBoxMounted}
bounds={bounds}
onPlacesChanged={this.handlePlacesChanged}
onCenterChanged={this.onCenterChanged}
center={center}
lat={lat}
lng={lng}
googleMapURL={url}
loadingElement={<div style={{ height: `100%` }} />}
containerElement={
<div
style={{
height: `280px`,
borderRadius: "6px",
overflow: "hidden"
}}
/>
}
mapElement={<div style={{ height: `100%` }} />}
/>
<img
style={{
position: 'absolute',
top: '50%',
left: '50%'
}}
src={marker} alt="..." />
</CardBody>
</Card>
</GridItem>
</GridContainer>
);
}
}
Here customSkinmap with props passed to GoogleMap from react-google-maps
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>
I've implemented a pie graph using VictoryCharts and I added tooltips...
<VictoryPie
labelComponent={<VictoryTooltip cornerRadius={0} />}
colorScale={["tomato", "orange", "gold", "cyan", "navy" ]}
padAngle={0.5}
innerRadius={100}
width={400} height={400}
style={{
labels: { fontSize: 15, fill: "black"},
data: {
fillOpacity: 0.9, stroke: "#c43a31", strokeWidth: 3
}
}}
labelRadius={90}
data = {data_distribution}
/>
The tooltips look as follows...
I want to remove the arrow and make the tooltip a regular rectangle and change the background color. Essentially I want to customize it but this has proved to be harder than I expected.
I tried creating a custom component...
class CustomFlyout extends Component {
render() {
const {x, y} = this.props;
return (
<div style={{"background": "red"}}>
<p>x</p>
</div>
);
}
}
I added to the VictoryTooltip...
<VictoryTooltip
cornerRadius={0}
flyoutComponent={<CustomFlyout/>}
/>
However, this does nothing. I cannot figure out how to make a customized tooltip.
You can customize VictoryTooltip and set the style you need like this ..
<VictoryTooltip
cornerRadius={0}
pointerLength={0}
flyoutStyle={{
stroke: "none",
fill: "blue"
}}
/>
See this example