Live update of hash url parameters after each map manipulation

[fbuchinger]

Hi,

we are currently developing a browser-based map application using OpenLayers, Knockout.js and pagerjs. We want the hash url to reflect the current map status, which means it has to be updated after each map pan/drag/zoom. OpenLayers offers the Permalink control for this, but we also want to control other ui components via the hash url.

So we decided to implement the hash url <-> map binding via pager.js. With this binding we can successfully pass the url parameters into the map model

<div id="map" data-bind="page: {id: 'map', params: {query: map,'mapView': '55a9d412-4cec-40a0-baf2-1df9a82ffeb6', lon: 73828, lat: 273723, zoom: 9}}" class="well" style="display: block;"></div>

so that an example link opens the map with a correct configuration:
#!/map?mapView=1a4dd908-ca1d-4cd8-87e0-b068d265f0b6&lon=738273&lat=87237383&zoom=10

However we are not sure how to update the hash url after the map changes. Can we have a two-way binding between the hash url and the affected observables? (hash url automatically changes when these observables change) Or do we have to update the hash url manually by subscribing to the affected observables?

[finnsson]

At the moment there is no support for two-way bindings between the hash url and observables.

You could probably implement it yourself for your specific scenario, but making something general is probably a larger problem involving two-way computed observables for params, etc.

In your case I would recommend to either implement your own start-method or override the method pager.showChild in order to stop any navigation triggered by an hash-update of the long/lat. Maybe extending pager with an ability to temporarily disable/deactivate the hashchange-listener?

[gabidi]

I was wondering if you have found a work around for this situation ? I'm also in a similar situation where the user has the ability to modify a VM parameter that is bound to URL parameter and would like the URL to reflect that. Would apprecaite your input :)

[mw44118]

I'm facing this problem too!

I want to paginate a bunch of results from a query. by using parameters ["offset", "limit"], but when these observables change, nothing happens in the hash URL.

I can explicitly use data-bind="page-href: {...}"

to change the hash URL, but the afterShow callback doesn't fire.

It is ironic that we are having trouble with pagination in pager.js :)

[adonomay]

+1!