Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>An OpenLayers map inside a Dojo container:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;link href='//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dijit/themes/claro/claro.css' rel='stylesheet' type='text/css' /&gt; &lt;script src='//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js'&gt;&lt;/script&gt; &lt;script src='//cdnjs.cloudflare.com/ajax/libs/openlayers/2.12/OpenLayers.js'&gt;&lt;/script&gt; &lt;style type='text/css'&gt; html,body,#border,#map { margin:0; width:100%; height:100%; } &lt;/style&gt; &lt;/head&gt; &lt;body class='claro'&gt; &lt;div id='border' data-dojo-type='dijit/layout/BorderContainer'&gt; &lt;div data-dojo-type='dijit/layout/ContentPane' data-dojo-props='region:"center"'&gt; &lt;div id='map'&gt;&lt;/div&gt; &lt;/div&gt; &lt;div data-dojo-type='dijit/layout/ContentPane' data-dojo-props='region:"trailing"'&gt; Just an example &lt;/div&gt; &lt;/div&gt; &lt;script type='text/javascript'&gt; require(['dojo/ready', 'dojo/parser'], function (ready, Parser) { ready(function () { Parser.parse().then(function () { var map = new OpenLayers.Map({ div:'map', displayProjection:new OpenLayers.Projection('EPSG:4326'), projection:new OpenLayers.Projection('EPSG:900913') }); map.addLayer( new OpenLayers.Layer.OSM() ); map.setCenter( new OpenLayers.LonLat(0, 0), 2 ); }); }); }); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>The 100% width and height expand everything to fill the viewport. While you do not need to expand to 100%, you do need to set dimensions on these elements.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload