Thursday, March 26, 2015

Using the google-map Polymer in Polymer.dart Elements

Thanks to the magic of custom_element_apigen, I was able to use the JavaScript <google-map>Polymer element in a Dart application last night. In the end it was, dare I say it, easy.

Tonight, I would like to dynamically use <google-map> from a custom built Polymer.dart element, let's call it <x-map>. I start by altering my sample page to import this definition instead of directly pulling in the custom_element_apigen version of <google-map>:

Instead of the usual, boring map of San Francisco, I start with coordinates of a city with some character. In the backing class defined in x_map.dart, I need to support the latitude and longitude attributes. I also need to import the <google-map> element:

As a side-note, I confess that I am alarmed at how quickly I am getting used to this code-import of Polymer definitions. I have used the <link> imports throughout Patterns in Polymer. It would be hard to switch at this point—especially since the JavaScript version of the book would still have to use <link> imports—but darn these are nice.

At any rate, I import google_map.dart, which is the Dart wrapper generated last night. I also annotate my desired, published attributes. So next up is the HTML template definition.

My first pass at <x-map> is a trivial Polymer template. In it, I bind my latitude and longitude attributes in the <google-map> attributes of the same name:

The slider is bound to the longitude of the map, so updating it (as I did above by clicking to the right) updates my element's longitude, which is bound to the <google-map> longitude. The end result is that updating the slider updates the map.

So far, working with <google-map> from Polymer.dart seems quite nice. Up tomorrow, I think that I would like to add custom children to my custom <x-map> such that they act as markers on the map. I have the feeling that the shadow DOM is going to make that a little tricky.

3 comments:

Actually making custom elements to act as markers is reasonable straight forward. I did a post which may give you a clue as to how. I'll get back to you with the link to that blog post that explains it.