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?