0

I initially asked this question in SO but thought it might be more relevant here since I'm using geoJSON.

I have a geoJSON file with a couple of thousand records that I want grouped and presented on a webpage. I tried using this plugin to create a summary table of the data: http://afshinm.github.io/Json-to-HTML-Table/

Here is the HTML:

    <!DOCTYPE html>
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Mountain View Residential Garbage - Tuesday</title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.css" type="text/css" crossorigin="">
      <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.js" crossorigin=""></script>
      <script src="ResGarbThursLines.js"></script>
      <script src="json-to-table.js"></script>
      <link rel="stylesheet" href="style6.css" type="text/css">

        <script type="text/javascript">

  function loadJSON(path, success, error){
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){ //should partheses be closed here?
      if (xhr.readyState === XMLHttpRequest.DONE) {
        if (xhr.status === 200) {
          if (success)
             success(JSON.parse(xhr.responseText));
          } else {
              if (error)
                error(xhr);
          }
      }
};

    xhr.open("GET", path, true);

    xhr.send();

}
          var map;
          var routeNum = new Array();
          var routeSummary = new Array();

          function init() {


          loadJSON('ResGarbThursLines.geojson', function(data) { 
            var joinToTable = ConvertJsonToTable(data, 'jsonTable');
            console.log(typeof data); 
          },
          function(xhr) { console.error(xhr); 
          }

          );

          // create map and set center and zoom level
          map = new L.map('mapid');
          map.setView([37.393807,-122.068598],14);

             // Add the tiled layer       
            var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: "Data copyright OpenStreetMap contributors"});
            tiles.addTo(map);

          var resGarbThursLayer;
          var selection
          var selectedLayer

          function thursStyle(feature){
            for (r in routeNum) {
              //console.log (routeNum[r]);
            }
            switch (feature.properties.Route){
              case '01X':
                return {
                    "color": "red",
                    "weight": 5,
                    "opacity": 0.65
                    };
                  break;
              case '02X':
                return {
                    "color": "blue",
                    "weight": 5,
                    "opacity": 0.65
                    };
                  break;
            case '03X':
                return {
                    "color": "green",
                    "weight": 5,
                    "opacity": 0.65
                    };
                  break;
              case '04X':
              return {
                    "color": "purple",
                    "weight": 5,
                    "opacity": 0.65
                    };
                  break;
              case '05X':
              return {
                    "color": "orange",
                    "weight": 5,
                    "opacity": 0.65
                    };
                }
            }

          function thursSelectedStyle(feature){
            return {
            "color": "#00FFFF",
            "weight": 9,
            "opacity": 0.95
          };
        }

          // handle click events on pantry features
          function thursOnEachFeature(feature, layer){
       // create an array for all route numbers
             routeNum.push(feature.properties.Route);
            layer.on({
              click: function(e) {
                  if (selection) {
                    resetStyles();
                  }
                  e.target.setStyle(thursSelectedStyle());
                  selection = e.target;
                  selectedLayer = resGarbThursLayer;

                  // Insert some HTML with the feature name
                  buildSummaryLabel(feature);

                  L.DomEvent.stopPropagation(e); // stop click event from being propagated further
                }
            });
          }

          // add the gardens GeoJSON layer using the pantriesData variable from pantries.js
                resGarbThursLayer = new L.geoJSON(thursdayData,{ style: thursStyle, onEachFeature: thursOnEachFeature}).addTo(map);


          // handle clicks on the map that didn't hit a feature
          map.addEventListener('click', function(e) {
            if (selection) {
              resetStyles();
              selection = null;
              document.getElementById('summaryLabel').innerHTML = '<p>Click a line to get the sum of weight, service time, and stop numbers for that block.</p>';
            }
          });

          // function to set the old selected feature back to its original symbol. Used when the map or a feature is clicked.
          function resetStyles(){
            if (selectedLayer === resGarbThursLayer) selectedLayer.resetStyle(selection);
          }

          // function to build the HTML for the summary label using the selected feature's "name" property
          function buildSummaryLabel(currentFeature){
            var Count = currentFeature.properties.COUNT_Ref_ || "Unnamed feature";
            var Demand = currentFeature.properties.SUM_Demand || "Unnamed feature";
            var Time = currentFeature.properties.SUM_Servic || "Unnamed feature";
            document.getElementById('summaryLabel').innerHTML = '<p style="font-size:18px"><b>' + "Stops: " + Count + '<br>' + "Tons: " + Demand + '<br>' + "Service time: " + Time + '</b></p>';
          }

        }
        </script>
      </head>
      <body onload="init()">
        <h1 id="title">Thursday Residential Garbage</h1>

        <div id="mapid"></div>
        <div id="summaryLabel">
            <p>Click on a line to get more info.</p>
        </div>
        <div id="tableid">
        <table id='jsonTable'></table>
        </div>
      </body>
    </html>

Here is the CSS:

/**
 * Basic Typography
 */
body {
    font-family: "Lucida Grande", Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
    font-size: 80%;
    color: #222;
    background: #fff;
    margin: 1em 1.5em;
}
pre, code {
    margin: 1.5em 0;
    white-space: pre;
}
pre, code {
    font: 1em 'andale mono', 'lucida console', monospace;
    line-height:1.5;
}
a[href] {
    color: #436976;
    background-color: transparent;
}
h1, h2, h3, h4, h5, h6 {
    color: #003a6b;
    background-color: transparent;
    font: 100% 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
    margin: 0;
    padding-top: 0.5em;
}
h1 {
    font-size: 130%;
    margin-bottom: 0.5em;
    border-bottom: 1px solid #fcb100;
}
h2 {
    font-size: 120%;
    margin-bottom: 0.5em;
    border-bottom: 1px solid #aaa;
}
h3 {
    font-size: 110%;
    margin-bottom: 0.5em;
    text-decoration: underline;
}
h4 {
    font-size: 100%;
    font-weight: bold;
}
h5 {
    font-size: 100%;
    font-weight: bold;
}
h6 {
    font-size: 80%;
    font-weight: bold;
}

.olControlAttribution {
    bottom: 5px;
}

/**
 * Map Examples Specific
 */
.smallmap {
    width: 1024px;
    height: 1024px;
    border: 1px solid #ccc;
}
#tags {
    display: none;
}

#docs p {
    margin-bottom: 0.5em;
}
#mapid {
    height : 500px !important;
    width:75%;
}
#tableid {
    height : 250px ;
    width : 25%;
    position : relative;
}
/* mobile specific */
@media only screen and (max-width: 600px) {
    body {
        height           : 100%;
        margin           : 0;
        padding          : 0;
        width            : 100%;
    }
    #map {
        background : #7391ad;
        width      : 100%;
    }
    #map {
        border : 0;
        height : 250px;
    }
    #title {
        font-size   : 1.3em;
        line-height : 2em;
        text-indent : 1em;
        margin      : 0;
        padding     : 0;
    }
    #docs {
        bottom     : 0;
        padding    : 1em;
    }
    #shortdesc {
        color      : #aaa;
        font-size  : 0.8em;
        padding    : 1em;
        text-align : right;
    }
    #tags {
        display : none;
    }
}
@media only screen and (orientation: landscape) and (max-width: 600px) {
    #shortdesc {
       float: right;
       width: 25%;
    }
    #map {
        width: 70%;
    }
    #docs {
        font-size: 12px;
    }
}
body {
    -webkit-text-size-adjust: none;
}

Here is the first bit of the geoJSON (referenced as "ResGarbThursLines.js" file in the html):

var thursdayData = {
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "OBJECTID": 1, "Street_ID": 887932285.0, "Route": "03X", "Side": "L", "SUM_Demand": 0.044, "SUM_Servic": 1.2, "COUNT_Ref_": 4 }, "geometry": { "type": "LineString", "coordinates": [ [ -122.05675789199995, 37.405177089000063 ], [ -122.05864249499996, 37.405582278000054 ], [ -122.05930716899996, 37.405727143000036 ] ] } },
{ "type": "Feature", "properties": { "OBJECTID": 2, "Street_ID": 23694678.0, "Route": "03X", "Side": "L", "SUM_Demand": 0.143, "SUM_Servic": 3.9, "COUNT_Ref_": 11 }, "geometry": { "type": "LineString", "coordinates": [ [ -122.06109679499997, 37.402789313000028 ], [ -122.06099837899995, 37.403160261000039 ], [ -122.06095929699995, 37.403599941000039 ], [ -122.06096881599996, 37.403704653000034 ], [ -122.06096893755976, 37.403713777598547 ], [ -122.06096765199999, 37.403722812000069 ], [ -122.06094765199998, 37.403812812000069 ], [ -122.06094513089909, 37.40382117773111 ], [ -122.06094140312075, 37.40382907995069 ], [ -122.06093655025629, 37.403836345699929 ], [ -122.06093067852217, 37.403842815950632 ], [ -122.06092391643529, 37.403848349085955 ], [ -122.06091641199998, 37.403852824000069 ], [ -122.06085641199996, 37.40388282400005 ], [ -122.06084796575122, 37.403886260115591 ], [ -122.06083909123346, 37.403888355095837 ], [ -122.06083, 37.403889059000051 ], [ -122.06074, 37.403889059000051 ], [ -122.06073484835773, 37.403888833758145 ], [ -122.06072973599998, 37.403888160000065 ], [ -122.06067605599998, 37.403878687000031 ] ] } },
{ "type": "Feature", "properties": { "OBJECTID": 3, "Street_ID": 23694678.0, "Route": "03X", "Side": "R", "SUM_Demand": 0.143, "SUM_Servic": 3.9, "COUNT_Ref_": 11 }, "geometry": { "type": "LineString", "coordinates": [ [ -122.06098262699999, 37.402759023000044 ], [ -122.06088291599997, 37.403134855000076 ], [ -122.06088117299998, 37.403144771000029 ], [ -122.06084117299997, 37.40359477100003 ], [ -122.0608409412845, 37.40360005924677 ], [ -122.06084118399997, 37.403605347000052 ], [ -122.06085035, 37.403706177000061 ], [ -122.06083844599999, 37.403759748000027 ], [ -122.06081605799994, 37.403770941000062 ], [ -122.06074517099995, 37.403770941000062 ], [ -122.06069658399997, 37.40376236700007 ] ] } },
{ "type": "Feature", "properties": { "OBJECTID": 4, "Street_ID": 23694694.0, "Route": "05X", "Side": "L", "SUM_Demand": 0.033, "SUM_Servic": 0.9, "COUNT_Ref_": 3 }, "geometry": { "type": "LineString", "coordinates": [ [ -122.07683047899997, 37.388541716000077 ], [ -122.07676108499999, 37.388658588000055 ] ] } },
{ "type": "Feature", "properties": { "OBJECTID": 5, "Street_ID": 23694694.0, "Route": "05X", "Side": "R", "SUM_Demand": 0.033, "SUM_Servic": 0.9, "COUNT_Ref_": 3 }, "geometry": { "type": "LineString", "coordinates": [ [ -122.07672891499999, 37.388481412000033 ], [ -122.07665952099995, 37.388598284000068 ] ] } },
{ "type": "Feature", "properties": { "OBJECTID": 6, "Street_ID": 23694696.0, "Route": "05X", "Side": "L", "SUM_Demand": 0.022, "SUM_Servic": 0.6, "COUNT_Ref_": 2 }, "geometry": { "type": "LineString", "coordinates": [ [ -122.07663804399999, 37.388861517000066 ], [ -122.07637238799998, 37.389290655000025 ] ] } },
{ "type": "Feature", "properties": { "OBJECTID": 7, "Street_ID": 23694696.0, "Route": "05X", "Side": "R", "SUM_Demand": 0.022, "SUM_Servic": 0.6, "COUNT_Ref_": 2 }, "geometry": { "type": "LineString", "coordinates": [ [ -122.07653761199998, 37.388799345000052 ], [ -122.07627195599997, 37.389228483000068 ] ] } },
{ "type": "Feature", "properties": { "OBJECTID": 8, "Street_ID": 23694697.0, "Route": "05X", "Side": "L", "SUM_Demand": 0.121, "SUM_Servic": 3.3, "COUNT_Ref_": 11 }, "geometry": { "type": "LineString", "coordinates": [ [ -122.07743772099997, 37.387561487000028 ], [ -122.07695255699997, 37.388340931000073 ] ] } },
{ "type": "Feature", "properties": { "OBJECTID": 9, "Street_ID": 23694697.0, "Route": "05X", "Side": "R", "SUM_Demand": 0.121, "SUM_Servic": 3.3, "COUNT_Ref_": 11 }, "geometry": { "type": "LineString", "coordinates": [ [ -122.07733744299998, 37.387499069000057 ], [ -122.07685227899998, 37.388278513000046 ] ] } },
{ "type": "Feature", "properties": { "OBJECTID": 10, "Street_ID": 23694698.0, "Route": "05X", "Side": "L", "SUM_Demand": 0.132, "SUM_Servic": 3.6, "COUNT_Ref_": 12 }, "geometry": { "type": "LineString", "coordinates": [ [ -122.07815685899999, 37.386421404000032 ], [ -122.07756300699998, 37.387361670000075 ] ] } },
{ "type": "Feature", "properties": { "OBJECTID": 11, "Street_ID": 23694698.0, "Route": "05X", "Side": "R", "SUM_Demand": 0.132, "SUM_Servic": 3.6, "COUNT_Ref_": 12 }, "geometry": { "type": "LineString", "coordinates": [ [ -122.07805699299996, 37.386358330000064 ], [ -122.07746314099995, 37.387298596000051 ] ] } },
{ "type": "Feature", "properties": { "OBJECTID": 12, "Street_ID": 23695432.0, "Route": "05X", "Side": "R", "SUM_Demand": 0.044, "SUM_Servic": 1.2, "COUNT_Ref_": 4 }, "geometry": { "type": "LineString", "coordinates": [ [ -122.07459079899996, 37.381326838000064 ], [ -122.07381605099999, 37.382320536000066 ] ] } },
{ "type": "Feature", "properties": { "OBJECTID": 13, "Street_ID": 23696915.0, "Route": "04X", "Side": "L", "SUM_Demand": 0.132, "SUM_Servic": 3.6, "COUNT_Ref_": 10 }, "geometry": { "type": "LineString", "coordinates": [ [ -122.07640559199996, 37.391391270000042 ], [ -122.07573366199995, 37.392432764000034 ] ] } },
{ "type": "Feature", "properties": { "OBJECTID": 14, "Street_ID": 23696915.0, "Route": "05X", "Side": "R", "SUM_Demand": 0.132, "SUM_Servic": 3.6, "COUNT_Ref_": 10 }, "geometry": { "type": "LineString", "coordinates": [ [ -122.07630633799999, 37.391327236000052 ], [ -122.07563440799998, 37.392368730000044 ] ] } },
{ "type": "Feature", "properties": { "OBJECTID": 15, "Street_ID": 23696917.0, "Route": "04X", "Side": "L", "SUM_Demand": 0.066, "SUM_Servic": 1.8, "COUNT_Ref_": 6 }, "geometry": { "type": "LineString", "coordinates": [ [ -122.07693960699999, 37.390531649000025 ], [ -122.07662155499997, 37.391059325000072 ] ] } },
{ "type": "Feature", "properties": { "OBJECTID": 16, "Street_ID": 23696917.0, "Route": "05X", "Side": "R", "SUM_Demand": 0.066, "SUM_Servic": 1.8, "COUNT_Ref_": 6 }, "geometry": { "type": "LineString", "coordinates": [ [ -122.07683844499996, 37.390470675000074 ], [ -122.07652039299995, 37.390998351000064 ] ] } },
{ "type": "Feature", "properties": { "OBJECTID": 17, "Street_ID": 23696918.0, "Route": "04X", "Side": "L", "SUM_Demand": 0.033, "SUM_Servic": 0.9, "COUNT_Ref_": 3 }, "geometry": { "type": "LineString", "coordinates": [ [ -122.07718597599995, 37.390141312000026 ], [ -122.07706346399999, 37.390332432000037 ] ] } },
{ "type": "Feature", "properties": { "OBJECTID": 18, "Street_ID": 23696919.0, "Route": "05X", "Side": "R", "SUM_Demand": 0.011, "SUM_Servic": 0.3, "COUNT_Ref_": 1 }, "geometry": { "type": "LineString", "coordinates": [ [ -122.07723731599998, 37.389838862000033 ], [ -122.07721252, 37.389878536000026 ] ] } },
{ "type": "Feature", "properties": { "OBJECTID": 19, "Street_ID": 23696920.0, "Route": "04X", "Side": "L", "SUM_Demand": 0.11, "SUM_Servic": 3.0, "COUNT_Ref_": 10 }, "geometry": { "type": "LineString", "coordinates": [ [ -122.07788297399998, 37.388951872000064 ], [ -122.07745971399999, 37.389696498000035 ] ] } },
{ "type": "Feature", "properties": { "OBJECTID": 20, "Street_ID": 23696920.0, "Route": "05X", "Side": "R", "SUM_Demand": 0.11, "SUM_Servic": 3.0, "COUNT_Ref_": 10 }, "geometry": { "type": "LineString", "coordinates": [ [ -122.07778028599995, 37.38889350200003 ], [ -122.07735702599996, 37.389638128000058 ] ] } },
{ "type": "Feature", "properties": { "OBJECTID": 21, "Street_ID": 23696923.0, "Route": "05X", "Side": "R", "SUM_Demand": 0.022, "SUM_Servic": 0.6, "COUNT_Ref_": 2 }, "geometry": { "type": "LineString", "coordinates": [ [ -122.07946072399994, 37.386194151000041 ], [ -122.07920624399998, 37.386648089000062 ] ] } },
{ "type": "Feature", "properties": { "OBJECTID": 22, "Street_ID": 23696924.0, "Route": "05X", "Side": "R", "SUM_Demand": 0.011, "SUM_Servic": 0.3, "COUNT_Ref_": 1 }, "geometry": { "type": "LineString", "coordinates": [ [ -122.07985683, 37.385558060000051 ], [ -122.07958345399999, 37.385988628000064 ] ] } },
{ "type": "Feature", "properties": { "OBJECTID": 23, "Street_ID": 23696925.0, "Route": "05X", "Side": "R", "SUM_Demand": 0.022, "SUM_Servic": 0.6, "COUNT_Ref_": 2 }, "geometry": { "type": "LineString", "coordinates": [ [ -122.08023741799997, 37.384949028000051 ], [ -122.07998232599999, 37.385358518000032 ] ] } },
{ "type": "Feature", "properties": { "OBJECTID": 24, "Street_ID": 23697067.0, "Route": "05X", "Side": "L", "SUM_Demand": 0.022, "SUM_Servic": 0.6, "COUNT_Ref_": 2 }, "geometry": { "type": "LineString", "coordinates": [ [ -122.07405839299997, 37.387831549000055 ], [ -122.07396263, 37.387987162000059 ], [ -122.07387049899995, 37.388204328000029 ] ] } },
{ "type": "Feature", "properties": { "OBJECTID": 25, "Street_ID": 23697067.0, "Route": "05X", "Side": "R", "SUM_Demand": 0.022, "SUM_Servic": 0.6, "COUNT_Ref_": 2 }, "geometry": { "type": "LineString", "coordinates": [ [ -122.07395779699999, 37.38776964300007 ], [ -122.07385737, 37.38793283800004 ], [ -122.07376176299999, 37.388158198000042 ] ] } },
{ "type": "Feature", "properties": { "OBJECTID": 26, "Street_ID": 23697069.0, "Route": "05X", "Side": "L", "SUM_Demand": 0.022, "SUM_Servic": 0.6, "COUNT_Ref_": 2 }, "geometry": { "type": "LineString", "coordinates": [ [ -122.07493889199998, 37.386581590000048 ], [ -122.07470193799998, 37.386969932000056 ] ] } },
{ "type": "Feature", "properties": { "OBJECTID": 27, "Street_ID": 23697069.0, "Route": "05X", "Side": "R", "SUM_Demand": 0.022, "SUM_Servic": 0.6, "COUNT_Ref_": 2 }, "geometry": { "type": "LineString", "coordinates": [ [ -122.07483806199997, 37.386520068000038 ], [ -122.07460110799997, 37.386908410000046 ] ] } },
{ "type": "Feature", "properties": { "OBJECTID": 28, "Street_ID": 23697070.0, "Route": "05X", "Side": "R", "SUM_Demand": 0.022, "SUM_Servic": 0.6, "COUNT_Ref_": 2 }, "geometry": { "type": "LineString", "coordinates": [ [ -122.07520012, 37.385893253000063 ], [ -122.07495732599995, 37.386318145000075 ] ] } },
{ "type": "Feature", "properties": { "OBJECTID": 29, "Street_ID": 23697072.0, "Route": "05X", "Side": "L", "SUM_Demand": 0.044, "SUM_Servic": 1.2, "COUNT_Ref_": 4 }, "geometry": { "type": "LineString", "coordinates": [ [ -122.07577254699999, 37.385210900000061 ], [ -122.07552519299998, 37.385575422000045 ] ] } },
{ "type": "Feature", "properties": { "OBJECTID": 30, "Street_ID": 23697073.0, "Route": "05X", "Side": "L", "SUM_Demand": 0.121, "SUM_Servic": 3.3, "COUNT_Ref_": 11 }, "geometry": { "type": "LineString", "coordinates": [ [ -122.07665444, 37.384009562000074 ], [ -122.07591024299995, 37.38497157200004 ], [ -122.07589564799997, 37.38500076400004 ] ] } },
{ "type": "Feature", "properties": { "OBJECTID": 31, "Street_ID": 23697073.0, "Route": "05X", "Side": "R", "SUM_Demand": 0.121, "SUM_Servic": 3.3, "COUNT_Ref_": 11 }, "geometry": { "type": "LineString", "coordinates": [ [ -122.07656101399999, 37.383937290000063 ], [ -122.07581328699996, 37.38490386400008 ], [ -122.07580999452529, 37.384908577589819 ], [ -122.07580717599996, 37.384913589000064 ], [ -122.07579, 37.384947942000053 ] ] } },
{ "type": "Feature", "properties": { "OBJECTID": 32, "Street_ID": 23697166.0, "Route": "04X", "Side": "L", "SUM_Demand": 0.066, "SUM_Servic": 1.8, "COUNT_Ref_": 5 }, "geometry": { "type": "LineString", "coordinates": [ [ -122.07733146899994, 37.389997528000038 ], [ -122.07817114099998, 37.390322308000066 ] ] } },
{ "type": "Feature", "properties": { "OBJECTID": 33, "Street_ID": 23697166.0, "Route": "04X", "Side": "R", "SUM_Demand": 0.066, "SUM_Servic": 1.8, "COUNT_Ref_": 5 }, "geometry": { "type": "LineString", "coordinates": [ [ -122.07728885899996, 37.390107692000072 ], [ -122.07812853099995, 37.390432472000043 ] ] } },
{ "type": "Feature", "properties": { "OBJECTID": 34, "Street_ID": 23697167.0, "Route": "04X", "Side": "L", "SUM_Demand": 0.044, "SUM_Servic": 1.2, "COUNT_Ref_": 4 }, "geometry": { "type": "LineString", "coordinates": [ [ -122.07839158699994, 37.390408840000077 ], [ -122.07935212099994, 37.390791426000078 ] ] } }
]}

JSON to table file won't fit on this post but can be found at the link in the beginning of the post.

The page loads but the summary table doesn't show up. I used console log to return the object type of the variable data and it is in fact an object. No errors coming up in the console.

Is there a better option for displaying summarized geoJSON data on a webpage or is there something that I'm missing with the plug in above?

  • your HTML <table> id is jsonTabele... – ThingumaBob Jan 19 '18 at 19:53
  • @ThingumaBob oops! shanged it to jsonTable but still no table – geoJshaun Jan 19 '18 at 20:08
  • hehe...okay, then try not to stringify the json when passing to the function? looks like it wants the json object itself – ThingumaBob Jan 19 '18 at 20:15
  • @ThingumaBob still nothing – geoJshaun Jan 19 '18 at 20:20
  • check your json object (console.log(data)), does it have your data? check if the table exists in the DOM and if it's position, dimensions and colors/opacity make sense. – ThingumaBob Jan 19 '18 at 20:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.