Map doesn't re-render when lat/long input is updated via javascript

[MikeSandford]

I got the app installed and the documentation so far as been pretty good! I'm stoked to be able to use something like this.

What I'm trying to do is call out to the browser's geolocation API and get the location that way. Not all that useful for a desktop but when using on a phone or a tablet it means that you can tag exactly where you're gathering data.

{{form.media}}
<script type="text/javascript">
$("#find_btn").click(function (){
	if ("geolocation" in navigator){
		navigator.geolocation.getCurrentPosition(function(position){
      var loc_string = position.coords.latitude + "," + position.coords.longitude;
      console.log("Found location as " + loc_string);
      //$("#id_location").fill(position.coords);
      $("#id_location").val(loc_string);
      $("#id_location").trigger( "keyup" );
      //$("#map_location").render();
      //console.log($("#map_location"));
		});
	}else{
		console.log("Browser doesn't support geolocation!");
	}
});
</script>

I've got the code handled that calls out to the browser (following this tutorial: https://www.sanwebe.com/2016/04/get-current-location-of-user-using-jquery) and it even updates the input! But the input being updated doesn't seem to cause the map to re-render. I'm finding digging into the code difficult to do as the patterns are a bit unfamiliar to me. I tried sending the input a keyup event (based on the event handlers I saw being wired up) but I think those are for watching the based_fields inputs PlainLocationField(based_fields=['city']

Is it possible for me to cause the map to get re-rendered? Obviously it'd be super awesome if the library did this by default whenever the lat/long input changed. But I'm more than happy to figure out what function I can call on the input or the map to get it to be re-rendered as I'm fine making a user press a button to get a new geolocation sample taken and have the map updated in that case only.

[caioariede]

@MikeSandford did you try trigger change event?

[MikeSandford]

@caioariede thanks for taking a look at this! I just tried change, keyup, focusout and blur.

$("#id_location").val(loc_string).change().focusout().blur().keyup();

I also tried manually inputting 0,0 and when I clicked away from the input the map and marker didn't update that way either. It seems as though there's a binding from the "watched" form inputs to the map, but not from the actual lat/lon input to the map.

[MikeSandford]

@caioariede I was able to put together some code that does the latlong input field to map marker binding and it works on my local machine. But then I went down the rabbit hole a little bit looking at leaflet docs and it seems like there's stuff in leaflet to do exactly that! map.locate is available and you can even pass in a watch=true parameter.

I can make a PR with what I already have but I'm not entirely sure what's the best route forward here. Are you interested in adding this capability? If so do you have a preference on how it's achieved? The one difficulty I have on attempting to expose the leaflet functionality is that I'm not sure how to get a reference to the map from the context of a webpage that has a button on it that a user presses to center the map on themselves. I can find the jQuery node that's the div of the map widget or the inner div of the actual rendered map but I haven't figured out how to get something that I can then call any of the $.locationField methods on.

[Alsaheem]

hello @MikeSandford please im havin gthe same issue , how do i fix it ,....

Thanks

[pfcodes]

+1

[michaelhjulskov]

Solution would be to trigger a change on the city field or one of the other fields, "its" listening to.

Example if you have jQuery

after you have changed the value of location input field - then trigger a change on the city field

loc_string = ?something?
$("#id_location").val(loc_string);
$("#id_city").trigger('change');

or maybe you should trigger keyup on the city field - you'll have to look in the code to see or just play around with it.

I think that will do the trick for you :)