lespetitshackers:ffox:carteopenlayers
Différences
Ci-dessous, les différences entre deux révisions de la page.
Prochaine révision | Révision précédente | ||
lespetitshackers:ffox:carteopenlayers [2013/06/22 14:33] – créée christian.jacolot | lespetitshackers:ffox:carteopenlayers [2024/04/16 22:26] (Version actuelle) – modification externe 127.0.0.1 | ||
---|---|---|---|
Ligne 1: | Ligne 1: | ||
+ | ====== Exemple Carte GPS avec OpenLayers - Firefox OS ====== | ||
+ | |||
+ | ===== Création de l' | ||
+ | |||
+ | Créer un dossier //gps// qui contiendra tout les scripts de votre application. | ||
+ | |||
+ | Fichier index.html : | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <meta http-equiv=" | ||
+ | <meta name=" | ||
+ | <meta name=" | ||
+ | < | ||
+ | |||
+ | <link rel=" | ||
+ | < | ||
+ | .olControlAttribution { | ||
+ | bottom: 3px; | ||
+ | } | ||
+ | </ | ||
+ | </ | ||
+ | < | ||
+ | <h1 id=" | ||
+ | |||
+ | <div id=" | ||
+ | geolocation, | ||
+ | </ | ||
+ | |||
+ | <p id=" | ||
+ | Track current position and display it with its accuracy. | ||
+ | </p> | ||
+ | |||
+ | <div id=" | ||
+ | <button id=" | ||
+ | <input type=" | ||
+ | <label for=" | ||
+ | < | ||
+ | <p> | ||
+ | View the <a href=" | ||
+ | to see how this is done. | ||
+ | </p> | ||
+ | </ | ||
+ | <!-- script src=" | ||
+ | <!-- script src=" | ||
+ | <script type=" | ||
+ | </ | ||
+ | <script type=" | ||
+ | |||
+ | var style = { | ||
+ | fillColor: '# | ||
+ | fillOpacity: | ||
+ | strokeWidth: | ||
+ | }; | ||
+ | |||
+ | var map = new OpenLayers.Map(' | ||
+ | var layer = new OpenLayers.Layer.OSM( " | ||
+ | var vector = new OpenLayers.Layer.Vector(' | ||
+ | map.addLayers([layer, | ||
+ | |||
+ | map.setCenter( | ||
+ | new OpenLayers.LonLat(-4.467257, | ||
+ | new OpenLayers.Projection(" | ||
+ | map.getProjectionObject() | ||
+ | ), 12 | ||
+ | ); | ||
+ | |||
+ | var pulsate = function(feature) { | ||
+ | var point = feature.geometry.getCentroid(), | ||
+ | bounds = feature.geometry.getBounds(), | ||
+ | radius = Math.abs((bounds.right - bounds.left)/ | ||
+ | count = 0, | ||
+ | grow = ' | ||
+ | |||
+ | var resize = function(){ | ||
+ | if (count> | ||
+ | clearInterval(window.resizeInterval); | ||
+ | } | ||
+ | var interval = radius * 0.03; | ||
+ | var ratio = interval/ | ||
+ | switch(count) { | ||
+ | case 4: | ||
+ | case 12: | ||
+ | grow = ' | ||
+ | case 8: | ||
+ | grow = ' | ||
+ | } | ||
+ | if (grow!==' | ||
+ | ratio = - Math.abs(ratio); | ||
+ | } | ||
+ | feature.geometry.resize(1+ratio, | ||
+ | vector.drawFeature(feature); | ||
+ | count++; | ||
+ | }; | ||
+ | window.resizeInterval = window.setInterval(resize, | ||
+ | }; | ||
+ | |||
+ | var geolocate = new OpenLayers.Control.Geolocate({ | ||
+ | bind: false, | ||
+ | geolocationOptions: | ||
+ | enableHighAccuracy: | ||
+ | maximumAge: 0, | ||
+ | timeout: 7000 | ||
+ | } | ||
+ | }); | ||
+ | map.addControl(geolocate); | ||
+ | var firstGeolocation = true; | ||
+ | geolocate.events.register(" | ||
+ | vector.removeAllFeatures(); | ||
+ | var circle = new OpenLayers.Feature.Vector( | ||
+ | OpenLayers.Geometry.Polygon.createRegularPolygon( | ||
+ | new OpenLayers.Geometry.Point(e.point.x, | ||
+ | e.position.coords.accuracy/ | ||
+ | 40, | ||
+ | 0 | ||
+ | ), | ||
+ | {}, | ||
+ | style | ||
+ | ); | ||
+ | vector.addFeatures([ | ||
+ | new OpenLayers.Feature.Vector( | ||
+ | e.point, | ||
+ | {}, | ||
+ | { | ||
+ | graphicName: | ||
+ | strokeColor: | ||
+ | strokeWidth: | ||
+ | fillOpacity: | ||
+ | pointRadius: | ||
+ | } | ||
+ | ), | ||
+ | circle | ||
+ | ]); | ||
+ | if (firstGeolocation) { | ||
+ | map.zoomToExtent(vector.getDataExtent()); | ||
+ | pulsate(circle); | ||
+ | firstGeolocation = false; | ||
+ | this.bind = true; | ||
+ | } | ||
+ | }); | ||
+ | geolocate.events.register(" | ||
+ | OpenLayers.Console.log(' | ||
+ | }); | ||
+ | document.getElementById(' | ||
+ | vector.removeAllFeatures(); | ||
+ | geolocate.deactivate(); | ||
+ | document.getElementById(' | ||
+ | geolocate.watch = false; | ||
+ | firstGeolocation = true; | ||
+ | geolocate.activate(); | ||
+ | }; | ||
+ | document.getElementById(' | ||
+ | vector.removeAllFeatures(); | ||
+ | geolocate.deactivate(); | ||
+ | if (this.checked) { | ||
+ | geolocate.watch = true; | ||
+ | firstGeolocation = true; | ||
+ | geolocate.activate(); | ||
+ | } | ||
+ | }; | ||
+ | document.getElementById(' | ||
+ | |||
+ | // ]]> | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | Fichier de l' | ||
+ | {{: | ||
+ | |||
+ | |||
+ | Création d'un fichier manifest.webapp : | ||
+ | < | ||
+ | { | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | { | ||
+ | " | ||
+ | }, | ||
+ | " | ||
+ | { | ||
+ | " | ||
+ | " | ||
+ | }, | ||
+ | " | ||
+ | { | ||
+ | " | ||
+ | { | ||
+ | " | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | ===== Ajout du fichier style ===== | ||
+ | |||
+ | Fichier style.css: | ||
+ | |||
+ | < | ||
+ | div.olMap { | ||
+ | z-index: 0; | ||
+ | padding: 0 !important; | ||
+ | margin: 0 !important; | ||
+ | cursor: default; | ||
+ | } | ||
+ | |||
+ | div.olMapViewport { | ||
+ | text-align: left; | ||
+ | -ms-touch-action: | ||
+ | } | ||
+ | |||
+ | div.olLayerDiv { | ||
+ | | ||
+ | | ||
+ | } | ||
+ | |||
+ | .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 { | ||
+ | | ||
+ | | ||
+ | left: 10px; | ||
+ | | ||
+ | | ||
+ | } | ||
+ | .olControlScaleLineBottom { | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | } | ||
+ | .olControlScaleLineTop { | ||
+ | | ||
+ | | ||
+ | | ||
+ | } | ||
+ | |||
+ | .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: | ||
+ | font-size: smaller; | ||
+ | } | ||
+ | |||
+ | .olControlOverviewMapContainer { | ||
+ | position: absolute; | ||
+ | bottom: 0; | ||
+ | right: 0; | ||
+ | } | ||
+ | |||
+ | .olControlOverviewMapElement { | ||
+ | padding: 10px 18px 10px 10px; | ||
+ | background-color: | ||
+ | -moz-border-radius: | ||
+ | } | ||
+ | |||
+ | .olControlOverviewMapMinimizeButton, | ||
+ | .olControlOverviewMapMaximizeButton { | ||
+ | height: 18px; | ||
+ | width: 18px; | ||
+ | right: 0; | ||
+ | bottom: 80px; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | .olControlOverviewMapExtentRectangle { | ||
+ | overflow: hidden; | ||
+ | background-image: | ||
+ | cursor: move; | ||
+ | border: 2px dotted red; | ||
+ | } | ||
+ | .olControlOverviewMapRectReplacement { | ||
+ | overflow: hidden; | ||
+ | cursor: move; | ||
+ | background-image: | ||
+ | background-repeat: | ||
+ | background-position: | ||
+ | } | ||
+ | |||
+ | .olLayerGeoRSSDescription { | ||
+ | float:left; | ||
+ | width:100%; | ||
+ | overflow: | ||
+ | font-size: | ||
+ | } | ||
+ | .olLayerGeoRSSClose { | ||
+ | float: | ||
+ | color:gray; | ||
+ | font-size: | ||
+ | margin-right: | ||
+ | font-family: | ||
+ | } | ||
+ | .olLayerGeoRSSTitle { | ||
+ | float: | ||
+ | } | ||
+ | |||
+ | .olPopupContent { | ||
+ | padding: | ||
+ | overflow: auto; | ||
+ | } | ||
+ | |||
+ | .olControlNavigationHistory { | ||
+ | | ||
+ | | ||
+ | | ||
+ | | ||
+ | |||
+ | } | ||
+ | .olControlNavigationHistoryPreviousItemActive { | ||
+ | background-position: | ||
+ | } | ||
+ | .olControlNavigationHistoryPreviousItemInactive { | ||
+ | | ||
+ | } | ||
+ | .olControlNavigationHistoryNextItemActive { | ||
+ | | ||
+ | } | ||
+ | .olControlNavigationHistoryNextItemInactive { | ||
+ | | ||
+ | } | ||
+ | |||
+ | div.olControlSaveFeaturesItemActive { | ||
+ | background-image: | ||
+ | background-repeat: | ||
+ | background-position: | ||
+ | } | ||
+ | div.olControlSaveFeaturesItemInactive { | ||
+ | background-image: | ||
+ | background-repeat: | ||
+ | background-position: | ||
+ | } | ||
+ | |||
+ | .olHandlerBoxZoomBox { | ||
+ | border: 2px solid red; | ||
+ | position: absolute; | ||
+ | background-color: | ||
+ | opacity: 0.50; | ||
+ | font-size: 1px; | ||
+ | filter: alpha(opacity=50); | ||
+ | } | ||
+ | .olHandlerBoxSelectFeature { | ||
+ | border: 2px solid blue; | ||
+ | position: absolute; | ||
+ | background-color: | ||
+ | opacity: 0.50; | ||
+ | font-size: 1px; | ||
+ | filter: alpha(opacity=50); | ||
+ | } | ||
+ | |||
+ | .olControlPanPanel { | ||
+ | top: 10px; | ||
+ | left: 5px; | ||
+ | } | ||
+ | |||
+ | .olControlPanPanel div { | ||
+ | background-image: | ||
+ | height: 18px; | ||
+ | width: 18px; | ||
+ | cursor: pointer; | ||
+ | position: absolute; | ||
+ | } | ||
+ | |||
+ | .olControlPanPanel .olControlPanNorthItemInactive { | ||
+ | top: 0; | ||
+ | left: 9px; | ||
+ | background-position: | ||
+ | } | ||
+ | .olControlPanPanel .olControlPanSouthItemInactive { | ||
+ | top: 36px; | ||
+ | left: 9px; | ||
+ | background-position: | ||
+ | } | ||
+ | .olControlPanPanel .olControlPanWestItemInactive { | ||
+ | position: absolute; | ||
+ | top: 18px; | ||
+ | left: 0; | ||
+ | background-position: | ||
+ | } | ||
+ | .olControlPanPanel .olControlPanEastItemInactive { | ||
+ | top: 18px; | ||
+ | left: 18px; | ||
+ | background-position: | ||
+ | } | ||
+ | |||
+ | .olControlZoomPanel { | ||
+ | top: 71px; | ||
+ | left: 14px; | ||
+ | } | ||
+ | |||
+ | .olControlZoomPanel div { | ||
+ | background-image: | ||
+ | position: absolute; | ||
+ | height: 18px; | ||
+ | width: 18px; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | .olControlZoomPanel .olControlZoomInItemInactive { | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | background-position: | ||
+ | } | ||
+ | |||
+ | .olControlZoomPanel .olControlZoomToMaxExtentItemInactive { | ||
+ | top: 18px; | ||
+ | left: 0; | ||
+ | background-position: | ||
+ | } | ||
+ | |||
+ | .olControlZoomPanel .olControlZoomOutItemInactive { | ||
+ | top: 36px; | ||
+ | left: 0; | ||
+ | background-position: | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | * 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(" | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | .olFramedCloudPopupContent { | ||
+ | padding: 5px; | ||
+ | overflow: auto; | ||
+ | } | ||
+ | |||
+ | .olControlNoSelect { | ||
+ | | ||
+ | | ||
+ | } | ||
+ | |||
+ | .olImageLoadError { | ||
+ | background-color: | ||
+ | opacity: 0.5; | ||
+ | filter: alpha(opacity=50); | ||
+ | } | ||
+ | |||
+ | /** | ||
+ | * 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: | ||
+ | font-weight: | ||
+ | margin-top: 3px; | ||
+ | margin-left: | ||
+ | margin-bottom: | ||
+ | font-size: smaller; | ||
+ | color: white; | ||
+ | background-color: | ||
+ | } | ||
+ | |||
+ | .olControlLayerSwitcher .layersDiv { | ||
+ | padding-top: | ||
+ | padding-left: | ||
+ | padding-bottom: | ||
+ | padding-right: | ||
+ | background-color: | ||
+ | } | ||
+ | |||
+ | .olControlLayerSwitcher .layersDiv .baseLbl, | ||
+ | .olControlLayerSwitcher .layersDiv .dataLbl { | ||
+ | margin-top: 3px; | ||
+ | margin-left: | ||
+ | margin-bottom: | ||
+ | } | ||
+ | |||
+ | .olControlLayerSwitcher .layersDiv .baseLayersDiv, | ||
+ | .olControlLayerSwitcher .layersDiv .dataLayersDiv { | ||
+ | padding-left: | ||
+ | } | ||
+ | |||
+ | .olControlLayerSwitcher .maximizeDiv, | ||
+ | .olControlLayerSwitcher .minimizeDiv { | ||
+ | width: 18px; | ||
+ | height: 18px; | ||
+ | top: 5px; | ||
+ | right: 0; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | .olBingAttribution { | ||
+ | color: #DDD; | ||
+ | } | ||
+ | .olBingAttribution.road { | ||
+ | color: #333; | ||
+ | } | ||
+ | |||
+ | .olGoogleAttribution.hybrid, | ||
+ | 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: | ||
+ | background-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: | ||
+ | } | ||
+ | .olControlNavToolbar .olControlNavigationItemActive , | ||
+ | .olControlEditingToolbar .olControlNavigationItemActive | ||
+ | background-position: | ||
+ | } | ||
+ | .olControlNavToolbar .olControlZoomBoxItemInactive { | ||
+ | background-position: | ||
+ | } | ||
+ | .olControlNavToolbar .olControlZoomBoxItemActive | ||
+ | background-position: | ||
+ | } | ||
+ | .olControlEditingToolbar .olControlDrawFeaturePointItemInactive { | ||
+ | background-position: | ||
+ | } | ||
+ | .olControlEditingToolbar .olControlDrawFeaturePointItemActive { | ||
+ | background-position: | ||
+ | } | ||
+ | .olControlEditingToolbar .olControlDrawFeaturePathItemInactive { | ||
+ | background-position: | ||
+ | } | ||
+ | .olControlEditingToolbar .olControlDrawFeaturePathItemActive { | ||
+ | background-position: | ||
+ | } | ||
+ | .olControlEditingToolbar .olControlDrawFeaturePolygonItemInactive{ | ||
+ | background-position: | ||
+ | } | ||
+ | .olControlEditingToolbar .olControlDrawFeaturePolygonItemActive { | ||
+ | background-position: | ||
+ | } | ||
+ | |||
+ | div.olControlZoom { | ||
+ | position: absolute; | ||
+ | top: 8px; | ||
+ | left: 8px; | ||
+ | background: rgba(255, | ||
+ | border-radius: | ||
+ | padding: 2px; | ||
+ | } | ||
+ | div.olControlZoom a { | ||
+ | display: block; | ||
+ | margin: 1px; | ||
+ | padding: 0; | ||
+ | color: white; | ||
+ | font-size: 18px; | ||
+ | font-family: | ||
+ | font-weight: | ||
+ | text-decoration: | ||
+ | text-align: center; | ||
+ | height: 22px; | ||
+ | width:22px; | ||
+ | line-height: | ||
+ | background: #130085; /* fallback for IE - IE6 requires background shorthand*/ | ||
+ | background: rgba(0, 60, 136, 0.5); | ||
+ | filter: alpha(opacity=80); | ||
+ | } | ||
+ | div.olControlZoom a: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 { | ||
+ | background: rgba(0, 60, 136, 0.5); | ||
+ | } | ||
+ | } | ||
+ | a.olControlZoomIn { | ||
+ | border-radius: | ||
+ | } | ||
+ | a.olControlZoomOut { | ||
+ | border-radius: | ||
+ | } | ||
+ | |||
+ | |||
+ | /** | ||
+ | * Animations | ||
+ | */ | ||
+ | |||
+ | .olLayerGrid .olTileImage { | ||
+ | -webkit-transition: | ||
+ | -moz-transition: | ||
+ | -o-transition: | ||
+ | transition: opacity 0.2s linear; | ||
+ | } | ||
+ | |||
+ | /* Turn on GPU support where available */ | ||
+ | .olTileImage { | ||
+ | -webkit-transform: | ||
+ | -moz-transform: | ||
+ | -o-transform: | ||
+ | -ms-transform: | ||
+ | transform: translateZ(0); | ||
+ | -webkit-backface-visibility: | ||
+ | -moz-backface-visibility: | ||
+ | -ms-backface-visibility: | ||
+ | backface-visibility: | ||
+ | -webkit-perspective: | ||
+ | -moz-perspective: | ||
+ | -ms-perspective: | ||
+ | perspective: | ||
+ | } | ||
+ | |||
+ | /* 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; | ||
+ | } | ||
+ | |||
+ | /** | ||
+ | * CSS Reset | ||
+ | * From Blueprint reset.css | ||
+ | * http:// | ||
+ | */ | ||
+ | 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: | ||
+ | body {line-height: | ||
+ | table {border-collapse: | ||
+ | caption, th, td {text-align: | ||
+ | table, td, th {vertical-align: | ||
+ | blockquote: | ||
+ | blockquote, q {quotes:"" | ||
+ | a img {border: | ||
+ | |||
+ | /** | ||
+ | * Basic Typography | ||
+ | */ | ||
+ | body { | ||
+ | font-family: | ||
+ | font-size: 80%; | ||
+ | color: #222; | ||
+ | background: #fff; | ||
+ | margin: 1em 1.5em; | ||
+ | } | ||
+ | pre, code { | ||
+ | margin: 1.5em 0; | ||
+ | white-space: | ||
+ | } | ||
+ | pre, code { | ||
+ | font: 1em ' | ||
+ | line-height: | ||
+ | } | ||
+ | a[href] { | ||
+ | color: #436976; | ||
+ | background-color: | ||
+ | } | ||
+ | h1, h2, h3, h4, h5, h6 { | ||
+ | color: #003a6b; | ||
+ | background-color: | ||
+ | font: 100% ' | ||
+ | margin: 0; | ||
+ | padding-top: | ||
+ | } | ||
+ | h1 { | ||
+ | font-size: 130%; | ||
+ | margin-bottom: | ||
+ | border-bottom: | ||
+ | } | ||
+ | h2 { | ||
+ | font-size: 120%; | ||
+ | margin-bottom: | ||
+ | border-bottom: | ||
+ | } | ||
+ | h3 { | ||
+ | font-size: 110%; | ||
+ | margin-bottom: | ||
+ | text-decoration: | ||
+ | } | ||
+ | h4 { | ||
+ | font-size: 100%; | ||
+ | font-weight: | ||
+ | } | ||
+ | h5 { | ||
+ | font-size: 100%; | ||
+ | font-weight: | ||
+ | } | ||
+ | h6 { | ||
+ | font-size: 80%; | ||
+ | font-weight: | ||
+ | } | ||
+ | |||
+ | .olControlAttribution { | ||
+ | bottom: 5px; | ||
+ | } | ||
+ | |||
+ | /** | ||
+ | * Map Examples Specific | ||
+ | */ | ||
+ | .smallmap { | ||
+ | width: 512px; | ||
+ | height: 256px; | ||
+ | border: 1px solid #ccc; | ||
+ | } | ||
+ | #tags { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | #docs p { | ||
+ | margin-bottom: | ||
+ | } | ||
+ | /* mobile specific */ | ||
+ | @media only screen and (max-width: 600px) { | ||
+ | body { | ||
+ | height | ||
+ | margin | ||
+ | padding | ||
+ | width : 100%; | ||
+ | } | ||
+ | #map { | ||
+ | background : #7391ad; | ||
+ | width : 100%; | ||
+ | } | ||
+ | #map { | ||
+ | border : 0; | ||
+ | height : 250px; | ||
+ | } | ||
+ | #title { | ||
+ | font-size | ||
+ | line-height : 2em; | ||
+ | text-indent : 1em; | ||
+ | margin | ||
+ | padding | ||
+ | } | ||
+ | #docs { | ||
+ | bottom | ||
+ | padding | ||
+ | } | ||
+ | #shortdesc { | ||
+ | color : #aaa; | ||
+ | font-size | ||
+ | padding | ||
+ | text-align : right; | ||
+ | } | ||
+ | #tags { | ||
+ | display : none; | ||
+ | } | ||
+ | } | ||
+ | @media only screen and (orientation: | ||
+ | #shortdesc { | ||
+ | | ||
+ | | ||
+ | } | ||
+ | #map { | ||
+ | width: 70%; | ||
+ | } | ||
+ | #docs { | ||
+ | font-size: 12px; | ||
+ | } | ||
+ | } | ||
+ | body { | ||
+ | -webkit-text-size-adjust: | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | |||