pass URL params ala leaflet-hash plugin

[peterm95018]

I've spent hours reading and need some help with how to approach this problem. I've got a working site using leaflet-hash crafted URL's for a couple of dozen maps.

I'd like to refactor the site into angular. I can display a map, but I'm struggling with plucking the leaflet-hash type URL parameters (or even a key=value set of URL params) into a controller and using some of the angular-leaflet-directive code snippets (e.g., $scope.extend($scope, {center: {lat:, l n g:, zoom:}).

Am I missing something obvious? Can someone suggest an approach that I might pursue?

[tombatossals]

I was thinking on implementing that functionality, similar to leaflet-hash, I think it should not be very difficult to code (in theory). This is what is done on leaflet-hash:

http://mlevans.github.io/leaflet-hash/map.html#12/37.7630/-122.4437

How do you think it would be the best way to pass the parameters on the URL? I don't think it's a good approach to to pass it on the url hash, because we will be in conflict with the application params. Maybe pass them via clean GET params?

For example, on the center example, clean params:

http://tombatossals.github.io/angular-leaflet-directive/#!/examples/tiles?leafletLat=3.05&leafletLng=0.1&leafletZoom=5

This way the center parameters could be intercepted from the directive, we could allow to activate/deactivate this functionality on the directive itself:

<leaflet center="center" allow-url-center="yes"></leaflet>

Or something similar, what do you think?

[fbuchinger]

+1 for a map routing example via hash url params. I also prefer the get param style because it is more flexible regarding optional parameters (e.g. you could also encode the marker position of a search result in that url). It should be up to the directive to handle the url parameters vs. default settings precedence. I would also prefer an extensible url parameters system that allows the encoding of custom parameters.

[tombatossals]

Hi, I finally managed to implement this feature.

You can take a look at this example: http://tombatossals.github.io/angular-leaflet-directive/examples/url-hash-center-example.html#/?c=14.604847155053898:-86.6162109375:5

And at the brief documentation :) https://github.com/tombatossals/angular-leaflet-directive/blob/master/doc/center-attribute.md#center-position-coded-on-a-hash-url-param

[houqp]

wow, sync back the enter to URL looks really cool :)

[fbuchinger]

nice implementation of a really important feature! I wonder if the directive could be extended to support the query-string format (e.g. &centerLon=14.6083&centerLat:86.7373&zoom=5). Using this approach additional map parameters could be encoded in the hash url (e.g. visible layers etc). This would also mean additional parameters for the hashUrl directive, not just on/off (see Permalink plugin of OpenLayers)

One more hint: its common to round the coordinates to 4 or five fractional digits.

[peterm95018]

I'm running through the url-hash-center-example and reading the docs. This work looks very promising.

There is a reference on this example that refers to center-url-params property. Is that the same property as url-hash-center? I may need to do some re-reading.

I'd like to use href's with hashes to draw a centered map based on a list of URL's I've already got. Something like:

<a href="#/map?c=36.8899:-121.8008:12">Click Me</a>

This lands me on the map that is centered on the predefined london coordinates. I'm starting to look at how to update the $scope.center object, but haven't gotten very far.

[tombatossals]

Hi @fbuchinger , thanks for your suggestions, I have rounded the latlng to 5 decimals. I'm not convinced about passing the full description of params as query-params, I like it in a more compact way. We could pass the layers as a different parameter, so it could be managed inside the "layers" attribute. Something like this:

http://url#/?c=36.8899:-121.8008:12&l=osm:forest

I'm leaving it as it is now for the moment.

[tombatossals]

Hi @peterm95018, liked your suggestion of links with map positions, I have activated the "locationChangeSuccess" watcher and now it works, You can see some locations I have added in this demo:

http://tombatossals.github.io/angular-leaflet-directive/examples/url-hash-center-example.html

I have updated the documentation a little too: https://github.com/tombatossals/angular-leaflet-directive/blob/master/doc/center-attribute.md#center-position-coded-on-a-hash-url-param

[peterm95018]

David, that is very cool! Thanks for all your efforts.

On Wed, Mar 19, 2014 at 4:05 AM, David Rubert notifications@github.comwrote:

Hi @peterm95018 https://github.com/peterm95018, liked your suggestion of links with map positions, I have activated the "locationChangeSuccess" watcher and now it works, You can see some locations I have added in this demo:

http://tombatossals.github.io/angular-leaflet-directive/examples/url-hash-center-example.html

I have updated the documentation a little too:

https://github.com/tombatossals/angular-leaflet-directive/blob/master/doc/center-attribute.md#center-position-coded-on-a-hash-url-param

Reply to this email directly or view it on GitHubhttps://github.com/tombatossals/angular-leaflet-directive/issues/283#issuecomment-38038884 .