Example of a CartoDB iframe in the Amp library
Created
March 18, 2016 19:13
-
-
Save andrewxhill/2fd2235c444e5bf1d3e0 to your computer and use it in GitHub Desktop.
Example of a CartoDB iframe in the Amp library
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html amp lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>Hello, AMPs</title> | |
<link rel="canonical" href="http://example.ampproject.org/article-metadata.html" /> | |
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> | |
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script> | |
<script type="application/ld+json"> | |
{ | |
"@context": "http://schema.org", | |
"@type": "NewsArticle", | |
"headline": "Open-source framework for publishing content", | |
"datePublished": "2015-10-07T12:02:41Z", | |
"image": [ | |
"logo.jpg" | |
] | |
} | |
</script> | |
<style amp-custom> | |
/* any custom style goes here */ | |
body { | |
background-color: white; | |
} | |
p.filler { | |
height:600px | |
} | |
</style> | |
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> | |
<script async src="https://cdn.ampproject.org/v0.js"></script> | |
</head> | |
<body> | |
<h1>Welcome to the mobile web</h1> | |
<p class='filler'> | |
i'm text just filling the 600px/75% rule... | |
</p> | |
<p > | |
<amp-iframe width=300 height=300 | |
sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox" | |
layout="responsive" | |
frameborder="0" | |
src="https://team.cartodb.com/u/andrew/viz/7effbc3e-eb86-11e5-a224-0e674067d321/embed_map"> | |
</amp-iframe> | |
</p> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment