We Keep Coding

acorn AST query template literal element

I'm trying to query the following:
const t = 'template';
const s = `I'm a ${t}`;
Acorn parses the template literal portion as:
{
"type": "TemplateLiteral",
"start": 32,
"end": 53,
"expressions": [
{
"type": "Identifier",
"start": 50,
"end": 51,
"name": "t"
}
],
"quasis": [
{
"type": "TemplateElement",
"start": 33,
"end": 48,
"value": {
"raw": "I'm a ",
"cooked": "I'm a "
},
"tail": false
},
{
"type": "TemplateElement",
"start": 52,
"end": 52,
"value": {
"raw": "",
"cooked": ""
},
"tail": true
}
]
}
Let's say I wanted to query this by the raw or cooked keys of the value key of the TemplateElement. Since the nested value item doesn't have a type I'm a bit lost as to how to target that node by those attributes. How would I write that query using astq?

Show Result routing path with Leaflet

I get route between 2 Point :
{
"routes": [
{
"overview_polyline": {
"points": "m{f~D}_ygHp#wAJs#Is#eAsBGk#Hg#"
},
"legs": [
{
"summary": "میدان انقلاب - انقلاب",
"distance": {
"value": 209.0,
"text": "۲۲۵ متر"
},
"duration": {
"value": 13.0,
"text": "کمتر از ۱ دقیقه"
},
"steps": [
{
"name": "بزرگراه اهواز-حمیدیه",
"instruction": "در جهت شرق در بزرگراه اهواز-حمیدیه قرار بگیرید",
"bearing_after": 119,
"type": "depart",
"distance": {
"value": 25.0,
"text": "۲۵ متر"
},
"duration": {
"value": 1.0,
"text": "کمتر از ۱ دقیقه"
},
"polyline": "m{f~D}_ygHTm#",
"start_location": [
48.629912,
31.333827
]
},
{
"name": "انقلاب",
"instruction": "در میدان انقلاب، از خروجی دوم، خارج شوید",
"rotaryName": "میدان انقلاب",
"bearing_after": 126,
"type": "rotary",
"modifier": "straight",
"exit": 2,
"distance": {
"value": 101.0,
"text": "۱۲۵ متر"
},
"duration": {
"value": 5.0,
"text": "کمتر از ۱ دقیقه"
},
"polyline": "wzf~DkaygHNWJQJs#Is#Yk#",
"start_location": [
48.630143,
31.333717
]
},
{
"name": "",
"instruction": "به مسیر خود ادامه دهید",
"bearing_after": 53,
"type": "exit rotary",
"modifier": "straight",
"exit": 2,
"distance": {
"value": 83.0,
"text": "۱۰۰ متر"
},
"duration": {
"value": 8.0,
"text": "کمتر از ۱ دقیقه"
},
"polyline": "szf~DigygHk#gAGk#Hg#",
"start_location": [
48.631088,
31.333703
]
},
{
"name": "انقلاب",
"instruction": "در مقصد قرار دارید",
"bearing_after": 0,
"type": "arrive",
"distance": {
"value": 0.0,
"text": ""
},
"duration": {
"value": 0.0,
"text": ""
},
"polyline": "}{f~DelygH",
"start_location": [
48.631869,
31.333913
]
}
]
}
]
}
]
}
In Steps we have 4 points:
[31.333827,48.629912 ],
[31.333717,48.630143 ],
[31.333703,48.631088],
[31.333913,48.631869 ]
When I use polyline my output is like below picture. But real Path is another thing.
I use Leaflet and get my .png file for map from another server and get Json String from another server.
How can Manage this?

A Map Matching API should solve your problem.
Google Snap to Roads API
Mapbox Map Matching API
There also seems to be some open source alternatives like the Valhalla Map Matching API

What was the original directions API request? Curious to see why you're getting that result for that route

SVG tooltip z-index with html title

I'm trying to use an HTML title with a very large tooltip. However I can't seem to get the tooltip background to appear above the title.
Here's my code:
var chart = new Highcharts.Chart({
"chart": {
"type": "gauge",
"renderTo": "chart-2-container",
"marginTop": 60
},
"series": [{
"data": [{
"y": 55.6,
"name": "Area",
"tooltip": "Area: 50.6 %<br/>Minimum: 50.6<br/>3rd quartile: 57.1<br/>2nd quartile: 59.4<br/>1st quartile: 64.7<br/>Maximum: 75.7"
}],
"name": "%"
}],
"tooltip": {
"borderColor": "#E2E2E2",
"borderRadius": 5,
"backgroundColor": "white",
"style": {
"color": "#454545",
"fontSize": 14,
"fontFamily": "Arial, sans-serif",
"zIndex": 9999,
"lineHeight": 14 * 1.4
},
"formatter": function() {
return this.point.tooltip;
}
},
"title": {
"floating": true,
"useHTML": true,
"style": {
"zIndex": 1,
},
"text": "This is some link as a very long title which will probably wrap a couple of lines"
},
"yAxis": {
"title": null,
"tickPixelInterval": 72,
"tickLength": 10,
"minorTickLength": 8,
"minorTickWidth": 1,
"min": 50.6,
"max": 75.7,
"plotBands": [{
"from": 50.6,
"to": 57.1,
"color": "#ee2c34",
"thickness": 15,
}, {
"from": 57.1,
"to": 59.4,
"color": "#f07627",
"thickness": 15,
}, {
"from": 59.4,
"to": 64.7,
"color": "#a88735",
"thickness": 15,
}, {
"from": 64.7,
"to": 75.7,
"color": "#2c876d",
"thickness": 15,
}]
},
"pane": {
"startAngle": -150,
"endAngle": 150
}
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='chart-2-container' style="width: 400px; height: 300px;">
</div>
(also as a fiddle https://jsfiddle.net/d6q1gt4m/)
The problem is that the background is always behind the title. I could switch to non-html title but then I have the problem that only the 1st line is actually a URL if the title is wrapping (and I need to reapply all my link styles).
Does anyone know how I can get the svg tooltip to appear on top of HTML ?
Note: I would like to avoid having to set useHTML for the tooltip if possible as that opens up another can of worms for me.

With CSS and updating tooltip and tooltip formatter the problem is fixed.
For reference check tooltip
Updated tooltip
"tooltip": {
"backgroundColor": "rgba(255,255,255,0)",
"borderWidth": 0,
"borderRadius": 1,
"shadow": false,
"useHTML": true,
"style": {
"color": "#454545",
"fontSize": 14,
"fontFamily": "Arial, sans-serif",
"zIndex": 9999,
"lineHeight": 1.8
},
"formatter": function() {
return "<div>" + this.point.tooltip + "</div>";
}
},
css
.highcharts-tooltip {
z-index: 9998;
}
.highcharts-tooltip div {
background-color: white;
border: 1px solid #E2E2E2;
opacity: 1;
z-index: 9999!important;
padding: 5px
}
Fiddle demo

Google Chrome Apps: chrome.storage.local

I am having a struggle finding out why the following is happening in a application i'm developing:
So i read a JSON file where i want to read and save his content on localStorage, which in a chrome app is chrome.storage.local
So i get the following from a json file:
{
"schedule": {
"id": "416a18d6-7e42-4f8a-ac24-e902abe76f39",
"name": "blabla",
"updatedOn": "2013-09-08T16:34:41.000Z",
"etag": "esxrdctfvygbuhnij5464df7g8hu",
"applications": [
{
"id": "app001",
"type": "text/html",
"src": "http://www.google.com"
},
{
"id": "app002",
"type": "text/html",
"src": "http://www.stackoverflow.com"
}
],
"normalContent": [
{
"layout_id": "layout001",
"layout_name": "layout1",
"layout_dur": "indefinite",
"regions": [
{
"region_id": "region001",
"region_name": "regiao1",
"left": "0",
"top": "0",
"width": "0.5",
"height": "1",
"minWidth": "0",
"minHeight": "0",
"scheduleItem": "container",
"limitCycle": "1",
"selector": "seq",
"containerList": [
{
"cid": "app001",
"dur": "25"
},
{
"cid": "app002",
"dur": "15"
}
]
},
{
"region_id": "region002",
"region_name": "regiao2",
"left": "0.5",
"top": "0",
"width": "0.5",
"height": "1",
"minWidth": "0",
"minHeight": "0",
"scheduleItem": "container",
"limitCycle": "1",
"selector": "seq",
"containerList": [
{
"cid": "app002",
"dur": "15"
},
{
"cid": "app001",
"dur": "15"
}
]
}
]
}
]
}
}
So i get this and then i save the content in storage using:
chrome.storage.local.set({playerSchedule:this.schedule}, function(){
console.log('saved!')
});
Later on when i read the content stored using:
chrome.storage.local.get(["playerSchedule", "playerScheduleType"], function (res) {
self.currentSchedule = res.playerSchedule;
self.scheduleType = res.playerScheduleType;
});
This is what i get:
{
"schedule": {
"applications": [
{
"id": "app001",
"type": "text/html",
"src": "http://www.google.com"
},
{
"id": "app002",
"type": "text/html",
"src": "http://www.stackoverflow.com"
}
],
"etag": "esxrdctfvygbuhnij5464df7g8hu",
"id": "416a18d6-7e42-4f8a-ac24-e902abe76f39",
"name": "blabla",
"normalContent": [
{
"layout_dur": "indefinite",
"layout_id": "layout001",
"layout_name": "layout1",
"regions": [
{
...
"containerList": [
]
},
{
...
"containerList": [
]
}
]
}
],
"updatedOn": "2013-09-08T16:34:41.000Z"
}
}
As you can observe, the content i read comes in alphabetic order and the content in containerList is empty. Any reason why this is happening? I solved this by converting the object to string and storing it, but i wonder why saving as object i get that from reading as an object or is there something i am missing?
Thanks in advance.

This is probably http://code.google.com/p/chromium/issues/detail?id=277647. Fix is in the works for Chrome 31.

json twitter query, parse to html feed

i am trying to build a hastag feed for twitter,
i already have read how to create the search query, and i have this json structure...
{
"completed_in": 0.026,
"max_id": 201961894368653313,
"max_id_str": "201961894368653313",
"next_page": "?page=2&max_id=201961894368653313&q=wearetwo&lang=en&rpp=100&include_entities=1",
"page": 1,
"query": "wearetwo",
"refresh_url": "?since_id=201961894368653313&q=wearetwo&lang=en&include_entities=1",
"results": [
{
{
"created_at": "Sat, 12 May 2012 01:06:19 +0000",
"entities": {
"hashtags": [
{
"text": "wearetwo",
"indices": [
12,
21
]
}
],
"urls": [
],
"user_mentions": [
{
"screen_name": "crifor",
"name": "Cristina Forlani",
"id": 110646291,
"id_str": "110646291",
"indices": [
3,
10
]
}
],
"media": [
{
"id": 201101250740240387,
"id_str": "201101250740240387",
"indices": [
34,
54
],
"media_url": "http:\/\/p.twimg.com\/Asp0haZCQAMC-Sq.jpg",
"media_url_https": "https:\/\/p.twimg.com\/Asp0haZCQAMC-Sq.jpg",
"url": "http:\/\/t.co\/1EXkTMYq",
"display_url": "pic.twitter.com\/1EXkTMYq",
"expanded_url": "http:\/\/twitter.com\/crifor\/status\/201101250740240384\/photo\/1",
"type": "photo",
"sizes": {
"small": {
"w": 340,
"h": 455,
"resize": "fit"
},
"large": {
"w": 765,
"h": 1024,
"resize": "fit"
},
"thumb": {
"w": 150,
"h": 150,
"resize": "crop"
},
"orig": {
"w": 765,
"h": 1024,
"resize": "fit"
},
"medium": {
"w": 600,
"h": 803,
"resize": "fit"
}
}
}
]
},
"from_user": "stevoltan",
"from_user_id": 165713968,
"from_user_id_str": "165713968",
"from_user_name": "Stefano Voltan",
"geo": null,
"id": 201116057396719616,
"id_str": "201116057396719616",
"iso_language_code": "en",
"metadata": {
"result_type": "recent"
},
"profile_image_url": "http:\/\/a0.twimg.com\/profile_images\/2163464409\/crepes_normal.jpg",
"profile_image_url_https": "https:\/\/si0.twimg.com\/profile_images\/2163464409\/crepes_normal.jpg",
"source": "<a href="http:\/\/twitter.com\/#!\/download\/iphone" rel="nofollow">Twitter for iPhone<\/a>",
"text": "RT #crifor: #wearetwo belle facce http:\/\/t.co\/1EXkTMYq",
"to_user": null,
"to_user_id": 0,
"to_user_id_str": "0",
"to_user_name": null
},
I need to extract the media url and text... can someone please help me.. i'm really new to this... i'd appreciate if you could show me a working example of this..at least the function...

This documentation will show you how to get the data into a format you can work with using jQuery:
http://api.jquery.com/jQuery.getJSON/
Something like:
$.getJSON('http://search.twitter.com/search.json?q=wearetwo&lang=en&result_type=recent&rpp=100&include_entities=true', function(data) {
var media_url = data.results.media.media_url;
var text = data.text;
});