We Keep Coding

Google VR View for the Web

I'm trying to embed some 360 images on my site using Google VR View, but I'm having no luck getting anything to work. I'm following the Google provided documentation as a guide...
https://developers.google.com/vr/concepts/vrview-web
`window.addEventListener('load', onVrViewLoad)
function onVrViewLoad() {
var vrView = new VRView.Player('#vrview', {
image: 'img/jtree.jpg',
is_stereo: false
});
}`
I copied the example code, and am getting errors in the console (see attached screen shots)
Console Errors
Does anyone know of a tutorial that would better outline how to use this? Or possibly can someone shed some light on what I may be doing incorrectly?

You have to open your HTML file in a server.
Enable CORS https://enable-cors.org/server.html.
I find an easy way to enable CORS with the Chrome web server just for your experiment purpose.

I had absolutely no luck getting this to work with the instructions provided by Google - guess I'm not versed enough in coding. For me it only worked when I used the iframe, see https://www.museum-joanneum.at/spielwiese/360.
However, the view is still not exactly the same, the info-Tag is not layered over the image in the left lower corner like the demo on Google, but on top of the image and reduces the image height by about 30 pixels. Maybe that's related to the iframe since the instructions state, that the functionality isn't exactly the same as with the JavaScript API.
Also, for my images I had to select "false" for stereo in order to display correctly.
I hope this helps!

Looks like you are not setting up the directories properly. Is your web server set up so the root is the root of the repo? Are you also getting a 404 error? (looks like vrview.js is not being loaded)
As for places to get help with this, I recommend the vrview-web google group.

you need add this html id on web page.
<div id="vrview"></div>
Below JavaScript will call out the image on HTML.
var vrView;
var scenes = {
petra: {
image: 'images/petra.jpg',
preview: 'images/petra-preview.jpg'
}
}
function onLoad() {
vrView = new VRView.Player('#vrview', {
width: '100%',
height: 480,
image: 'images/blank.png',
is_stereo: false,
is_autopan_off: true
});
vrView.on('ready', onVRViewReady);
vrView.on('modechange', onModeChange);
vrView.on('getposition', onGetPosition);
vrView.on('error', onVRViewError);
}
function loadScene(id) {
console.log('loadScene', id);
// Set the image
vrView.setContent({
image: scenes[id].image,
preview: scenes[id].preview,
is_autopan_off: true
});
}
function onVRViewReady(e) {
console.log('onVRViewReady');
loadScene('petra');
}
function onModeChange(e) {
console.log('onModeChange', e.mode);
}
function onVRViewError(e) {
console.log('Error! %s', e.message);
}
function onGetPosition(e) {
console.log(e)
}
window.addEventListener('load', onLoad);

You can run those scripts only on the server and then only it will render the texture so you can add your all files in the wamp server path and access through or you can create a web project in asp.net, add your files and build the project. everything will be taken care of by the Visual Studio.
For example
download this sample Code
Add this in your wamp server path or create a project in visual
studio and add these files
Open your index.html file the in browser

Adding NOAA Radar to JavaScript Application

I am attempting to add NOAA's Doppler Radar to my web map. For whatever reason the later will not display on the map. No errors are being reported and I have used console.log() to confirm the data is being pulled correctly form noaa's arcGIS server. Any thoughts as to how to configure this so the data gets displayed?
maps.addWeather = function addWeatehr () {
console.log("addWeather Called...");
var weatherServiceURL = "http://gis.srh.noaa.gov/arcgis/rest/services/RIDGERadar/MapServer"
var weatherLayer = new FeatureLayer(weatherServiceURL,{
outFields:["*"],
visible:true
});
console.log(weatherLayer);
maps.map.addLayer(weatherLayer);
};

You're trying to add a FeatureLayer using a map service that doesn't support returning features - which makes sense if you think about it, what features would a weather radar return? If you look at the root folder of the NOAA server:
http://gis.srh.noaa.gov/arcgis/rest/services
You should see "RIDGERadar (MapServer)". If it supported Feature access it would either say "FeatureServer", or have a second entry if it supported both.
Try adding it as a dynamic map service instead:
var layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://gis.srh.noaa.gov/arcgis/rest/services/RIDGERadar/MapServer");
maps.map.addLayer(layer);
The ArcGIS services directory is a very useful thing to play with - I got the above line from the internal Javascript viewer linked from the MapServer page.

LeafletJS & Cloudmade: Retina Tile Support

I'm using Leaflet JS and Cloudmade in my mobile HTML5 application. Unfortunately I can't get the retina support to work.
I use this url to access the cloud made api:
var url = 'http://{s}.tile.cloudmade.com/{key}/{style}#2x/256/{z}/{x}/{y}.png?token={token}';
My key, style and token are replaced by the correct values.
For my leaflet map layer I use the following simple configuration:
L.tileLayer(url, {
detectRetina: true
}).addTo(map);
Unfortunately the result looks really weird.
It seems like something is going wrong with the tiles and the position of them.
If I remove the detectRetina flag I get a correct result in the browser
But as you can see both solutions are not sharp on my retina display (Mac Book Pro).
Has anyone made this working?
Thanks!

This worked for me:
var tileURL = 'http://{s}.tile.cloudmade.com/{api-key}/1714' + (L.Browser.retina? '#2x': '') + '/256/{z}/{x}/{y}.png';
L.tileLayer(tileURL, {detectRetina: true}).addTo(yourMap);
Have you tried with different tile styles and check if that might be the issue?

Add arguments cc and bcc blackberry.invoke.MessageArguments in javascript

I am working a phonegap project for blackberry os 7 and I want to add cc and bcc arguments in email composed blackberry 7 API blackberry.invoke.MessageArguments ()
Actually this API accepting only three Arguments toRecipients, subject and email Body. Is there any solution add rest of two arguments cc and bcc. I have used following Code:
<script type="text/javascript">
var args = new blackberry.invoke.MessageArguments('foo#domain.com', 'hello', 'world');
args.view = blackberry.invoke.MessageArguments.VIEW_NEW; // New
blackberry.invoke.invoke(blackberry.invoke.APP_MESSAGES, args); // New Message
</script>
For more reference see on the following link.
Blackberry Invoke API for MessagesArguments

You can use "mailto:" and append the params you need to add accordingly.This should work.

If you are building phonegap application then you can use "mailto". I have tested on BlackBerry 7 device and it is woking fine for me.
Sample Code:
var sMailTo = "mailto:";
sMailTo += escape(toRecipient) +"?subject=" +escape(subject) +"&body=" +escape(body) +"&cc=" +escape(ccRecipient);
window.open(sMailTo, '_self');
Hope this will solve your problem.

Google Earth Plugin not loading sideDatabase from Mapsengine/Earthbuilder

I have not been able to successfully display my side database (map from Mapsengine/Earthbuilder). I have installed Google Plugin and tried to access it from Firefox, Chrome, and IE browsers and nothing seems to work. I am not sure what I'm doing wrong as I have confirmed my code with the code used in Google's Code Playground, and I have attempted a workaround that was suggested in a similar issue from the past (Issue 21: GMaps Engine Layer Disappeared over GEarth plugin). When specifing the URL of my map to be displayed in GE plugin, I even changed the URL to include &export=download, which is one of the fixes I saw in another similar issue (it was about kml files from google docs).
Strangely, when my webpage is accessed, it does not give an error that the side database failed to download.
I have included part of the code below.
Any assistance would be greatly appreciated.
Thanks in advance,
<script type="text/javascript">
var CHO;
google.load("earth", "1");
function init() {
google.earth.createInstance('map3d', initCB, failureCB);
}
function initCB(instance) {
CHO = instance;
CHO.getWindow().setVisibility(true);
CHO.getNavigationControl().setVisibility(CHO.VISIBILITY_AUTO);
CHO.getLayerRoot().enableLayerById(CHO.LAYER_BORDERS, true);
CHO.getLayerRoot().enableLayerById(CHO.LAYER_ROADS, true);
addSideDatabase()
// Add controls for the window
CHO.getOptions().setStatusBarVisibility(true);
CHO.getNavigationControl().setVisibility(CHO.VISIBILITY_AUTO);
// Update the view in Google Earth
var lookAt = CHO.createLookAt('');
lookAt.setLatitude(30.0);
lookAt.setLongitude(-90.0);
lookAt.setRange(9500000); //default is 0.0
CHO.getView().setAbstractView(lookAt);
}
function failureCB(errorCode) {
alert(errorCode);
}
function sideDatabaseSuccess(db) {
sideDatabase = db;
db.setDrawOrder(2);
}
function sideDatabaseFail() {
alert('Sorry! Side database failed to load!');
}
/** Add the URL for the globe served by Earth Enterprise or Earth Builder.
* This function operates similarly to the File => Add Database feature
* in Google Earth EC.
*/
function addSideDatabase() {
google.earth.addSideDatabase(
CHO, "https://mapsengine.google.com/map/edit?mid=zHgXRX6Mts2Q.kHGFoYZlcyBQ&export=download",
sideDatabaseSuccess,
sideDatabaseFail,
{
userName: '',
password: ''
}
);
}google.setOnLoadCallback(init);</script>

Is that URL for a Google Maps Engine Lite map? If so, that might be the issue. I just tried swapping in the URL (https://earthbuilder.google.com/10446176163891957399-13516001307527776624-4/kh/) used in the Google Code Playground example here http://code.google.com/apis/ajax/playground/#adding_a_side_database. That one worked, but my Google Maps Engine Lite URL didn't. Furthermore, it didn't even seem to call its success or failure callback functions!

The thing you are trying to load is a map, not a globe. The two are not equivalent. You can't load a map in Google Earth.
On the bright side, your side-loading code is spot on. Replace your URL with http://laearth.la.gov (Louisiana's Custom Google Earth Server) and it will work.