I was going to build a component based on jquery's fancytree but the folder depth is stuck at 3 no matter what I do to my source data. Is there some special Tree Option feature I have been unable to spot which will prevent the limitation?
Thanks in advance.
Kevin
Code I was using was:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Fancytree - Example</title>
<script src="../lib/jquery.js" type="text/javascript"></script>
<script src="../lib/jquery-ui.custom.js" type="text/javascript"></script>
<link href="../src/skin-xp/ui.fancytree.css" rel="stylesheet" type="text/css">
<script src="../src/jquery.fancytree.js" type="text/javascript"></script>
<script type="text/javascript">
var DT = $.ui.fancytree;
$.ui.fancytree.debug("Using fancytree " + $.ui.fancytree.version);
$("#foldertree").fancytree({
source: {
url: "data.json"
},
lazyload: function(e, data){
data.result = $.ajax({
url: "data.json",
dataType: "json"
});
}
});
// call methods on multiple instances
$("div:ui-fancytree").fancytree("foo", "after init");
});
</script>
</head>
<body class="example">
<div id="foldertree" data-source="ajax" class="">
</div>
<!-- (Irrelevant source removed.) -->
</body>
</html>
The sample of data I was using (I have changed many times) but added it below for completion.
My point is that I have been unable to drill down beyond 3 folders and cant see anywhere any tree option for removing a folder depth.
[
{"key": "top", "title": "Products", "folder": true, "children": [
{"key": "under1", "title": "A-E", "folder": true, "children": [
{"key": "under2", "title": "Parts 0-9", "folder": true , "children:": [
{"key": "under3", "title": "F-M", "folder": true, "children": [
{"key": "under4", "title": "F-M", "folder": true, "children": [
{"key": "under5", "title": "F-M", "folder": true, "children": [
{"key": "under6", "title": "F-M", "folder": true, "children": [
]}
]}
]}
]}
]}
]}
]},
{"key": "11", "title": "Samples", "folder": true, "children": [
{"key": "20", "title": "FG and H", "folder": true, "children": [
{"key": "30", "title": "Parts 0-9", "folder": true , "children:": [
{"key": "40", "title": "F-M", "folder": true, "children": [
{"key": "42", "title": "Sub-item 1.3.1", "folder": true, "children": [
{"key": "43", "title": "Sub-item 1.3.2"}
]},
{"key": "44_1", "title": "Sub-item 1.3.2"}
]}
]}
]}
]}
]
It is my data. I used a block of json from another example and added an extra folder depth and it works fine which goes some way to showing that there is not a limiter in this case. The data I used is below.
[
{"title": "Item 1"},
{"title": "Folder 2", "isFolder": true, "key": "folder2", "expand": true,
"children": [
{"title": "Sub-item 2.1",
"children": [
{"title": "Sub-item 2.1.1",
"children": [
{"title": "Sub-item 2.1.1.1",
"children": [
{"title": "Sub-item 2.1.1.1.1"},
{"title": "Sub-item 2.1.1.2.2"},
{"title": "Sub-item 2.1.1.1.3"},
{"title": "Sub-item 2.1.1.2.4"}
]
},
{"title": "Sub-item 2.1.2.2"},
{"title": "Sub-item 2.1.1.3"},
{"title": "Sub-item 2.1.2.4"}
]
},
{"title": "Sub-item 2.1.2"},
{"title": "Sub-item 2.1.3"},
{"title": "Sub-item 2.1.4"}
]
},
{"title": "Sub-item 2.2"},
{"title": "Sub-item 2.3 (lazy)", "isLazy": true }
]
},
{"title": "Folder 3", "isFolder": true, "key": "folder3",
"children": [
{"title": "Sub-item 3.1",
"children": [
{"title": "Sub-item 3.1.1"},
{"title": "Sub-item 3.1.2"},
{"title": "Sub-item 3.1.3"},
{"title": "Sub-item 3.1.4"}
]
},
{"title": "Sub-item 3.2"},
{"title": "Sub-item 3.3"},
{"title": "Sub-item 3.4"}
]
},
{"title": "Lazy Folder 4", "isFolder": true, "isLazy": true, "key": "folder4"},
{"title": "Item 5"}
]
I am using Fancytree to load a large data (about 23 MB) too and it works fine with more than 3 depths. One thing I have notice from your example and data is that you use lazyload option but not all your data has that isLazy = true. Give it a try!
Also you might want to check if the tree is throwing errors when lazy loading data. F12 on your browser.
Related
Apologies for the vague question, I'm not too sure how to completely phrase what I'm wanting to do, which hasn't helped my searching for solutions at all! I'm pretty new to javascript and vega-lite but am trying to upskill. As such I'm working on COVID19 data made available by the New Zealand Ministry of Health, and looking at how I can visualise the data. If interested here is my rough site thus far: https://sirselim.github.io/covid_analysis/
I'm trying to define all days that have been in lockdown here in NZ, since the 26th March 2020, and display these in a different colour, see below for my current solution which is I believe 95% of the way there:
So I have essentially what I want being displayed, however I am manually defining the dates in the scale element, which doesn't seem like the correct way to do things. I would have thought I should be able to define a date range and it would apply the formatting to dates that fall in the defined range. The other, smaller, tweak I would like to make is not listing the dates in the legend but just have [blue] no lockdown and [orange] lockdown.
Here's the code:
<!DOCTYPE html>
<html>
<head>
<title>Embedding Vega-Lite</title>
<script src="https://cdn.jsdelivr.net/npm/vega#5.10.1"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite#4.9.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed#6.5.2"></script>
</head>
<body>
<div id="vis"></div>
<script type="text/javascript">
var yourVlSpec = {
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"width": 580,
"height": 200,
"padding": 5,
"description": "simple vega-lite chart with linked data",
"title": "Confirmed COVID cases in NZ DHBs",
"data": {
"url": "https://raw.githubusercontent.com/sirselim/covid_analysis/master/data//NZCOVID_confirmed_formatted.json"
},
"transform": [{
"sort": [{"field": "Date of report"}],
"window": [{"op": "count", "field": "count", "as": "cumulative_count"}],
"frame": [null, 0]
}],
"mark": {
"type": "bar",
"tooltip": true
},
"encoding": {
"x": {
"field": "Date of report",
"type": "nominal"
},
"y": {
"field": "cumulative_count",
"type": "quantitative"
},
"color": {
"value": "steelblue",
"condition": {
"test": {
"field": "Date of report",
"range": [
"2020-03-26",
"2020-04-30"
]
},
"field": "Date of report",
"title": "Days in lockdown",
"type": "nominal",
"scale": {
"domain": [
"2020-03-26",
"2020-03-27",
"2020-03-28",
"2020-03-29",
"2020-03-30",
"2020-03-31",
"2020-04-01"
],
"range": [
"#FFA500",
"#FFA500"
]
}
}
}
}
};
vegaEmbed('#vis', yourVlSpec);
</script>
</body>
</html>
Thank you in advance to anyone with some insight!
If you're using a test condition for the color, you can specify the values you want directly, rather than defining them indirectly via a custom scale.
For example (vega editor):
{
"title": "Confirmed COVID cases in NZ DHBs",
"data": {
"url": "https://raw.githubusercontent.com/sirselim/covid_analysis/master/data//NZCOVID_confirmed_formatted.json"
},
"transform": [
{
"sort": [{"field": "Date of report"}],
"window": [{"op": "count", "field": "count", "as": "cumulative_count"}],
"frame": [null, 0]
}
],
"mark": {"type": "bar", "tooltip": true},
"encoding": {
"x": {"field": "Date of report", "type": "nominal"},
"y": {"field": "cumulative_count", "type": "quantitative"},
"color": {
"value": "steelblue",
"condition": {
"test": {"field": "Date of report", "gt": "2020-03-26"},
"value": "orange"
}
}
},
"width": 580,
"height": 200
}
I have a problem while using fancytree.
After checking one or more items, drag and drop, the font color of the moved item has been changed
$(function() {
// Attach the fancytree widget to an existing <div id="tree"> element
// and pass the tree options as an argument to the fancytree() function:
$("#tree").fancytree({
extensions: ["dnd5", "multi", "table"],
checkbox: true,
// debugLevel: 1,
source: [{
"title": "Books",
"expanded": true,
"folder": true,
"children": [{
"title": "Art of War",
"type": "book",
"author": "Sun Tzu",
"year": -500,
"qty": 21,
"price": 5.95
},
{
"title": "The Hobbit",
"type": "book",
"author": "J.R.R. Tolkien",
"year": 1937,
"qty": 32,
"price": 8.97
},
{
"title": "The Little Prince",
"type": "book",
"author": "Antoine de Saint-Exupery",
"year": 1943,
"qty": 2946,
"price": 6.82
},
{
"title": "Don Quixote",
"type": "book",
"author": "Miguel de Cervantes",
"year": 1615,
"qty": 932,
"price": 15.99
}
]
},
{
"title": "Music",
"folder": true,
"children": [{
"title": "Nevermind",
"type": "music",
"author": "Nirvana",
"year": 1991,
"qty": 916,
"price": 15.95
},
{
"title": "Autobahn",
"type": "music",
"author": "Kraftwerk",
"year": 1974,
"qty": 2261,
"price": 23.98
},
{
"title": "Kind of Blue",
"type": "music",
"author": "Miles Davis",
"year": 1959,
"qty": 9735,
"price": 21.90
},
{
"title": "Back in Black",
"type": "music",
"author": "AC/DC",
"year": 1980,
"qty": 3895,
"price": 17.99
},
{
"title": "The Dark Side of the Moon",
"type": "music",
"author": "Pink Floyd",
"year": 1973,
"qty": 263,
"price": 17.99
},
{
"title": "Sgt. Pepper's Lonely Hearts Club Band",
"type": "music",
"author": "The Beatles",
"year": 1967,
"qty": 521,
"price": 13.98
}
]
},
{
"title": "Electronics & Computers",
"expanded": true,
"folder": true,
"children": [{
"title": "Cell Phones",
"folder": true,
"children": [{
"title": "Moto G",
"type": "phone",
"author": "Motorola",
"year": 2014,
"qty": 332,
"price": 224.99
},
{
"title": "Galaxy S8",
"type": "phone",
"author": "Samsung",
"year": 2016,
"qty": 952,
"price": 509.99
},
{
"title": "iPhone SE",
"type": "phone",
"author": "Apple",
"year": 2016,
"qty": 444,
"price": 282.75
},
{
"title": "G6",
"type": "phone",
"author": "LG",
"year": 2017,
"qty": 951,
"price": 309.99
},
{
"title": "Lumia",
"type": "phone",
"author": "Microsoft",
"year": 2014,
"qty": 32,
"price": 205.95
},
{
"title": "Xperia",
"type": "phone",
"author": "Sony",
"year": 2014,
"qty": 77,
"price": 195.95
},
{
"title": "3210",
"type": "phone",
"author": "Nokia",
"year": 1999,
"qty": 3,
"price": 85.99
}
]
},
{
"title": "Computers",
"folder": true,
"children": [{
"title": "ThinkPad",
"type": "computer",
"author": "IBM",
"year": 1992,
"qty": 16,
"price": 749.90
},
{
"title": "C64",
"type": "computer",
"author": "Commodore",
"year": 1982,
"qty": 83,
"price": 595.00
},
{
"title": "MacBook Pro",
"type": "computer",
"author": "Apple",
"year": 2006,
"qty": 482,
"price": 1949.95
},
{
"title": "Sinclair ZX Spectrum",
"type": "computer",
"author": "Sinclair Research",
"year": 1982,
"qty": 1,
"price": 529
},
{
"title": "Apple II",
"type": "computer",
"author": "Apple",
"year": 1977,
"qty": 17,
"price": 1298
},
{
"title": "PC AT",
"type": "computer",
"author": "IBM",
"year": 1984,
"qty": 3,
"price": 1235.00
}
]
}
]
},
{
"title": "More...",
"folder": true,
"lazy": true
}
],
activate: function(event, data) {},
lazyLoad: function(event, data) {
data.result = [{
"title": "Sub item",
"lazy": true
}, {
"title": "Sub folder",
"folder": true,
"lazy": true
}]
},
renderColumns: function(event, data) {
var node = data.node,
$tdList = $(node.tr).find(">td");
$tdList.eq(1).text(node.key);
$tdList.eq(2).text(!!node.folder);
},
dnd5: {
preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
preventRecursiveMoves: true, // Prevent dropping nodes on own descendants
autoExpandMS: 1000,
multiSource: true, // drag all selected nodes (plus current node)
// focusOnClick: true,
// refreshPositions: true,
dragStart: function(node, data) {
// allow dragging `node`:
data.dataTransfer.dropEffect = "move";
return true;
},
// dragDrag: function(node, data) {
// data.node.info("dragDrag", data);
// data.dataTransfer.dropEffect = "copy";
// return true;
// },
dragEnter: function(node, data) {
data.node.info("dragEnter", data);
data.dataTransfer.dropEffect = "link";
return true;
},
// dragOver: function(node, data) {
// data.node.info("dragOver", data);
// data.dataTransfer.dropEffect = "link";
// return true;
// },
dragEnd: function(node, data) {
data.node.info("dragEnd", data);
},
dragDrop: function(node, data) {
// This function MUST be defined to enable dropping of items on the tree.
//
// The source data is provided in several formats:
// `data.otherNode` (null if it's not a FancytreeNode from the same page)
// `data.otherNodeData` (Json object; null if it's not a FancytreeNode)
// `data.dataTransfer.getData()`
//
// We may access some meta data to decide what to do:
// `data.hitMode` ("before", "after", or "over").
// `data.dataTransfer.dropEffect`, `.effectAllowed`
// `data.originalEvent.shiftKey`, ...
//
// Example:
var dataTransfer = data.dataTransfer,
sourceNodes = data.otherNodeList,
event = data.originalEvent,
copyMode = event.ctrlKey || event.altKey;
if (copyMode) {
$.each(sourceNodes, function(i, o) {
o.copyTo(node, data.hitMode, function(n) {
delete n.key;
n.selected = false;
n.title = "Copy of " + n.title;
});
});
} else {
$.each(sourceNodes, function(i, o) {
o.moveTo(node, data.hitMode);
});
}
node.debug("drop", data);
node.setExpanded();
}
}
});
});
.fancytree-drag-source {
font-style: oblique;
}
.fancytree-drag-source.fancytree-drag-remove {
opacity: 0.5;
}
/* Prevent scrolling while DND */
ul.fancytree-container {
/*
height: 200px;
overflow: auto;
*/
/* position: inherit;*/
}
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Test D'n'D - Fancytree</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://wwwendt.de/tech/fancytree/src/skin-win8/ui.fancytree.css" rel="stylesheet">
<script src="https://wwwendt.de/tech/fancytree/src/jquery-ui-dependencies/jquery.fancytree.ui-deps.js"></script>
<script src="https://wwwendt.de/tech/fancytree/src/jquery.fancytree.js"></script>
<script src="https://wwwendt.de/tech/fancytree/src/jquery.fancytree.dnd5.js"></script>
<script src="https://wwwendt.de/tech/fancytree/src/jquery.fancytree.multi.js"></script>
<script src="https://wwwendt.de/tech/fancytree/src/jquery.fancytree.table.js"></script>
</head>
<body class="example">
<h1>Example: extended drag'n'drop sample</h1>
<div class="description">
This sample shows how to
<ul>
<li>implement drag'n'drop with multiple selected nodes
<li>allow modifier keys <kbd>Ctrl</kbd> or <kbd>Alt</kbd> to force copy instead of move operations
</ul>
</div>
<div>
<label for="skinswitcher">Skin:</label>
<select id="skinswitcher"></select>
</div>
<!-- Add a <table> element where the tree should appear: -->
<!--<p class="description">
Standard tree:
</p>
<div id="tree"></div>-->
<p class="description">
Table tree:
</p>
<table id="tree">
<colgroup>
<col width="*"/>
<col width="200px"/>
<col width="100px"/>
</colgroup>
<thead>
<tr>
<th></th>
<th>Key</th>
<th>Folder</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<p class="droppable">
Droppable.
</p>
</body>
This may be related to a bug that is closed with v2.30.
I am trying to place the values for one of the series in a 2 series stacked column chart. I tried to use properties as shown in this link Data Values Properties but I dont see the changes being applied on the chart.
I need the values to be on top only for one of the series but not both.
Here is the screen shot of the graph. I need to place the values for the second series highlighted, since they are not clearly visible in this graph.
Here is the fiddle where I attempted to achieve this. JS Fiddle Demo
My XML is below:
<chart labelDisplay='ROTATE' useRoundEdges='0' slantLabels='1'
formatNumber='1' formatNumberScale='0' plotGradientColor=''
showValues='1' valuePosition='ABOVE'
caption='Total Call vs LTL Call'>
<categories>
<category label='01AUG2014' />
<category label='02AUG2014' />
<category label='03AUG2014' />
</categories>
<dataset seriesName='TOTAL_CALL' color='FFFFCC'>
<set value=' 11708' />
<set value=' 7675' />
<set value=' 8210' />
</dataset>
<dataset seriesName='LTL_TOTAL' color='800000'>
<set value=' 158' />
<set value=' 80' />
<set value=' 34' />
</dataset>
</chart>
Note: I am using Fusion Charts V3.0
For Stacked Column, it is not feasible to show values for one dataset on top. Instead, try using Text Annotations, to place the values of second dataset on top of the data plot.
Please check the JSFiddle here
FusionCharts.ready(function () {
var revenueChart = new FusionCharts({
type: 'stackedcolumn2d',
renderAt: 'chart-container',
width: '500',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Revenue split by product category",
"subCaption": "For current year",
"xAxisname": "Quarter",
"yAxisName": "% Revenue",
"numberPrefix": "$",
"showValues": "0",
"decimals": "0",
"theme": "fint",
"valuePosition": "auto",
},
"categories": [{
"category": [{
"label": "Q1"
}, {
"label": "Q2"
}, {
"label": "Q3"
}, {
"label": "Q4"
}]
}],
"dataset": [{
"seriesname": "Food Products",
"showValues": "1",
"data": [{
"value": "11000",
"valuePosition": "above"
}, {
"value": "15000",
"valuePosition": "above"
}, {
"value": "13500",
"valuePosition": "above"
}, {
"value": "15000",
"valuePosition": "above"
}]
}, {
"seriesname": "Non-Food Products",
"data": [{
"value": "11"
}, {
"value": "14"
}, {
"value": "83"
}, {
"value": "11"
}]
}],
"annotations": {
"groups": [{
"id": "infobar",
"items": [{
"id": "label",
"type": "text",
"text": "11",
"fillcolor": "#6baa01",
"rotate": "90",
"x": "$canvasStartX + 50",
"y": "$dataset.1.set.0.y - 10"
}, {
"id": "label1",
"type": "text",
"text": "14",
"fillcolor": "#6baa01",
"rotate": "90",
"x": "$canvasStartX + 160",
"y": "$dataset.1.set.1.y - 10"
}, {
"id": "label2",
"type": "text",
"text": "83",
"fillcolor": "#6baa01",
"rotate": "90",
"x": "$canvasStartX + 260",
"y": "$dataset.1.set.2.y - 10"
}, {
"id": "label1",
"type": "text",
"text": "11",
"fillcolor": "#6baa01",
"rotate": "90",
"x": "$canvasStartX + 370",
"y": "$dataset.1.set.3.y - 10"
}]
}]
},
}
});
revenueChart.render();
});
<!-- A simple 100% stacked column chart in FusionCharts showing revenue by product category for current year Attribute: # stack100Percent - Used to make Percentage distribution instead of actual values in a stacked chart -->
<div id="chart-container">FusionCharts will render here</div>
$('#jstree_demo_div2').jstree({
'core': {
'data': {
"url": "tree.ashx?id=" + _id,
"dataType": "json" // needed only if you do not supply JSON headers
}
},
"checkbox": {
'visible': true,
'keep_selected_style': false,
},
"plugins": ["wholerow", "checkbox"]
});
I need to change the url (or the variable _id will change) and then refresh data.
But there seems to have a cache problem.
I monitored the HTTP request, the request param _id didn't change.
I've tried
'core': {
'data': {
"url": "tree.ashx?id=" + _id,
"cache":false, //←←←←
"dataType": "json" // needed only if you do not supply JSON headers
}
},
and it didn't work.
BTW, my jsTree.js version is 3.0.8.
I am using the following code to test your use case. It's refreshing the jstree without collapsing the whole tree.
<!DOCTYPE html>
<html>
<head>
<title>JSTree</title>
<link rel="stylesheet" href="dist/themes/default/style.css" />
<script src="dist/libs/jquery.js"></script>
<script src="dist/jstree.js"></script>
<script>
var arrayCollection;
$(function() {
arrayCollection = [
{"id": "animal", "parent": "#", "text": "Animals"},
{"id": "device", "parent": "#", "text": "Devices"},
{"id": "dog", "parent": "animal", "text": "Dogs"},
{"id": "lion", "parent": "animal", "text": "Lions"},
{"id": "mobile", "parent": "device", "text": "Mobile Phones"},
{"id": "lappy", "parent": "device", "text": "Laptops"},
{"id": "daburman", "parent": "dog", "text": "Dabur Man", "icon": "/"},
{"id": "dalmatian", "parent": "dog", "text": "Dalmatian", "icon": "/"},
{"id": "african", "parent": "lion", "text": "African Lion", "icon": "/"},
{"id": "indian", "parent": "lion", "text": "Indian Lion", "icon": "/"},
{"id": "apple", "parent": "mobile", "text": "Apple IPhone 6", "icon": "/"},
{"id": "samsung", "parent": "mobile", "text": "Samsung Note II", "icon": "/"},
{"id": "lenevo", "parent": "lappy", "text": "Lenevo", "icon": "/"},
{"id": "hp", "parent": "lappy", "text": "HP", "icon": "/"}
];
$('#jstree').jstree({
'core': {
'data': arrayCollection
},
"checkbox": {
'visible': true,
'keep_selected_style': false
},
"plugins": ["wholerow", "checkbox"]
});
});
function resfreshJSTree() {
$('#jstree').jstree(true).settings.core.data = arrayCollection;
$('#jstree').jstree(true).refresh();
}
function addNokia() {
var nokia = {"id": "nokia", "parent": "mobile", "text": "Nokia Lumia", "icon": "/"};
arrayCollection.push(nokia);
resfreshJSTree();
}
function deleteDalmatian() {
arrayCollection = arrayCollection
.filter(function(el) {
return el.id !== "dalmatian";
});
resfreshJSTree();
}
</script>
</head>
<body>
<input type="button" onclick="addNokia()" value="Add Nokia"/>
<input type="button" onclick="deleteDalmatian()" value="Delete Dalmatian"/>
<div id="jstree"></div>
</body>
</html>
Note:
After opening the above page in a browser, Open all the nodes and child nodes of the jstree.
Click on Add Nokia button.
It will add Nokia Lumia node to Mobile Phones node without collapsing
the tree to root node.
Similarly click on Delete Dalmaitian button.
And it will delete Dalmatian node from Dogs node and refreshes the
tree to display the new structure without collapsing to root node.
I am new to google apis and iphone LBS related apps. I need to know how to use a google api and get the list of hotels around my GPS location.
Here the same functionality is achieved through javascript. how to do this on iphone application ?
http://code.google.com/apis/ajax/playground/#localsearch_with_markers
Did you try - http://code.google.com/apis/maps/documentation/places/#PlaceSearches ?
It looks like a normal webservice, you can just post a request and it should give you an XML / JSON list of all the hotels around you ..
From the website -
Request = http://maps.google.com/maps/api/place/search/json?location=40.717859,-73.957790&radius=1600&client=clientId&sensor=true_or_false&signature=SIGNATURE
Response =
{
"status": "OK",
"results": [ {
"name": "Williamsburg",
"types": [ "locality", "political" ],
"icon": "http://maps.gstatic.com/mapfiles/place_api/icons/geocode-71.png",
"reference": "ClRBAAAAXP...lHAPyHom2aG"
}, {
"name": "Greenpoint",
"vicinity": "New York",
"types": [ "neighborhood", "political" ],
"icon": "http://maps.gstatic.com/mapfiles/place_api/icons/geocode-71.png",
"reference": "CkQ_AAAAhd...MF45fwr44Ek"
}, {
"name": "Peter Luger Steakhouse",
"vicinity": "Broadway, Brooklyn",
"types": [ "restaurant", "food", "establishment" ],
"icon": "http://maps.gstatic.com/mapfiles/place_api/icons/restaurant-71.png",
"reference": "ClRCAAAAt3...6Nt7k11iQdT"
}, {
"name": "Music Hall of Williamsburg",
"vicinity": "North 6th Street, Brooklyn",
"types": [ "establishment" ],
"icon": "http://maps.gstatic.com/mapfiles/place_api/icons/generic_business-71.png",
"reference": "ClRFAAAAN...6UOKCbjv7Sxy"
},
...additional results ...
],
"html_attributions": [ ]
}