You are here

openlayers-map-array.html in Openlayers 6

File

help/openlayers-map-array.html
View source
The fundamentals of how maps are handled in the OpenLayers module is based on a map array in PHP, that gets pass through hooks and rendered on the server side, then passed to Javascript to be turned into an OpenLayers map on the client side.

<h3>Preset UI</h3>

The Preset UI module creates a interface for the user to create maps without having to write PHP arrays.  It is important to know that not all features of the map array can be controlled in the preset interface.

<h3>Map Array Parts</h3>

<ul>
<li><a href="&topic:openlayers/openlayers-map-array-properties&">Properties</a>: The basic properties for the map.</li>
<li><a href="&topic:openlayers/openlayers-map-array-options&">Options</a>: Map options.</li>
<li><a href="&topic:openlayers/openlayers-map-array-controls&">Controls</a>: Controls available for the map.</li>
<li><a href="&topic:openlayers/openlayers-map-array-layers&">Layers</a>: Adding layers to the map.</li>
<li><a href="&topic:openlayers/openlayers-map-array-features&">Features</a>: Adding features to the map.</li>
<li><a href="&topic:openlayers/openlayers-map-array-behaviors&">Behaviors</a>: Handling behaviors of the map.</li>
<li><a href="&topic:openlayers/openlayers-map-array-events&">Events</a>: Handling events of the map.</li>
<li><a href="&topic:openlayers/openlayers-map-array-styles&">Styles</a>: Feature styles.</li>
</ul>

<h3>Example</h3>

The following example is the default preset provided by the OpenLayers module.

<pre><code>
  $default_map = array(
    'projection' => '4326',
    'width' => 'auto',
    'default_layer' => 'openlayers_default_wms',
    'height' => '300px',
    'center' => array(
      'lat' => '0',
      'lon' => '0',
      'zoom' => '2',
    ),
    'options' => array(
      'displayProjection' => '4326',
    ),
    'controls' => array(
      'LayerSwitcher' => TRUE,
      'Navigation' => TRUE,
      'PanZoomBar' => TRUE,
      'MousePosition' => TRUE,
    ),
  );
</code></pre>