My Location features about google-map

[bamnet]

It sounds like a component which exposed attributes with the latitude and longitude of the user would be much more reusable, might be worth checking out http://ebidel.github.io/geo-location/components/geo-location/.

[MarcusJT]

Hmmmm, yes... geo-location component handles the querying and one of the examples shows its output plugged directly into the lon/lat parameters of google-map but maybe what's needed is a third component that renders a My Location UI control with three states - disabled + hidden, enabled + one-time My Location update, and enabled + My Location updates. It would also need to display a marker on the map for the enabled states.

Presumably this new "my-location" component would enable/disable the state of geo-location, set the state of geo-location's watchpos parameter, receive lon/lat parameters from geo-location, and add/remove/update a marker on google-map using the lon/lat parameters as needed?

However I don't fully understand how this can be done in such a way that any of the three components could be replaced by an equivalent component (without explicit dependencies/bindings between them) as this seems significantly more complex than just having one component receive parameters from another. Where can I find out more about how multiple components should work together like this? Also since geo-location doesn't have a parameter which stops it firing on load how could this be added without requesting it as a new feature by the developer?

[MarcusJT]

Would it be something like this?

<geo-location latitude="{{geo-lat}}" longitude="{{geo-lng}}" disabled="{{my-disabled}}" watchpos="{{geo-watchpos}}"></geo-location>
<google-map>
  <geo-location-control latitude-in="{{geo-lat}}" longitude-in="{{geo-lng}}" latitude-out="{{my-lat}}" longitude-out="{{my-lng}}" disabled-state="{{my-disabled}}" live-updates="{{watchpos}}" ></geo-location-control>
  <google-map-marker latitude="{{my-lat}}" longitude="{{my-lng}}" title="My Location" hidden="{{my-disabled}}"></google-map-marker>
</google-map>

[ebidel]

Definitely reusing components is the way to go. I actually had this exact demo in my IO session: http://polymer-change.appspot.com/#62. The demo is at http://polymer-change.appspot.com/demos/locator.html.

You could easily create a <polymer-element> that wraps this:

<geo-location latitude="{{lat}}" longitude="{{lng}}" watchpos></geo-location>
<google-map latitude="{{lat}}" longitude="{{lng}}" zoom="{{zoom}}">
  <google-map-marker latitude="{{lat}}" longitude="{{lng}}"></google-map-marker>
</google-map>

The <geo-location> element does most of what you want. If you don't want it declared when the page loads, you could dynamically stamp it:

<template if="{{!disablePos}}">
  <geo-location latitude="{{lat}}" longitude="{{lng}}" watchpos></geo-location>
</template>

[MarcusJT]

Ah! I watched your inspiring talk only the other day (one of the reasons I'm now here asking these questions) but totally forgot that you had shown a demo very much like this, thanks for the reminder!

I recall you mentioned stamping in your talk but can't find anything useful about it in the Polymer site let alone an explanation or example of the dynamic stamping you cite.

For instance, in my query above I want to toggle geolocation on and off, so if disablePos toggles false and geo-location is dynamically stamped, does it become unstamped once disablePos toggles true again or is it there for the lifetime of the page, in which case how do I switch it off again?

[ebidel]

I use the term "stamping" to refer to the process of polymer's data-binding system to dynamically create <template> instances (e.g. stamp out instances, mint instances, etc).

if disablePos toggles false and geo-location is dynamically stamped, does it become unstamped once disablePos toggles true again

Yes. The data binding system will remove the node from the the dom. In the case of the geo-location element, if you leave it in the dom, just toggle the watchPos attribute. Toggling that attribute toggles the position watching: https://github.com/ebidel/geo-location/blob/master/geo-location.html#L136

I've filed a bug for doing the same cleanup if the element is removed from the dom: ebidel/geo-location#3