I try to change marker on a DirectionRender from react-google-maps/api.
I already change de polyline color but i dont make change de marker A and B, my code.
<DirectionsRenderer
getIcon={(icon) => console.log("icon render", icon)}
options={{
directions: response,
polylineOptions: {
strokeColor: "#c23531",
icons: [{
icon:{
path:{to},
strokeOpacity: 1
},
offset:'50%'
},{
icon:{
path:{fromm},
strokeOpacity: 1
},
offset:'50%'
}],
},
}}
/>
The DirectionsRenderer of #react-google-maps/api library doesn't have a getIcon prop name just like you have in your code. To change the icon of the markers in the DirectionsRenderer, you need to use the options which has the properties of google.maps.DirectionsRendererOptions interface.
In there, you can see a markerOptions props name which uses the google.maps.MarkerOptions interface that have the icon properties.
Here's a sample code (put your API key on the index.js file of the code sample to make it work) and code snippet how to use the options properties to change the icon:
<DirectionsRenderer
directions={this.state.directions}
options={{
markerOptions: {
icon:
'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'
}
}}
/>
Related
Help appreciated, I'm stuck !
What I try to do
I display a Google map with a set of marker.
When I click on a marker, I want to add a Google circle to the map.
What happens
When I click on a first marker, no circle is displayed.
But when I click on a second marker and more, they are displayed !
Why it does not work
I've tracked the map state value with console.log.
The problem is that when I first go to the MarkkerClicked function, for an unknown reason, the "map" state's value is "null" ! So no circle is created.
And, even stranger, the map state contains a map instance when the map is first loaded, and also when I click a second marker.
Can you tell me what I have done wrong, that makes the map value set to null when the first marker is clicked ?
My component :
import { GoogleMap, MarkerF, useJsApiLoader } from "#react-google-maps/api";
import Box from '#mui/material/Box';
import { useSelector } from 'react-redux'
let mapCircle1 = null
export default function MapPage() {
// The array of markers is in the REDUX store
const selectMarkersArray = state => state.markersArray
const markersArray = useSelector(selectMarkersArray)
// This state contains the selected marker (or null if no marker selected)
const [selectedMarker, setSelectedMarker] = useState(null);
// Options for GoogleMaps
let center = {
lat: 43.3318,
lng: 5.0550
}
let zoom = 15
const containerStyle = {
width: "100%",
height: "100%"
}
// GoogleMaps loading instructions
const { isLoaded } = useJsApiLoader({
id: 'google-map-script',
googleMapsApiKey: "MY-GOOGLE-KEY"
})
const [map, setMap] = useState(null)
const onLoad = useCallback(function callback(map) {
setMap(map)
console.log('map value in onLoad :')
console.log(map)
}, [])
const onUnmount = useCallback(function callback(map) {
setMap(null)
}, [])
// Function executed when a marker is clicked
function markerClicked(props) {
console.log('map value in markerClicked :')
console.log(map)
// I create a new Circle data
let circleOption1 = {
fillColor: "#2b32ac ",
map: map,
center: {lat:props.marker.spotLatitude, lng:props.marker.spotLongitude},
radius: props.marker.spotCircleRadius,
};
mapCircle1 = new window.google.maps.Circle(circleOption1);
// I update the selecte marker state
setSelectedMarker({...props.marker})
}
return (isLoaded ? (
<Box height="80vh" display="flex" flexDirection="column">
<GoogleMap
mapContainerStyle={containerStyle}
center={center}
zoom={zoom}
onLoad={onLoad}
onUnmount={onUnmount}
>
{markersArray.map((marker, index) => {
return (
<MarkerF
key={index.toString()}
position={{lat:marker.spotLatitude, lng:marker.spotLongitude}}
onClick={() => markerClicked({marker:marker})}
>
</MarkerF>
)
})}
</GoogleMap>
</Box>
) : <></>
)
};
And the console.log (first log when the map is loaded, second when the first marker is clicked, third when another marker is clicked):
map value in onLoad :
jj {gm_bindings_: {…}, __gm: hda, gm_accessors_: {…}, mapCapabilities: {…}, renderingType: 'UNINITIALIZED', …}
map value in markerClicked :
null
map value in markerClicked :
jj {gm_bindings_: {…}, __gm: hda, gm_accessors_: {…}, mapCapabilities: {…}, renderingType: 'RASTER', …}```
It coulds be because you are not using State Hooks and the <Circle /> component for rendering / updating circles
I was able to reproduce your code on codesandbox and confirmed that the map is indeed returning null per marker click. I'm still unsure as to why it really is happening, but I managed to fix it and managed to render a circle even on the first marker click, after modifying your code by utilizing State Hooks for your circles, and also using the <Circle /> component as per the react-google-maps/api library docs.
I just managed to hardcode some stuff since I did not use redux to reproduce your code but one of the things I did is create a circles array State Hook:
// this array gets updated whenever you click on a marker
const [circles, setCircles] = useState([
{
id: "",
center: null,
circleOptions: {
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
clickable: false,
draggable: false,
editable: false,
visible: true,
radius: 100,
zIndex: 1
}
}
]);
Just make sure to add the useState on your import.
Then for demonstration, I hardcoded a markers array:
// This could be your array of marker using redux,
// I just hardcoded this for demonstration
const markersArray = [
{
id: 1,
position: { lat: 43.333194, lng: 5.050184 }
},
{
id: 2,
position: { lat: 43.336356, lng: 5.053353 }
},
{
id: 3,
position: { lat: 43.331609, lng: 5.056403 }
},
{
id: 4,
position: { lat: 43.328806, lng: 5.058998 }
}
];
Then here's my markerClicked function looks like:
// Function executed when a marker is clicked
const markerClicked = (marker) => {
console.log("map value on marker click: ");
console.log(map);
// This stores the marker coordinates
// in which we will use for the center of your circle
const markerLatLng = marker.latLng.toJSON();
// this will update our circle array
// adding another object with different center
// the center is fetched from the marker that was clicked
setCircles((prevState) => {
return [
...prevState,
{
id: "",
center: markerLatLng,
circleOptions: {
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
clickable: false,
draggable: false,
editable: false,
visible: true,
radius: 100,
zIndex: 1
}
}
];
});
// this is for you to see that the circles array is updated.
console.log(circles);
};
Please do note that the onClick attribute for <MarkerF /> automatically returns a parameter that includes the marker's coordinates and other stuff, you can just try to use console.log if you wanna check. Also make sure that the value you put on the onClick is equals to the name of the function alone. In this case, it is markerClicked, you'll see later on.
Note: I also added a mapClicked function for you to be able to clear the circles array.
Please see proof of concept sandbox below.
Then this is how I rendered the <GoogleMap /> component with <MarkerF /> and <Circle /> components as its children.
<GoogleMap
mapContainerStyle={containerStyle}
center={center}
zoom={zoom}
onLoad={onLoad}
onUnmount={onUnmount}
onClick={mapClicked}
>
{markersArray.map((marker, index) => {
return (
<MarkerF
key={index.toString()}
position={{ lat: marker.position.lat, lng: marker.position.lng }}
onClick={markerClicked}
></MarkerF>
);
})}
{/* This maps through the circles array, so when the array gets updated,
another circle is added */}
{circles.map((circle, index) => {
return (
<Circle
key={index.toString()}
// required
center={circle.center}
// required
options={circle.circleOptions}
/>
);
})}
</GoogleMap>
With all these, the map value on marker click does not return null, and a circle gets rendered even on first marker click.
Here's a proof of concept sandbox for you to check and see how it works ( Make sure to use your own API key to test ): https://codesandbox.io/s/proof-of-concept-show-circle-on-marker-click-s175wl?file=/src/Map.js
Note: There's some weird offset between the marker and the circle if you zoom out too far, but seems fine when you zoom in. I have encountered this on some previous questions here in SO when rendering polylines and I don't know why is that or how to fix it.
With that said, hope this helps!
I'm working on a fairly basic implementation of Deckgl with ReactMapGl. I'd like to render a polygon overlay that outlines an array of coordinate and I'm following the documentation as well as examples that I found online. Unfortunately in my current implementation the Deckgl Wrapper div covers the entire map preventing the user from being able to interact with it. See Codesandbox example here:
https://codesandbox.io/s/react-map-5dnkoz
const data = [
{
contour: [
[-86.83446165702009, 36.17150121813963],
[-86.8287327938404, 36.15548883458097],
[-86.85771573862695, 36.15235867540224],
[-86.84962906703987, 36.139957124954705],
[-86.86694827924185, 36.1401699318269],
[-86.86802690445148, 36.15681345538646],
[-86.88323041951918, 36.16074825898015],
[-86.86222486725711, 36.17675839228444],
[-86.8486865848925, 36.16747822232059],
[-86.83960001512133, 36.166995304396785],
[-86.83446165702009, 36.17150121813963]
]
}
];
const layer = new PolygonLayer({
id: "polygon-layer",
data,
pickable: false,
stroked: true,
filled: false,
lineWidthMinPixels: 2,
getPolygon: (d) => d.contour,
getLineColor: [85, 119, 242]
});
export default function IndexPage() {
const viewport = {
latitude: 36.139691,
longitude: -86.803268,
zoom: 11
};
return (
<div>
<Map
initialViewState={viewport}
style={{ width: 800, height: 600 }}
mapStyle="mapbox://styles/mapbox/streets-v9"
mapboxAccessToken={
"pk.eyJ1IjoicGhpbGZlbGl4IiwiYSI6ImNrZTdsc3FkZzA4b3IyeWswbHhueTRkb28ifQ.MtAPCLJVyCsMHIDuXTbQGQ"
}
>
<DeckGL viewState={viewport} layers={[layer]} />
<Marker longitude={-86.803268} latitude={36.139691} color="red" />
</Map>
</div>
);
}
I want to add a different icon to the markers that are created when i click with the marker drawing control.(react-google-maps package)
I tried addding a markerOptions prop in the DrawingManager component but it doesnt seem to work like polygonOptions work.
<GoogleMap defaultZoom={13} defaultCenter={{ lat: 38.022871, lng: 23.790431 }}>
<DrawingManager
ref={props.onDrawingManagerMounted}
defaultDrawingMode={this.state.currentDrawingMode}
defaultOptions={{
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.POLYGON,
google.maps.drawing.OverlayType.MARKER
]
},
polygonOptions: this.colorOptions(),
markerOptions: {
icon: {
url: require("../../../assets/images/helipadIcon.png"),
anchor: new google.maps.Point(5, 58)
}
}
}}
Quick tipp: name the package that you are using before you ask your question. It took me a while to find the react-google-maps package on npm.
Check out the official documentation of the named package: https://tomchentw.github.io/react-google-maps/
You will find out that the DrawingManager component doesn't offer a prop named markerOptions or polygonOptions. Instead use the Marker component (https://tomchentw.github.io/react-google-maps/#marker) which offers a property icon of type any.
<Marker icon={} .../>
If you want to change/edit markers that have been drawn using the DrawingManager, you can use the onMarkerComplete callback function that will return the marker object. You can use the marker object to change the icon. See: https://developers.google.com/maps/documentation/javascript/reference/drawing#DrawingManager.markercomplete
const icon = {
url: require("../../../assets/images/helipadIcon.png"),
anchor: new google.maps.Point(5, 58)
};
const onMarkerComplete = (marker) => {
marker.setIcon(icon);
}
return (
<DrawingManager onMarkerComplete={onMarkerComplete} ...>
...
</DrawingManager>
);
I'm trying to set up a MaterialBottomTabNavigator in my app with custom icons using react-native-vector-icons, but the icons are not showing up. Am I doing something wrong in the NavigatorConfig?
At first I thought it was because my icons aren't loading in correctly, but placing them in a View on another screen (anywhere but inside the MaterialBottomTab) makes them show up no problem. Even the standard MaterialIcons provided with vector-icons aren't showing up in the bottomTab, but any other place is no problem.
I've tried shifting the configs around, placing the tabBarIcon in both the screen config, aswell as the navigator config, but still no result.
I've also tried the showIcon option, but also no results.
Here's my code right now:
export const userNavigation = createMaterialBottomTabNavigator({Bars, Settings}, {
Bars: {
screen: Bars,
navigationOptions: {
tabBarIcon: ({focused}) => <Icon name="bars" size={20} color={focused ? '#FFF' : '#DACE91'}/>,
},
},
shifting: false,
labeled: true,
activeColor: '#FFF',
inactiveColor: '#DACE91',
});
I expect the icons to show up in the bottomTab, but I get no error messages or any other feedback as to why they aren't showing.
You are putting in the tab configs the route configs.
createMaterialBottomTabNavigator({
Bars:{
screen: Bars,
navigationOptions:{
tabBarIcon: ({focused}) =><Icon name="bars" size={20} color={focused ? '#FFF' : '#DACE91'}/>,
}
}
},{
shifting: false,
labeled: true,
activeColor: '#FFF',
inactiveColor: '#DACE91',
})
Hopefully this will help!
to fix then icon
add these in bootom navigation
shifting: false,
labeled: true,
I'm following Leaflet's Choropleth tutorial
http://leafletjs.com/examples/choropleth.html
and using react-leaflet.
I managed to setStyle without any modification from the original source code and it works.
highlightFeature(e) {
var layer = e.target;
layer.setStyle({
weight: 5,
color: '#666',
dashArray: '',
fillOpacity: 0.7
});
}
The layer has a setStyle property. Now to resetStyle that I'm having propblems.
I tried to access it with
resetHighlight(e) {
this.refs.geojson.resetStyle(e.target);
}
while having GeoJson
<GeoJson
ref="geojson"
data={this.state.data}
style={this.getStyle.bind(this)}
onEachFeature={this.onEachFeature.bind(this)}
/>
but it it doesn't have resetStyle property
Anyone can suggest another way of resetting the style in react-leaflet ?
The solution was to access the leafletElement of geojson which has resetStyle
resetHighlight(e) {
this.refs.geojson.leafletElement.resetStyle(e.target);
}
react-leaflet-choropleth is a way to handle choropleth if you are not wanting to write it from scratch. It is based off of the leaflet-choropleth plugin
import Choropleth from 'react-leaflet-choropleth'
import { Map } from 'react-leaflet'
const style = {
fillColor: '#F28F3B', //default color filll
weight: 2, //normal styling
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.5
}
const map = (geojson) => (
<Map>
<Choropleth
data={{type: 'FeatureCollection', features: geojson} /*feature collection or array*/}
valueProperty={(feature) => feature.properties.value /*value for choropleth*/}
visible={(feature) => feature.id !== active.id /*use choropleth color?*/}
scale={['#b3cde0', '#011f4b'] /*color range*/}
steps={7 /*how many different colors to use?*/}
mode={'e' /*use equadistance mode, others include kmeans and quantile*/}
style={style}
onEachFeature={(feature, layer) => layer.bindPopup(feature.properties.label)}
ref={(el) => this.choropleth = el.leafletElement /*get the geojson's layer container*/}
/>
</Map>
)
ReactDom.render(<map geojson={...} />, document.body)