title: SVG polygon shape from latLngs
body: <p>I am trying to write a <code>Javascript</code> function which will allow me to enter any set of bounds and get back a shape of that area (for example provide the bounds of Kansas and get back its shape). I already have the bounds and know that I can create an <code>svg polygon</code> and set its <code>points</code> attribute to the bounds array (converted to a string). I also understand that since the <code>points</code> are really <code>latLngs</code> I should set the <code>viewBox</code> attr to the bounds of the entire world (so that I can truly enter in any set of coordinates). What I am having trouble understand is how I can effectively "zoom in" so that I can actually see the shape. With the function below I am successfully getting it to render but it is incredibly small and I am unsure of how to have it fit as much of the box as possible? I began looking at D3 but then wasn't sure that was the best solution as I am not trying to put these on a map, I am just trying to draw them.</p>
  
  <pre><code>var pointsData = function(bounds) -&gt;
   points = []
   i = 0
   while i &lt; bounds.length
     points.push bounds[i].lat + ' ' + bounds[i].lng
     i++
   return points.toString().replace(",", "");;
  </code></pre>
  
  <p>and then setting the <code>points</code> attr of a given <code>svg</code> to the result of the <code>pointsData</code> function.</p>
  
  <hr>
  
  <p><strong>EDIT > Solution:</strong></p>
  
  <p>Ended up using HTML5 Canvas and map projector function:
  <a href="http://jsfiddle.net/xtjgwa45/1/" rel="nofollow">http://jsfiddle.net/xtjgwa45/1/</a></p>