Skip to content

Instantly share code, notes, and snippets.

@pbogden

pbogden/README.md

Last active December 21, 2015 11:49
Show Gist options
  • Save pbogden/6301219 to your computer and use it in GitHub Desktop.
Save pbogden/6301219 to your computer and use it in GitHub Desktop.
Download ZIP
OpenLayers & GML
Raw
README.md

Rendering GML polygons with OpenLayers.

Adapted from: http://openlayers.org/dev/examples/gml-layer.html

-- added <styles> section to index.html and removed links to remote css.
-- removed <body> content, except for the map.

How it works:

-- creates an OpenLayers.Map
-- adds an OpenLayers.Layer.WMS (uses OSGeo WMS)
-- adds an OpenLayers.Layer.Vector (reads polygons from local GML file)
Raw
default.css
div.olMap {
z-index: 0;
padding: 0 !important;
margin: 0 !important;
cursor: default;
}
div.olMapViewport {
text-align: left;
-ms-touch-action: none;
}
div.olLayerDiv {
-moz-user-select: none;
-khtml-user-select: none;
}
.olLayerGoogleCopyright {
left: 2px;
bottom: 2px;
}
.olLayerGoogleV3.olLayerGoogleCopyright {
right: auto !important;
}
.olLayerGooglePoweredBy {
left: 2px;
bottom: 15px;
}
.olLayerGoogleV3.olLayerGooglePoweredBy {
bottom: 15px !important;
}
/* GMaps should not set styles on its container */
.olForeignContainer {
opacity: 1 !important;
}
.olControlAttribution {
font-size: smaller;
right: 3px;
bottom: 4.5em;
position: absolute;
display: block;
}
.olControlScale {
right: 3px;
bottom: 3em;
display: block;
position: absolute;
font-size: smaller;
}
.olControlScaleLine {
display: block;
position: absolute;
left: 10px;
bottom: 15px;
font-size: xx-small;
}
.olControlScaleLineBottom {
border: solid 2px black;
border-bottom: none;
margin-top:-2px;
text-align: center;
}
.olControlScaleLineTop {
border: solid 2px black;
border-top: none;
text-align: center;
}
.olControlPermalink {
right: 3px;
bottom: 1.5em;
display: block;
position: absolute;
font-size: smaller;
}
div.olControlMousePosition {
bottom: 0;
right: 3px;
display: block;
position: absolute;
font-family: Arial;
font-size: smaller;
}
.olControlOverviewMapContainer {
position: absolute;
bottom: 0;
right: 0;
}
.olControlOverviewMapElement {
padding: 10px 18px 10px 10px;
background-color: #00008B;
-moz-border-radius: 1em 0 0 0;
}
.olControlOverviewMapMinimizeButton,
.olControlOverviewMapMaximizeButton {
height: 18px;
width: 18px;
right: 0;
bottom: 80px;
cursor: pointer;
}
.olControlOverviewMapExtentRectangle {
overflow: hidden;
background-image: url("img/blank.gif");
cursor: move;
border: 2px dotted red;
}
.olControlOverviewMapRectReplacement {
overflow: hidden;
cursor: move;
background-image: url("img/overview_replacement.gif");
background-repeat: no-repeat;
background-position: center;
}
.olLayerGeoRSSDescription {
float:left;
width:100%;
overflow:auto;
font-size:1.0em;
}
.olLayerGeoRSSClose {
float:right;
color:gray;
font-size:1.2em;
margin-right:6px;
font-family:sans-serif;
}
.olLayerGeoRSSTitle {
float:left;font-size:1.2em;
}
.olPopupContent {
padding:5px;
overflow: auto;
}
.olControlNavigationHistory {
background-image: url("img/navigation_history.png");
background-repeat: no-repeat;
width: 24px;
height: 24px;
}
.olControlNavigationHistoryPreviousItemActive {
background-position: 0 0;
}
.olControlNavigationHistoryPreviousItemInactive {
background-position: 0 -24px;
}
.olControlNavigationHistoryNextItemActive {
background-position: -24px 0;
}
.olControlNavigationHistoryNextItemInactive {
background-position: -24px -24px;
}
div.olControlSaveFeaturesItemActive {
background-image: url(img/save_features_on.png);
background-repeat: no-repeat;
background-position: 0 1px;
}
div.olControlSaveFeaturesItemInactive {
background-image: url(img/save_features_off.png);
background-repeat: no-repeat;
background-position: 0 1px;
}
.olHandlerBoxZoomBox {
border: 2px solid red;
position: absolute;
background-color: white;
opacity: 0.50;
font-size: 1px;
filter: alpha(opacity=50);
}
.olHandlerBoxSelectFeature {
border: 2px solid blue;
position: absolute;
background-color: white;
opacity: 0.50;
font-size: 1px;
filter: alpha(opacity=50);
}
.olControlPanPanel {
top: 10px;
left: 5px;
}
.olControlPanPanel div {
background-image: url(img/pan-panel.png);
height: 18px;
width: 18px;
cursor: pointer;
position: absolute;
}
.olControlPanPanel .olControlPanNorthItemInactive {
top: 0;
left: 9px;
background-position: 0 0;
}
.olControlPanPanel .olControlPanSouthItemInactive {
top: 36px;
left: 9px;
background-position: 18px 0;
}
.olControlPanPanel .olControlPanWestItemInactive {
position: absolute;
top: 18px;
left: 0;
background-position: 0 18px;
}
.olControlPanPanel .olControlPanEastItemInactive {
top: 18px;
left: 18px;
background-position: 18px 18px;
}
.olControlZoomPanel {
top: 71px;
left: 14px;
}
.olControlZoomPanel div {
background-image: url(img/zoom-panel.png);
position: absolute;
height: 18px;
width: 18px;
cursor: pointer;
}
.olControlZoomPanel .olControlZoomInItemInactive {
top: 0;
left: 0;
background-position: 0 0;
}
.olControlZoomPanel .olControlZoomToMaxExtentItemInactive {
top: 18px;
left: 0;
background-position: 0 -18px;
}
.olControlZoomPanel .olControlZoomOutItemInactive {
top: 36px;
left: 0;
background-position: 0 18px;
}
/*
* When a potential text is bigger than the image it move the image
* with some headers (closes #3154)
*/
.olControlPanZoomBar div {
font-size: 1px;
}
.olPopupCloseBox {
background: url("img/close.gif") no-repeat;
cursor: pointer;
}
.olFramedCloudPopupContent {
padding: 5px;
overflow: auto;
}
.olControlNoSelect {
-moz-user-select: none;
-khtml-user-select: none;
}
.olImageLoadError {
background-color: pink;
opacity: 0.5;
filter: alpha(opacity=50); /* IE */
}
/**
* Cursor styles
*/
.olCursorWait {
cursor: wait;
}
.olDragDown {
cursor: move;
}
.olDrawBox {
cursor: crosshair;
}
.olControlDragFeatureOver {
cursor: move;
}
.olControlDragFeatureActive.olControlDragFeatureOver.olDragDown {
cursor: -moz-grabbing;
}
/**
* Layer switcher
*/
.olControlLayerSwitcher {
position: absolute;
top: 25px;
right: 0;
width: 20em;
font-family: sans-serif;
font-weight: bold;
margin-top: 3px;
margin-left: 3px;
margin-bottom: 3px;
font-size: smaller;
color: white;
background-color: transparent;
}
.olControlLayerSwitcher .layersDiv {
padding-top: 5px;
padding-left: 10px;
padding-bottom: 5px;
padding-right: 10px;
background-color: darkblue;
}
.olControlLayerSwitcher .layersDiv .baseLbl,
.olControlLayerSwitcher .layersDiv .dataLbl {
margin-top: 3px;
margin-left: 3px;
margin-bottom: 3px;
}
.olControlLayerSwitcher .layersDiv .baseLayersDiv,
.olControlLayerSwitcher .layersDiv .dataLayersDiv {
padding-left: 10px;
}
.olControlLayerSwitcher .maximizeDiv,
.olControlLayerSwitcher .minimizeDiv {
width: 18px;
height: 18px;
top: 5px;
right: 0;
cursor: pointer;
}
.olBingAttribution {
color: #DDD;
}
.olBingAttribution.road {
color: #333;
}
.olGoogleAttribution.hybrid, .olGoogleAttribution.satellite {
color: #EEE;
}
.olGoogleAttribution {
color: #333;
}
span.olGoogleAttribution a {
color: #77C;
}
span.olGoogleAttribution.hybrid a, span.olGoogleAttribution.satellite a {
color: #EEE;
}
/**
* Editing and navigation icons.
* (using the editing_tool_bar.png sprint image)
*/
.olControlNavToolbar ,
.olControlEditingToolbar {
margin: 5px 5px 0 0;
}
.olControlNavToolbar div,
.olControlEditingToolbar div {
background-image: url("img/editing_tool_bar.png");
background-repeat: no-repeat;
margin: 0 0 5px 5px;
width: 24px;
height: 22px;
cursor: pointer
}
/* positions */
.olControlEditingToolbar {
right: 0;
top: 0;
}
.olControlNavToolbar {
top: 295px;
left: 9px;
}
/* layouts */
.olControlEditingToolbar div {
float: right;
}
/* individual controls */
.olControlNavToolbar .olControlNavigationItemInactive,
.olControlEditingToolbar .olControlNavigationItemInactive {
background-position: -103px -1px;
}
.olControlNavToolbar .olControlNavigationItemActive ,
.olControlEditingToolbar .olControlNavigationItemActive {
background-position: -103px -24px;
}
.olControlNavToolbar .olControlZoomBoxItemInactive,
.olControlEditingToolbar .olControlZoomBoxItemInactive {
background-position: -128px -1px;
}
.olControlNavToolbar .olControlZoomBoxItemActive,
.olControlEditingToolbar .olControlZoomBoxItemActive {
background-position: -128px -24px;
}
.olControlEditingToolbar .olControlDrawFeaturePointItemInactive {
background-position: -77px -1px;
}
.olControlEditingToolbar .olControlDrawFeaturePointItemActive {
background-position: -77px -24px;
}
.olControlEditingToolbar .olControlDrawFeaturePathItemInactive {
background-position: -51px -1px;
}
.olControlEditingToolbar .olControlDrawFeaturePathItemActive {
background-position: -51px -24px;
}
.olControlEditingToolbar .olControlDrawFeaturePolygonItemInactive{
background-position: -26px -1px;
}
.olControlEditingToolbar .olControlDrawFeaturePolygonItemActive {
background-position: -26px -24px;
}
div.olControlZoom, div.olControlTextButtonPanel {
position: absolute;
top: 8px;
left: 8px;
background: rgba(255,255,255,0.4);
border-radius: 4px;
padding: 2px;
}
div.olControlZoom a {
font-size: 18px;
line-height: 19px;
height: 22px;
width:22px;
padding: 0;
}
div.olControlZoom a, div.olControlTextButtonPanel .olButton {
display: block;
margin: 1px;
color: white;
font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration: none;
text-align: center;
background: #130085; /* fallback for IE - IE6 requires background shorthand*/
background: rgba(0, 60, 136, 0.5);
filter: alpha(opacity=80);
}
div.olControlZoom a:hover, div.olControlTextButtonPanel .olButton:hover {
background: #130085; /* fallback for IE */
background: rgba(0, 60, 136, 0.7);
filter: alpha(opacity=100);
}
@media only screen and (max-width: 600px) {
div.olControlZoom a:hover, div.olControlTextButtonPanel .olButton:hover {
background: rgba(0, 60, 136, 0.5);
}
}
a.olControlZoomIn {
border-radius: 4px 4px 0 0;
}
a.olControlZoomOut {
border-radius: 0 0 4px 4px;
}
/**
* TextButtonPanel
*/
div.olControlTextButtonPanel .olButton {
float: left;
padding: 4px;
}
div.olControlTextButtonPanel.vertical .olButton {
float: none;
}
div.olControlTextButtonPanel .olButton:first-child {
border-radius: 4px 0 0 4px;
}
div.olControlTextButtonPanel .olButton:last-child {
border-radius: 0 4px 4px 0;
}
div.olControlTextButtonPanel.vertical .olButton:first-child {
border-radius: 4px 4px 0 0
}
div.olControlTextButtonPanel.vertical .olButton:last-child {
border-radius: 0 0 4px 4px;
}
/**
* Animations
*/
.olLayerGrid .olTileImage {
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
-o-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}
/* Turn on GPU support where available */
.olTileImage {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-o-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
}
/* when replacing tiles, do not show tile and backbuffer at the same time */
.olTileReplacing {
display: none;
}
/* override any max-width image settings (e.g. bootstrap.css) */
img.olTileImage {
max-width: none;
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>OpenLayers & GML</title>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<style>
body {
margin: 0em 0em;
}
#map {
width: 960px;
height: 500px;
border: 1px solid #ccc;
}
</style>
<script type="text/javascript">
var lon = 5;
var lat = 40;
var zoom = 5;
var map, layer;
function init(){
map = new OpenLayers.Map('map');
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
map.addLayer(layer);
map.zoomToExtent(new OpenLayers.Bounds(-3.922119,44.335327,4.866943,49.553833));
map.addLayer( new OpenLayers.Layer.Vector("GML", {
protocol: new OpenLayers.Protocol.HTTP({
url: "polygon.xml",
format: new OpenLayers.Format.GML()
}),
strategies: [new OpenLayers.Strategy.Fixed()]
}));
}
</script>
</head>
<body onload="init()">
<div id="map"></div>
</body>
</html>
Raw
index.orig.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>OpenLayers GML Layer Example</title>
<link rel="stylesheet" href="default.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">
var lon = 5;
var lat = 40;
var zoom = 5;
var map, layer;
function init(){
map = new OpenLayers.Map('map');
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
map.addLayer(layer);
map.zoomToExtent(new OpenLayers.Bounds(-3.922119,44.335327,4.866943,49.553833));
map.addLayer(new OpenLayers.Layer.Vector("GML", {
protocol: new OpenLayers.Protocol.HTTP({
url: "polygon.xml",
format: new OpenLayers.Format.GML()
}),
strategies: [new OpenLayers.Strategy.Fixed()]
}));
}
</script>
</head>
<body onload="init()">
<h1 id="title">GML Layer Example</h1>
<div id="tags">
GML
</div>
<p id="shortdesc">
Loads locally stored GML vector data on a basemap. Includes GML example file.
</p>
<div id="map" class="smallmap"></div>
<div id="docs"></div>
</body>
</html>
Raw
orig.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>OpenLayers GML Layer Example</title>
<link rel="stylesheet" href="default.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">
var lon = 5;
var lat = 40;
var zoom = 5;
var map, layer;
function init(){
map = new OpenLayers.Map('map');
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
map.addLayer(layer);
map.zoomToExtent(new OpenLayers.Bounds(-3.922119,44.335327,4.866943,49.553833));
map.addLayer(new OpenLayers.Layer.Vector("GML", {
protocol: new OpenLayers.Protocol.HTTP({
url: "polygon.xml",
format: new OpenLayers.Format.GML()
}),
strategies: [new OpenLayers.Strategy.Fixed()]
}));
}
</script>
</head>
<body onload="init()">
<h1 id="title">GML Layer Example</h1>
<div id="tags">
GML
</div>
<p id="shortdesc">
Loads locally stored GML vector data on a basemap. Includes GML example file.
</p>
<div id="map" class="smallmap"></div>
<div id="docs"></div>
</body>
</html>
Raw
polygon.xml
<?xml version="1.0" encoding="ISO-8859-1"?>
<wfs:FeatureCollection xmlns:ms="http://mapserver.gis.umn.edu/mapserver" xmlns:wfs="http://www.opengis.net/wfs" xmlns:gml="http://www.opengis.net/gml" xmlns:ogc="http://www.opengis.net/ogc" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/WFS-basic.xsd http://mapserver.gis.umn.edu/mapserver http://aneto.oco/cgi-bin/worldwfs?SERVICE=WFS&amp;VERSION=1.0.0&amp;REQUEST=DescribeFeatureType&amp;TYPENAME=polygon&amp;OUTPUTFORMAT=XMLSCHEMA">
<gml:boundedBy>
<gml:Box srsName="EPSG:4326">
<gml:coordinates>-0.768746,47.003018 3.002191,47.925567</gml:coordinates>
</gml:Box>
</gml:boundedBy>
<gml:featureMember>
<ms:polygon fid="1">
<gml:boundedBy>
<gml:Box srsName="EPSG:4326">
<gml:coordinates>-0.768746,47.003018 0.532597,47.925567</gml:coordinates>
</gml:Box>
</gml:boundedBy>
<ms:msGeometry>
<gml:MultiPolygon srsName="EPSG:4326">
<gml:polygonMember>
<gml:Polygon>
<gml:outerBoundaryIs>
<gml:LinearRing>
<gml:coordinates>-0.318987,47.003018 -0.768746,47.358268 -0.574463,47.684285 -0.347374,47.854602 -0.006740,47.925567 0.135191,47.726864 0.149384,47.599127 0.419052,47.670092 0.532597,47.428810 0.305508,47.443003 0.475824,47.144948 0.064225,47.201721 -0.318987,47.003018 </gml:coordinates>
</gml:LinearRing>
</gml:outerBoundaryIs>
<gml:innerBoundaryIs>
<gml:LinearRing>
<gml:coordinates>-0.035126,47.485582 -0.035126,47.485582 -0.049319,47.641706 -0.233829,47.655899 -0.375760,47.457196 -0.276408,47.286879 -0.035126,47.485582 </gml:coordinates>
</gml:LinearRing>
</gml:innerBoundaryIs>
</gml:Polygon>
</gml:polygonMember>
</gml:MultiPolygon>
</ms:msGeometry>
<ms:ogc_fid>1</ms:ogc_fid>
<ms:name>My Polygon with hole</ms:name>
<ms:id>0</ms:id>
</ms:polygon>
</gml:featureMember>
<gml:featureMember>
<ms:polygon fid="2">
<gml:boundedBy>
<gml:Box srsName="EPSG:4326">
<gml:coordinates>1.511919,47.088176 3.002191,47.882988</gml:coordinates>
</gml:Box>
</gml:boundedBy>
<ms:msGeometry>
<gml:Polygon srsName="EPSG:4326">
<gml:outerBoundaryIs>
<gml:LinearRing>
<gml:coordinates>1.625463,47.357844 1.511919,47.741057 1.880938,47.882988 2.420275,47.797830 2.789295,47.485582 3.002191,47.457196 2.874453,47.088176 2.178993,47.343651 1.625463,47.357844 </gml:coordinates>
</gml:LinearRing>
</gml:outerBoundaryIs>
</gml:Polygon>
</ms:msGeometry>
<ms:ogc_fid>2</ms:ogc_fid>
<ms:name>My simple Polygon</ms:name>
<ms:id>0</ms:id>
</ms:polygon>
</gml:featureMember>
<gml:featureMember>
<ms:polygon fid="3">
<gml:boundedBy>
<gml:Box srsName="EPSG:4326">
<gml:coordinates>0.000000,45.000000 2.000000,47.000000</gml:coordinates>
</gml:Box>
</gml:boundedBy>
<ms:msGeometry>
<gml:MultiPolygon srsName="EPSG:4326">
<gml:polygonMember>
<gml:Polygon>
<gml:outerBoundaryIs>
<gml:LinearRing>
<gml:coordinates>0.000000,45.000000 2.000000,45.000000 2.000000,47.000000 0.000000,47.000000 0.000000,45.000000 </gml:coordinates>
</gml:LinearRing>
</gml:outerBoundaryIs>
<gml:innerBoundaryIs>
<gml:LinearRing>
<gml:coordinates>0.500000,45.500000 1.500000,45.500000 1.500000,46.500000 0.500000,46.500000 0.500000,45.500000 </gml:coordinates>
</gml:LinearRing>
</gml:innerBoundaryIs>
</gml:Polygon>
</gml:polygonMember>
</gml:MultiPolygon>
</ms:msGeometry>
<ms:ogc_fid>3</ms:ogc_fid>
<ms:name>my polygon with hole</ms:name>
<ms:id>3</ms:id>
</ms:polygon>
</gml:featureMember>
</wfs:FeatureCollection>
Raw
style.css
/**
* CSS Reset
* From Blueprint reset.css
* http://blueprintcss.googlecode.com
*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
body {line-height:1.5;}
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;}
table, td, th {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}
a img {border:none;}
/**
* Basic Typography
*/
body {
font-family: "Lucida Grande", Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
font-size: 80%;
color: #222;
background: #fff;
margin: 1em 1.5em;
}
pre, code {
margin: 1.5em 0;
white-space: pre;
}
pre, code {
font: 1em 'andale mono', 'lucida console', monospace;
line-height:1.5;
}
a[href] {
color: #436976;
background-color: transparent;
}
h1, h2, h3, h4, h5, h6 {
color: #003a6b;
background-color: transparent;
font: 100% 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
margin: 0;
padding-top: 0.5em;
}
h1 {
font-size: 130%;
margin-bottom: 0.5em;
border-bottom: 1px solid #fcb100;
}
h2 {
font-size: 120%;
margin-bottom: 0.5em;
border-bottom: 1px solid #aaa;
}
h3 {
font-size: 110%;
margin-bottom: 0.5em;
text-decoration: underline;
}
h4 {
font-size: 100%;
font-weight: bold;
}
h5 {
font-size: 100%;
font-weight: bold;
}
h6 {
font-size: 80%;
font-weight: bold;
}
.olControlAttribution {
bottom: 5px;
}
/**
* Map Examples Specific
*/
.smallmap {
width: 512px;
height: 256px;
border: 1px solid #ccc;
}
#tags {
display: none;
}
#docs p {
margin-bottom: 0.5em;
}
/* mobile specific */
@media only screen and (max-width: 600px) {
body {
height : 100%;
margin : 0;
padding : 0;
width : 100%;
}
#map {
background : #7391ad;
width : 100%;
}
#map {
border : 0;
height : 250px;
}
#title {
font-size : 1.3em;
line-height : 2em;
text-indent : 1em;
margin : 0;
padding : 0;
}
#docs {
bottom : 0;
padding : 1em;
}
#shortdesc {
color : #aaa;
font-size : 0.8em;
padding : 1em;
text-align : right;
}
#tags {
display : none;
}
}
@media only screen and (orientation: landscape) and (max-width: 600px) {
#shortdesc {
float: right;
width: 25%;
}
#map {
width: 70%;
}
#docs {
font-size: 12px;
}
}
body {
-webkit-text-size-adjust: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment