CODEWITHSUNDEEP
javascriptpolymerleafletpolymer-1.0
Peter Rushforth
Peter Rushforth

Reputation: 43

Element.clientWidth / .clientHeight in polymer 1.0 / leaflet 0.7.3

Leaflet normally requires a ... with a defined height as its container in normal DOM. I would like to replicate that in a custom element.

The question is: how do I get the first child content element of the custom element to have a defined height, width as reported by Element.clientHeight, Element.clientWidth, which are used by Leaflet?

I am trying to build a custom element using Polymer 1.0 + leaflet 0.7.3. I realize that leaflet's use of the DOM is likely going to be an issue to be managed, however I am having problems getting the leaflet container set up such that a valid map can be created in the first place. I think it is because leaflet uses Element.clientHeight /.clientWidth to generate the extent for which it requests tiles.

I have set up a plunker here: http://plnkr.co/edit/uELMbapeApmp8MBfomfr?p=info. 

  console.log(this.localName + '#' + this.id + ' was attached');
  console.log("getComputedStyle("+this.localName+").height/width: " + window.getComputedStyle(this).height+"/"+ window.getComputedStyle(this).width);
  console.log(this.localName + "this.clientHeight/Width: "+this.clientHeight+ "/"+this.clientWidth);
  this.map = L.map(this.$.map, {
    center: new L.LatLng(this.getAttribute('lat'), this.getAttribute('lon')),
    zoom: this.getAttribute('zoom')
  });
  console.log("map center: "+this.map.getCenter());
  var west = this.map.getBounds().getWest(),
      south = this.map.getBounds().getSouth(),
      east = this.map.getBounds().getEast(),
      north = this.map.getBounds().getNorth();

  if (west === east || south === north) {
    console.log('ERROR: BAD EXTENT');
  }

If you reveal the console, it should log the extent that is calculated when the map is first set up. The weird thing is that if I run that locally, and put a breakpoint on the first line of my-map.html's attached callback (the first console.log, above), and step through it, the extent is calculated differently (correctly). If there is no breakpoint, the extent is calculated to have a height of 0, and the error is logged.

I have tried:

<template><div id="map"></div></template> <template><div id="map"><content></content></div></template>

and of course, no content in the template at all.

Upvotes: 0

Views: 640

Answers (2)

Ira Burton
Ira Burton

Reputation: 89

I was having the same issue, I found that I needed to get the width I had to wait for 1ms before being able to see what I needed. I did not want to hang up the rest of my calls, so throwing the required functionality in an async made sense.

attached: function() {
    this.async( function() {
        console.log(this.clientWidth);
    }, 1);
},

Upvotes: 0

Peter Rushforth
Peter Rushforth

Reputation: 43

The issue was that the attached callback was executing before the styles etc had been fully transmitted to the element. This was worked around by using the async(function, [wait]) library method.

Upvotes: 1

Related Questions