Polymaps svg map container defaults to 300px by 150px and cannot be set otherwise

Question

I found a bug in Polymaps but haven't found the exact cause yet. Sometime recently, my local copy of Polymaps.js (2.5.1)) stopped displaying the map as the full size of the container, but instead only displayed a 300px x 150px view. I also see this behavior on the Polymaps.org website.

CSS style sheet has:

div#map {
  position: relative;
  border: solid 4px #ccc;
  background: #eee;
  width: 1800px;
  height: 800px;
}

HTML page has:

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

JavaScript map code has:

var map = po.map()
    .container(document.getElementById("map").appendChild(po.svg("svg")))
    .add(po.image().url("grid.png"))
    .zoomRange([1, 12])
    .zoom(11)
    .add(po.image().url("http://192.168.1.1:4444/tiles/{Z}/{X}/{Y}.png"))
    .add(po.interact())
    .add(po.compass());         // zoom and pan compass control

RESULTS 0:

<svg class="map">
<rect visibility="hidden" pointer-events="all" width="300" height="150"></rect>

However, svg.map has an actual size of 300px x 150px. The map div in CSS is not being used to size the map. I thought the point of selecting the container (document.getElementById("map")) would be to transfer across the container size...

EXPERIMENT 1: Add this line to the JavaScript map code above (after .container):

.size({"x": 1600, "y": 1000})

RESULTS 1:

<svg class="map">
  <rect visibility="hidden" pointer-events="all" width="1600" height="1000"></rect>

Which changes the rect size, however if you check the svg.map size, it is still 300px x 150px.

EXPERIMENT 2: With the following element selected in the browser debug console Elements list:

<svg class="map">

Change the size of the element under the Styles tab, currently reads 300 x 150. Modify to 1100 x 700.

RESULTS 2:

<svg class="map" style="
    width: 1100px;
    height: 700px;
">
    <rect visibility="hidden" pointer-events="all" width="1600" height="1000"></rect>

And now the viewable map area is 1100px x 700px.

Debugging in Chrome, I put a breakpoint at line 491 of polymaps.js?2.5.1: return map.resize(); // infer size

Then checked the local variables at that point.

x: svg
  attributes: NamedNodeMap
  .
  .
  .
  height: SVGAnimatedLength
    animVal: SVGLength
    baseVal: SVGLength
      unitType: 2
      value: 150
      valueAsString: "100%"
      valueInSpecifiedUnits: 100
    __proto__: SVGLength
  __proto__: SVGAnimatedLength
  .
  .
  .
  width: SVGAnimatedLength
    animVal: SVGLength
      unitType: 2
      value: 300
      valueAsString: "100%"
      valueInSpecifiedUnits: 100
    __proto__: SVGLength
  baseVal: SVGLength
  __proto__: SVGAnimatedLength

It seems that Polymaps is getting the map size by inference to some default value of SVGAnimatedLength, rather than picking up the container size OR properly using the map.size() function. My guess is that the SVG standard or implementation somehow changed and Polymaps doesn't handle it (being 2011 code now).

Can anyone help find where the problem lies? And preferably fix it! It would be much appreciated. Thanks. Jamie

score 1 · Answer 1 · answered Mar 26 '15 at 00:14

I've seen this as well, and I had the same problem.

I fixed it in the stylesheet by giving the container full width and then setting the map class to the same size - notice the svg wrapper has the map class

#vipMap, #vipMap .map {width:998px; height:400px; background:#666;}
#vipMap {border:1px solid #CCC; position:relative; overflow:hidden;}

The container is the #vipMap and by adding the .map class you ensure the svg remains the same width and height of the container

Polymaps svg map container defaults to 300px by 150px and cannot be set otherwise

1 Answers1