Adding google API key with the help of config - node.js

Here using node js ill send request but they give me en error ,add key to the config. I have a key but dont know how to add it?
My code is:
var GoogleMapsAPI = require('googlemaps');
var config = require('config');
var gmAPI = new GoogleMapsAPI();
var params = {
center: '444 W Main St Lock Haven PA',
zoom: 15,
size: '500x400',
maptype: 'roadmap',
markers: [
{
location: '300 W Main St Lock Haven, PA',
label : 'A',
color : 'green',
shadow : true
},
{
location: '444 W Main St Lock Haven, PA',
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe%7C996600'
}
],
style: [
{
feature: 'road',
element: 'all',
rules: {
hue: '0x00ff00'
}
}
],
path: [
{
color: '0x0000ff',
weight: '5',
points: [
'41.139817,-77.454439',
'41.138621,-77.451596'
]
}
]
};
gmAPI.staticMap(params); // return static map URL
gmAPI.staticMap(params, function(err, binaryImage) {
// fetch asynchronously the binary image
});
and they give me an error:
WARNING: No configurations found in configuration directory:/home/okayg/webstorm_projects/Google_map_API/config
WARNING: To disable this warning set SUPPRESS_NO_CONFIG_WARNING in the environment.
/home/okayg/webstorm_projects/Google_map_API/node_modules/googlemaps/lib/staticMap.js:28
throw error;
^
Error: The staticMap API requires a key. You can add it to the config.
at module.exports [as staticMap] (/home/okayg/webstorm_projects/Google_map_API/node_modules/googlemaps/lib/staticMap.js:40:36)
at Object.<anonymous>
So, how can i add key as they say "using config"?
Thank you.

You can find the answer in the documentation:
https://www.npmjs.com/package/googlemaps
It should be something like:
var publicConfig = {
key: '<YOUR-KEY>',
stagger_time: 1000, // for elevationPath
encode_polylines: false,
secure: true, // use https
proxy: 'http://127.0.0.1:9999' // optional, set a proxy for HTTP requests
};
var gmAPI = new GoogleMapsAPI(publicConfig);
Hope this helps!

Related

Link overlap, on target port

I have an issue with link, on target port device, it unusually overlaps the target port.... check my fiddle . I also have attached a screenshot overlap image. Someone have any suggestions? Thanks!
I think JointJS is calculating that your source and target should be considered an obstacle. Adding the excludeEnds option in your fiddle seems to resolve the issue. You can see the option in the following docs.
https://resources.jointjs.com/docs/jointjs/v3.5/joint.html#routers.manhattan
Your code example could be the following:
var link = new joint.dia.Link({
// source: { id: el1.id },
// target: { id: el2.id },
router: { name: 'manhattan', args: { excludeEnds: ['source', 'target'] } },
connector: { name: 'rounded' },
attrs: {
'.connection': {
stroke: 'red',
'stroke-width': 5
},
'.marker-target': {
fill: 'red',
d: 'M 10 0 L 0 5 L 10 10 z'
},
'.marker-source': { /*stroke: '#fe854f',*/ fill: 'red', d: 'M 10 0 L 0 5 L 10 10 z' },
}
});

Using IIPImage server with openseadragon

I have the IIPImage server running and I am trying to display a deepzoom image but fail
This is how I am doing it :
var tileSource =
{
Image:
{
xmlns: "http://schemas.microsoft.com/deepzoom/2008",
Url: "http://127.0.0.1/fcgi-bin/iipsrv.fcgi?
DeepZoom=E:/DeepZoomFile/10580_12079_1121935_stitch_files/",
Format: "jpg",
Overlap: "2",
TileSize: "256",
Size:
{
Height: "38290",
Width: "17953"
}
}
};
And the important line is :
Url: "http://127.0.0.1/fcgi-bin/iipsrv.fcgi?DeepZoom=E:/DeepZoomFile/10580_12079_1121935_stitch_files/"
I am getting errors from the browser that "fail to load tile image"
Any help or example of how should I do it ?
Thanks
No . It doesn't work with a suffix of DZI

How to disable webpack dev server auto reload for neutrino project?

Browser: Peruse
Type of project: SAFE network website
I need to turn it off because Peruse considers window.eval() to be a security issue and thus blocks it, which in turn stops my website from loading.
Peruse is the standard browser for Maidsafe as far as I know.
Both of my attempts to fix this have failed:
webpack.config.js
module.exports = {
devServer: {
hot: false,
inline: false
}
};
neutrinorc.js
module.exports = {
use: [
[
'#neutrinojs/vue',
{
html: {
title: 'SAFE Web App'
}
}
],
(neutrino) => {
neutrino.config.devServer
.hot(false)
.inline(false)
}
]
};
The error:
Uncaught Error: Sorry, peruse does not support window.eval().
at window.eval.global.eval (/opt/Maidsafe/Peruse/resources/app.asar/webPreload.js:9:82219)
at Object../node_modules/webpack-dev-server/client/index.js?http://localhost:5000 (http://localhost:5000/index.js:957:1)
at __webpack_require__ (http://localhost:5000/index.js:679:30)
at fn (http://localhost:5000/index.js:89:20)
at Object.0 (http://localhost:5000/index.js:1060:1)
at __webpack_require__ (http://localhost:5000/index.js:679:30)
at http://localhost:5000/index.js:725:37
at http://localhost:5000/index.js:728:10
package.json
...
"dependencies": {
"#babel/helper-module-imports": "^7.0.0-beta.44",
"vue": "^2.5.16"
},
"devDependencies": {
"#neutrinojs/vue": "^8.2.1",
"#vue/devtools": "^4.1.5",
"neutrino": "^8.2.1"
}
...
The eval() errror is not coming from webpack-dev-server.
It turns out that the the default source map mode used by #neutrinojs/web which #neutrinojs/web inherits from is cheap-module-eval-source-map and needs to be set to cheap-module-source-map.
Thus neutrinorc.js needs to be configured as such:
module.exports = {
use: [
['#neutrinojs/vue', {
// Existing options
}],
(neutrino) => {
if (process.env.NODE_ENV === 'development') {
// Override the default development source map of 'cheap-module-eval-source-map'
// to one that doesn't use `eval` (reduces incremental build performance).
neutrino.config.devtool('cheap-module-source-map');
}
}
]
};

Can you remove the hover-coordinate-lines in Plotly Python Scatter3d

When using Plotly Scatter3D , the default mouse hover-over effect displays a kind of coordinate crosshairs. Is there a way to remove this effect and just show the tooltip?
The hover effect causing the lines to show up on the axis are called spikes in Plotly. You can disable them via layout = {'scene': {'xaxis': {'showspikes': False}}}.
Interactive Javascript example:
Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/3d-scatter.csv', function(err, rows) {
function unpack(rows, key) {
return rows.map(function(row) {
return row[key];
});
}
var trace = {
x: unpack(rows, 'x2'),
y: unpack(rows, 'y2'),
z: unpack(rows, 'z2'),
mode: 'markers',
marker: {
color: 'rgb(127, 127, 127)',
size: 12,
symbol: 'circle',
line: {
color: 'rgb(204, 204, 204)',
width: 1
},
opacity: 0.9
},
type: 'scatter3d'
};
var data = [trace];
var layout = {
scene: {
xaxis: {
showspikes: false
},
yaxis: {
showspikes: false
},
zaxis: {
showspikes: false
}
}
};
Plotly.newPlot('myDiv', data, layout);
});
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv" style="width:100%;height:100%"></div>

Building dynamic HighCharts and image Highcharts with (mostly) one codebase?

We're already creating dynamic HighCharts for our webpages--these have a few javascript dependencies and a chart-generation script. We'd like to start creating PDFs of these charts using the new HighCharts/Node/PhantomJS suite HighCharts has rigged up (see press release). Our image-gen node server would run on a separate box/vm. How can we do this without having to maintain two separate codebases for the same chart? I'm not too familiar with Node yet, so I'm not sure how requesting the scripts with a web request would work. I'm guessing a lot of HighCharts users that want to start generating some of their charts as images server-side will run into a similar issue with managing two related codesets...
In essence, we already have have this:
Webserver -> JSON (data) + foo.js + bar.js + foo.html -> webpage with dynamic charts.
We'd like to build:
Web-server -> JSON (data) + separate Node Server + foo.js + bar.js -> images available via web request
Obviously some redundancy. How can we manage the dependencies?
While node is awesome, I felt that approach was needlessly complex, with having to many moving parts that could break. So I did the super simple solution of creating files dynamically. The only problem i faced was deleting the temporary file after adding it to the pdf. It would break the PDF from rendering. And setting the directory to /tmp, crashed phantomjs. The best idea i came up with currently is putting the tempory generated files, in a temp directory, then deleting everything in that directory every night, with a cronjob.
I post this out of code simplicity. It should be in a function, to maintain code re-usability.
<?php
$TmpInFileName = 'tmp/graph_'.md5($CurrentDate.rand(666,9482845713)).'.js';
$TmpGraphFileName = 'tmp/pnggraph_'.md5($CurrentDate.rand(2666,54713)).'.png';
$Data = "
{
chart: {
zoomType: 'xy',
width: 700,
height: 520
},
credits: {
enabled: false
},
colors: [
'#2f7ed8',
'#910000',
'#8bbc21',
'#1aadce',
'#492970',
'#f28f43',
'#77a1e5',
'#c42525',
'#a6c96a'
],
title: {
text: 'Sample Graph - created at ".date('m/d/Y g:i:s a')."',
style: {
fontSize: '16px',
}
},
xAxis: [{
categories: ['00:00', '00:15', '00:30', '00:45', '01:00', '01:15', '01:30']
}],
yAxis: [{
labels: {
format: '{value}',
style: {
fontSize: '14px',
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Y axis',
style: {
fontSize: '16px',
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'Sec Yaxis',
style: {
fontSize: '16px',
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value}',
style: {
fontSize: '14px',
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'horizontal',
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{
name: 'first',
type: 'spline',
yAxis: 1,
data: [0, -119.9502311075212, -119.96203992145706, -119.98172620218355, -119.71898290168028, -119.97023935590325, -119.95230287195413]
},
{
name: 'second',
type: 'spline',
yAxis: 1,
data: [0, -119.24222667756482, -119.60905809195222, -119.63522965403729, -119.11011466187935, -119.63643171374981, -119.54969080301575]
},{
name: 'third',
type: 'column',
data: [10, 11, 9, 7, 5, 2, 7]
},{
name: 'fourth',
type: 'column',
data: [0, -0.7080044299563895, -0.35298182950484147, -0.34649654814626274, -0.6088682398009269, -0.33380764215343106, -0.40261206893838164]
}]
}";
try {
$myfile = fopen($TmpInFileName, "w") or die("Unable to open file!");
fwrite($myfile, $Data);
fclose($myfile);
} catch (Exception $e) {
echo 'Error: '.$e.' <br />';
}
$URL_Command = "phantomjs /highcharts/exporting-server/phantomjs/highcharts-convert.js -infile $TmpInFileName -outfile $TmpGraphFileName -width 600";
exec($URL_Command);
echo '<img src="'.$TmpGraphFileName.'" alt="Could not load img: '.$TmpGraphFileName.'">';
?>
I hope this helps. I couldn't find a good solution that didn't involve Node.JS or Java to do this. I wanted a pure PHP solution.
We decided to pass the entire highcharts config object (e.g. Highcharts.chart(configObj)) to the node server as a URL-encoded string. We had to put a few rendering functions over on the node server, but it wasn't too bad. We also stuck some of the rendering functions in the string config object. Not the most beautiful result, but it worked.

Resources