OpenLayers Vector set Z-Index / graphicZIndex / zIndexing / drawing order / vertical order

by HYEONGJINKIM

HTML

<script src="http://dev.openlayers.org/releases/OpenLayers-2.13.1/OpenLayers.js"></script>
<div id="map"></div>

CSS

#map {
    width: 600px;
    height: 480px;
    border: 1px solid blue;
}

JavaScript

var map = new OpenLayers.Map({
    div: 'map',
    maxExtent: new OpenLayers.Bounds(-71.51481628417969,
              42.245801966774025,-70.88790893554686,
              42.603641609996586)
});

map.addLayer(new OpenLayers.Layer.OSM());


var your_context = {
        getColor: function (feature) {
            if (feature.attributes.type == 1) {
                return "yellow";
            } else if (feature.attributes.type== 2) {
                return "blue";
            } else {
                return "red";
            }
        },
    get_z_Index: function (feature) {
            if (feature.attributes.type == 1) {
                return 10;
            } else if (feature.attributes.type== 2) {
                return 100;
            } else {
                return 0;
            }
        }
    };


    var yourStyle = new OpenLayers.Style({
        strokeColor: "${getColor}",
        strokeOpacity: "0.6",
        strokeWidth: 6,
        cursor: "pointer",
        graphicZIndex: "${get_z_Index}"
    }, {
        context: your_context
    });



    var selectStyle = new OpenLayers.Style({
        strokeWidth: 7,
        strokeColor: "red",
    });

    var your_styleMap = new OpenLayers.StyleMap({
        'default': yourStyle,
        'select': selectStyle
    });

    var vector_layer = new OpenLayers.Layer.Vector("Vector Layer", {
        styleMap: your_styleMap
    });



var layer = new OpenLayers.Layer.Vector('Layer', {
    rendererOptions: { zIndexing: true }
    ,
    styleMap: your_styleMap   
});
map.addLayer(layer);

var featurecollection={
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "stroke": "#555555",
        "stroke-width": 2,
        "stroke-opacity": 1,
        "type": 1
      },
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [
            -71.14608764648438,
            42.399248925765995
          ],
          [
           ...