[GIS] iframe map adjusts to cartodb zoom/centering

cartoembeddable-web-maps

I noticed recently that my published iframe map adjusts to whatever the zoom and centering is for that map on the cartodb site. So if I'm playing around with the cartodb map on cartodb, say exploring particular regions of the map, this will have a direct impact on what my website users see in the embedded map.

Is there a way to avoid this? I don't see any parameters for setting center or zoom in the iframe code:

<iframe width='100%' height='520' frameborder='0' src='http://sanjuro.cartodb.com/viz/10f021cc-b7a5-11e4-a4dd-0e853d047bba/embed_map' allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>

Best Answer

You can specify some flags in the URL to get the view you want.

The example below centers on [lat,long] = [34,-122] with zoom equal to 5.

http://team.cartodb.com/u/santiagoa/viz/4a39c7f8-b6ce-11e4-9da5-0e853d047bba/embed_map?center=[34,-122]&zoom=5

Related Solutions

[GIS] How to embed iFrame content into a CartoDB infoWindow

From the mustache documentation:

All variables are HTML escaped by default. If you want to return unescaped HTML, use the triple mustache: {{{name}}}.

So in your code, you'll need to write:

{{{embed}}}

My recommendation, however, is storing the URL in a row and writing the iframe tag in the template:

<div class="cartodb-popup">
  <a href="#close" class="cartodb-popup-close-button close">x</a>
    <div class="cartodb-popup-content-wrapper">
      <div class="cartodb-popup-content">
        <h4>name</h4>
        <p>{{name}}</p>
        <h4>description</h4>
        <p>{{description}}</p>
           <iframe width="100%" height="166" scrolling="no" frameborder="no" src="{{url}}"></iframe>
      </div>
    </div>
    <div class="cartodb-popup-tip-container"></div>
  </div>

[GIS] Embedding a map in an “iframe”, can’t disable scrolling so it fills the whole viewport

In case anyone has this same particular question, after way too much searching around and trying a bunch of redundant solutions, I managed to get the iframe to do what I wanted it to do by removing the .embed container div and everything related to it, so there was only the basic html code and the iframe. Here's what it looks like:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Portland Cycle Safety Map</title>
    <link rel="icon" href="/icons/cog.svg">

    <style type="text/css">
        html, body { margin: 0; padding: 0; height: 100%; }

        iframe {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;    
        }
    </style>
   </head>

  <body>

   <iframe scrolling="no" width="100%" height="100%" margin-top="100px" title="Cyclist Danger Zones" 
   src="http://orcommunitycolleges.maps.arcgis.com/apps/webappviewer/index.html?id=f4c8ec20ff7d462dbc66e207cb1f2cfc"></iframe>

  </body>
</html>

Best Answer

Related Solutions

[GIS] How to embed iFrame content into a CartoDB infoWindow

[GIS] Embedding a map in an “iframe”, can’t disable scrolling so it fills the whole viewport

Related Question