Layer Z-Index

This example uses OpenLayers v4.0.1. The latest is v.

#### Layer Z-Index

Square layer Z-index Triangle layer Z-index

Example of ordering layers using Z-index.

There are are two managed layers (square and triangle) and one unmanaged layer (star). The Z-index determines the rendering order; with {square: 1, triangle: 0, star: unmanaged} indices, the rendering order is triangle, square and star on top.

Related API documentation:

- ol.Feature
,
- ol.Map
,
- ol.View
,
- ol.geom.Point
,
- ol.layer.Vector
,
- ol.source.Vector
,
- ol.style.Fill
,
- ol.style.RegularShape
,
- ol.style.Stroke
,
- ol.style.Style

Copy Edit
Layer Z-Index Example of ordering layers using Z-index. var stroke = new ol.style.Stroke({color: 'black', width: 1}); var styles = { 'square': new ol.style.Style({ image: new ol.style.RegularShape({ fill: new ol.style.Fill({color: 'blue'}), stroke: stroke, points: 4, radius: 80, angle: Math.PI / 4 }) }), 'triangle': new ol.style.Style({ image: new ol.style.RegularShape({ fill: new ol.style.Fill({color: 'red'}), stroke: stroke, points: 3, radius: 80, rotation: Math.PI / 4, angle: 0 }) }), 'star': new ol.style.Style({ image: new ol.style.RegularShape({ fill: new ol.style.Fill({color: 'green'}), stroke: stroke, points: 5, radius: 80, radius2: 4, angle: 0 }) }) }; function createLayer(coordinates, style, zIndex) { var feature = new ol.Feature(new ol.geom.Point(coordinates)); feature.setStyle(style); var source = new ol.source.Vector({ features: [feature] }); var vectorLayer = new ol.layer.Vector({ source: source }); vectorLayer.setZIndex(zIndex); return vectorLayer; } var layer0 = createLayer([40, 40], styles['star'], 0); var layer1 = createLayer([0, 0], styles['square'], 1); var layer2 = createLayer([0, 40], styles['triangle'], 0); var layers = []; layers.push(layer1); layers.push(layer2); var map = new ol.Map({ layers: layers, target: 'map', view: new ol.View({ center: [0, 0], zoom: 18 }) }); layer0.setMap(map); function bindInputs(id, layer) { var idxInput = document.getElementById('idx' + id); idxInput.onchange = function() { layer.setZIndex(parseInt(this.value, 10) || 0); }; idxInput.value = String(layer.getZIndex()); } bindInputs(1, layer1); bindInputs(2, layer2); <div id="map" class="map"></div> <div> <label for="idx1"> <input type="number" id="idx1"></input> Square layer Z-index </label></br> <label for="idx2"> <input type="number" id="idx2"></input> Triangle layer Z-index </label> </div>

    <!DOCTYPE html>
    <html>
      <head>
        <title>Layer Z-Index</title>
        <link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/css/ol.css" type="text/css">
        <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
        <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
        <script src="https://openlayers.org/en/v4.0.1/build/ol.js"></script>
      </head>
      <body>
        <div id="map" class="map"></div>
        <div>
          <label for="idx1">
            <input type="number" id="idx1"></input>
            Square layer Z-index
          </label></br>

          <label for="idx2">
            <input type="number" id="idx2"></input>
            Triangle layer Z-index
          </label>
        </div>
        <script>
          var stroke = new ol.style.Stroke({color: 'black', width: 1});

          var styles = {
            'square': new ol.style.Style({
              image: new ol.style.RegularShape({
                fill: new ol.style.Fill({color: 'blue'}),
                stroke: stroke,
                points: 4,
                radius: 80,
                angle: Math.PI / 4
              })
            }),
            'triangle': new ol.style.Style({
              image: new ol.style.RegularShape({
                fill: new ol.style.Fill({color: 'red'}),
                stroke: stroke,
                points: 3,
                radius: 80,
                rotation: Math.PI / 4,
                angle: 0
              })
            }),
            'star': new ol.style.Style({
              image: new ol.style.RegularShape({
                fill: new ol.style.Fill({color: 'green'}),
                stroke: stroke,
                points: 5,
                radius: 80,
                radius2: 4,
                angle: 0
              })
            })
          };

          function createLayer(coordinates, style, zIndex) {
            var feature = new ol.Feature(new ol.geom.Point(coordinates));
            feature.setStyle(style);

            var source = new ol.source.Vector({
              features: [feature]
            });

            var vectorLayer = new ol.layer.Vector({
              source: source
            });
            vectorLayer.setZIndex(zIndex);

            return vectorLayer;
          }

          var layer0 = createLayer([40, 40], styles['star'], 0);
          var layer1 = createLayer([0, 0], styles['square'], 1);
          var layer2 = createLayer([0, 40], styles['triangle'], 0);

          var layers = [];
          layers.push(layer1);
          layers.push(layer2);

          var map = new ol.Map({
            layers: layers,
            target: 'map',
            view: new ol.View({
              center: [0, 0],
              zoom: 18
            })
          });

          layer0.setMap(map);

          function bindInputs(id, layer) {
            var idxInput = document.getElementById('idx' + id);
            idxInput.onchange = function() {
              layer.setZIndex(parseInt(this.value, 10) || 0);
            };
            idxInput.value = String(layer.getZIndex());
          }
          bindInputs(1, layer1);
          bindInputs(2, layer2);
        </script>
      </body>
    </html>