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>
);
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 want to add custom marker to my map. Im using react-map-gl library and components Layer and Source. My code is:
import pin from "../images/pin.svg";
. . . .
const geojson: GeoJSON.Feature<GeoJSON.Geometry> = {
type: 'Feature' ,
geometry:{
type: 'Point' as 'Point',
coordinates:[21.300465619950796 , 48.70795452044564],
},
properties: {
name: "Marker",
}
};
const layerStyle = {
id: 'point',
type: 'symbol' as 'symbol',
source: 'Marker',
layout: {
'icon-image': 'pin',
'icon-size': 1
},
paint: {
'icon-color': '#78546'
},
};
.
.
.
.
<Source id="my-data" type="geojson" data={geojson}>
<Layer {...layerStyle} />
</Source>
But my icon doesnt appear. Can you help me please?
Basically mapbox needs to have a reference of the image already stored before it can assigned it to a pin/marker in a layer symbol.
Here is what I did, and hope it helps you
First create a onLoad function that will be called when the map loads
<Map
...
ref={mapRef} // need a ref to reference it later if you don't have it already
onLoad={onLoad}
/>
In the onLoad function create a new image and load its content
const onLoad = (e) => {
if (mapRef.current) {
const pinImage = new Image();
pinImage.onload = () => {
if (!mapRef.current.hasImage('pin')) {
mapRef.current.addImage('pin', pinImage, { sdf: true });
}
}
pinImage.src = pin; // pin is your svg import
}
}
It should now work with your current layer attributes, please note that the name given in the addImage call (the first argument 'pin') must match the image-icon in the layer settings.
Note: Also make sure the layer style source attribute matches that of its source id.
Something like this:
import ReactMapGL, {Marker} from 'react-map-gl';
<ReactMapGL width="100vw" height="100vh">
<Marker longitude={longitude} latitude={latitude} >
<img src={pin} />
</Marker>
</ReactMapGL>
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'
}
}}
/>
I'm using React Leaflet. I have a map and an array with names and corresponding positions. Every name from the array is a button. When I click on a name the position changes and should be updated in the map. That works with the marker but not with the section of the map. How can I update also the section of the map?
const data = [
{
name: 'John',
coordinates: {
langitude: '40.72260370101827',
latitude: '-73.99323791583221',
},
},
{
name: 'Bob',
coordinates: {
langitude: '40.72843542344666',
latitude: '-73.94860440141105',
},
},
{
name: 'Chris',
coordinates: {
langitude: '40.79159996340942',
latitude: '-73.94077957876242',
},
},
];
export default function Map(props) {
const { index, data } = props;
return (
<MapContainer
center={[
data[index].coordinates.langitude,
data[index].coordinates.latitude,
]}
zoom={16}
>
<TileLayer
attribution='© OpenStreetMap contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
></TileLayer>
<Marker
position={[
data[index].coordinates.langitude,
data[index].coordinates.latitude,
]}
>
<Popup>{data[index].name}</Popup>
</Marker>
</MapContainer>
);
}
Here's a complete description for this issue in: another thread. Basically the center prop (and all other props, except children) of MapContainer is immutable, so you need to use the provided methods as explained in the answer above.However, here's a quick fix I thought of:
<MapContainer
key={JSON.stringify([data[index].coordinates.langitude, data[index].coordinates.latitude])}
center={[
data[index].coordinates.langitude,
data[index].coordinates.latitude,
]}
zoom={16}
>
Only addition to your code is the key prop, which takes the stringified center position. So when the position changes, another instance of the MapContainer component is created (a fresh copy ;) ), having the proper center value.
From the official docs:
Except for its children, MapContainer props are immutable: changing
them after they have been set a first time will have no effect on the
Map instance or its container.
As a result you have to create a custom component that changes the map view upon coordinate change
function SetViewOnClick({ coords }) {
const map = useMap();
map.setView(coords, map.getZoom());
return null;
}
Use it a child of MapContainer below your Marker comp by passing the coorinates as a prop.
<SetViewOnClick
coords={[
data[index].coordinates.langitude,
data[index].coordinates.latitude
]}
/>
Once the updated index is received map's view will be changed.
Demo
I'll use my code as a reference:
export default class DrawingContainer extends Component {
static propTypes = {
onPolygonComplete: PropTypes.func
};
state = {
drawingMode: 'rectangle'
};
render() {
return (
<DrawingManager
drawingMode={this.state.drawingMode}
onPolygonComplete={polygon => {
this.setState({
drawingMode: ''
}, () => {
if (this.props.onPolygonComplete) {
this.props.onPolygonComplete(convertPolygonToPoints(polygon));
}
});
}}
onRectangleComplete={rectangle => {
this.setState({
drawingMode: ''
}, () => {
if (this.props.onPolygonComplete) {
this.props.onPolygonComplete(
convertBoundsToPoints(rectangle.getBounds())
);
}
});
}}
defaultOptions={{
drawingControl: true,
drawingControlOptions: {
position: window.google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
window.google.maps.drawing.OverlayType.POLYGON,
window.google.maps.drawing.OverlayType.RECTANGLE
]
},
rectangleOptions: polygonOptions,
polygonOptions
}}
/>
);
}
}
So there are two approaches I followed to try to toggle the drawing mode to default drag mode after first drawing.
Either I save the current drawing mode(polygon or rectangle) to my own state and pass it to DrawingManager. I set my default varialbe in state called drawingMode to 'rectangle', pass it to the DrawingManager and then, in the function onRectangleComplete, I set it as an empty string, and it works since the map initially loads with the rectangle mode. But once I click on one of the drawing control, it never stops drawing, even though the variable is being set to an empty string. So I think there's a breach of controlled component here.
The second approach I tried was to explicitly try and find the google DrawingManager class to use it's setDrawingMode function. But I tried using ref on drawing manager and then went to it's state, and was able to see it there, but then I read the variable name DO_NOT_USE_THIS_ELSE_YOU_WILL_BE_FIRED - I believe the library prevents this approach.
So how do I use the drawing controls along with changing the drawing mode back to the default after I complete my first drawing?
handlePolygonComplete(polygon) {
console.log(this);
const paths = polygon.getPath().getArray();
if (paths.length < 3) {
polygon.setPaths([]);
alert("You need to enter at least 3 points.")
} else {
const coords = paths.map((a) => [a.lat(), a.lng()]);
this.setDrawingMode(null);
this.setOptions({ drawingControlOptions: { drawingModes: [] } });
window.addPolygonToState(coords);
}
and
<DrawingManager
onPolygonComplete={this.handlePolygonComplete}
>
Here I check if the user put at least 3 points, if he/she did, get its coordinates, and remove the drawing mode.
So I just set a toggle with a function that stopped rendering the DrawingManager
<GoogleMap
defaultZoom={10}
defaultCenter={new google.maps.LatLng(38.9072, -77.0369)}
>
{this.props.creatingPolygon && <DrawingManager
defaultDrawingMode={google.maps.drawing.OverlayType.POLYGON}
defaultOptions={
{
drawingControl: this.props.creatingPolygon,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
this.props.creatingPolygon && google.maps.drawing.OverlayType.POLYGON
],
}
}
}
onPolygonComplete={(polygon) => this.createDeliveryZone(polygon)}
/>}
</GoogleMap>