map pin bound to dynamic coordinates is not updating its position

[rohanrichards]

The title describes fairly accurately what I'm experiencing. I would like to be able to click on a map and have a map marker move to that location.

Here's my template:

	<mgl-map class=""
		[style]="'mapbox://styles/mapbox/streets-v9'"
		[zoom]="[9]"
		[center]="[153.021072, -27.470125]"
		(click)="mapClick($event)"
		>
		<mgl-marker
  			[feature]="pickerLocation"
		>
	  		<div
				(click)="alert('Foo')"
				class="marker"
	  		>
				<i class="fa fa-map-marker"></i>
				{{pickerLocation.geometry.coordinates}}
	  		</div>
		</mgl-marker>
	</mgl-map>

Here's the important bits from my controller:

	pickerLocation = {
		type: "Feature",
		geometry: {
			type: "Point",
			coordinates: [153.021072, -27.470125]
		}
	};

	mapClick(event) {
		if(event.lngLat){
			this.pickerLocation.geometry.coordinates = event.lngLat;
		}
		console.log(this.pickerLocation);
	}

When I click on the map the object coordinates property is being updated, this can be confirmed by seeing the template binding {{pickerLocation.geometry.coordinates}} updating, however the markers position isn't changing at all.

I've tried replacing the mgl-marker data source to a plain array or object, instead of a Feature. However this is having the same effect (the pin doesn't move on click).

[Wykks]

Hi!

You need to change the ref of pickerLocation when you change anything inside.

ngx-mapbox-gl doesn't do deep check in every tick. It's too expensive, and it's more like the way Angular works (vs angular.js deep watch).

[rohanrichards]

Hi @Wykks thanks for the quick reply, I'm not sure I'm understanding though. Are you able to make a modification to my code to explain?
I'm just not clear on what you mean by "change the ref of pickerLocation". As I am already directly modifying that object.

EDIT
I actually got this working by just using a LngLat array instead of a Feature:

//component.ts
coordinates = [153.021072, -27.470125];
//template.html
<mgl-marker
	[lngLat]="coordinates"
>
	<div
		(click)="alert('Foo')"
		class="marker"
	>
		<i class="fa fa-map-marker"></i>
		{{pickerLocation.geometry.coordinates}}
	</div>
</mgl-marker>

I'm now trying to figure out how to combine mglDraggable with this so I can have both click and drag to move the marker around, however there's no documentation (that I can find) on mglDraggable. This may not be something to discuss here so feel free to close this.

[Wykks]

You can't just mutate the object. By changing the ref, I mean that you have to create a new object. For example like that in es6 : {...pickerLocation}. ngOnChanges is only called when references changes, not on object mutation.

mglDraggable only works with a mgl-layer using mgl-geojson-source (of Point only). Just like in this example: .

https://www.mapbox.com/mapbox-gl-js/example/drag-a-point/

But it's doesn't work well (that's why it's undocumented). (mapbox/mapbox-gl-js#5187)

Draggin a Marker seems a better option that dragging a layer (also see mapbox/mapbox-gl-js#3087)
So, I think I'll move mglDraggable to Marker instead of Layer.

You should be able to implement that yourself. Just listen to 'mouseenter' => 'mousedown' => 'mousemove' and update the coord of the marker at 'mouseup' or 'mousemove'.

[rohanrichards]

Ok I understand now, thanks so much for the explanation!
I implemented the draggable from the example and it will work for now, in future I might re-implement the mgl-marker with my own events.
I'm curious though how I can learn what events are available on components, I had a brief look in the source but it wasn't clear what components might have bindable events such as mouseenter etc. These events are only documented on the mgl-map component.

[Wykks]

Most of the event are the mgl-map, but you can find some event in mgl-layer too (https://github.com/Wykks/ngx-mapbox-gl/wiki/API-Documentation#outputs-1)
I don't know If more event are necessary, for now 🙃 . You can open a new issue if you think that an event is missing :)

[Wykks]

mglDraggable now support mglMarker 😃 (8aa02a8)