Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.mobile.css" type="text/css">
<script src="http://openlayers.org/dev/OpenLayers.mobile.js"></script>
​
</head>
    <body>
        <h1 id="title">Basic Mobile Example</h1>
        <div id="tags">
            mobile
        </div>
        <p id="shortdesc">
            A basic full-screen map for mobile devices.
        </p>
        <div id="map"></div>
        <script>
            init();
        </script>
    </body>
</html>
​
 
            html, body {
                margin  : 0;
                padding : 0;
                height  : 100%;
                width   : 100%;
            }
            @media only screen and (max-width: 600px) {
                html, body {
                    height  : 117%;
                }
            }
            #map {
                width    : 100%;
                position : relative;
                height   : 100%;
            }
            .olControlAttribution {
                position      : absolute;
                font-size     : 10px;
                bottom        : 0 !important;
                right         : 0 !important;
                background    : rgba(0,0,0,0.1);
                font-family   : Arial;
                padding       : 2px 4px;
                border-radius : 5px 0 0 0;
            }
            #title, #tags, #shortdesc {
                display: none;
            }
 
// initialize map when page ready
var map;
​
var init = function () {
    // create map
    map = new OpenLayers.Map({
        div: "map",
        theme: null,
        controls: [
            new OpenLayers.Control.Attribution(),
            new OpenLayers.Control.TouchNavigation({
                dragPanOptions: {
                    enableKinetic: true
                }
            }),
            new OpenLayers.Control.Zoom()
        ],
        layers: [
            new OpenLayers.Layer.OSM("OpenStreetMap", null, {
                transitionEffect: 'resize'
            })
        ],
        center: new OpenLayers.LonLat(742000, 5861000),
        zoom: 3
    });
};
​
init();
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers