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

Uploaded event on ZiggeoApi not being fired

After looking at the ZiggeoApi docs I attempted to use the uploaded event:
ZiggeoApi.Events.on "system_ready", ->
recorder = ZiggeoApi.V2.Recorder.findByElement($('#ziggeo-recorder-embedding')[0])
recorder.on "verified", (params...) ->
console.log('uploaded', params...)
recorder.on "uploaded", (params...) ->
console.log('uploaded', params...)
In the above code, verified does fire, but uploaded does not. I'm using V2 of the API which is in beta, so I'm wondering whether this is a bug.
All I need is the video id once the video is uploaded so I have a reference to it for later retrieval. The documentation for what data is for each event is somewhat lacking, and for verified you don't actually get anything passed in as an argument when the event is fired. Any work arounds are most welcome!

v2 does not require the data parameter to pass the token as you can grab it at any point directly.
To do that you would use the code such as this:
recorder.get('video');
Also it is good to mention that as soon as the upload is started the token is already available in both v1 and v2 so you should be able to grab them even then if needed.
EDIT 2016/11/18
The JavaScript SDK documentation pages
is relatively new, and the Events
page
shows wrong code sample for v2 at the moment.
This is already resolved and the Ziggeo Docs are showing correct samples.
-- end edit --
Correct way to add it would be:
recorder.on("uploaded", function() {
recorder.get('video');
});
Adding a working sample showing both verified, uploading and uploaded events
ZiggeoApi.token = "a48e03aee097e23697b165ad6060f32f";
ZiggeoApi.Events.on("system_ready", function() {
var element = document.getElementById('ziggeo-recorder-embedding');
var recorder = ZiggeoApi.V2.Recorder.findByElement( element );
recorder.on('verified', function() {
console.log("video was verified. It's token is:" + recorder.get('video') );
});
recorder.on('uploading', function() {
console.log("video is uploading. It's token is:" + recorder.get('video') );
});
//Requires v1-r18 or higher to work
recorder.on('uploaded', function() {
console.log("video is uploaded. It's token is:" + recorder.get('video') );
});
});
<html>
<head>
<link rel="stylesheet" href="https://assets-cdn.ziggeo.com/v1-r18/ziggeo.css" />
<script src="https://assets-cdn.ziggeo.com/v1-r18/ziggeo.js"></script>
</head>
<body>
<ziggeorecorder
ziggeo-width="640"
ziggeo-height="480"
id="ziggeo-recorder-embedding">
</ziggeorecorder>
</body>
</html>
The snippet might not work (depending on browser and its security settings) however using the same code on localhost or some server will.
Good to mention also that uploaded event does in deed not seem to work at this point - so it is a bug.
If it is in the documentation it is considered as something that should work (and was working), so if it is not, it is definitely some kind of a bug.
To summarize, you did find a bug with uploaded event, however for what you are after you could use uploading event instead as so:
recorder.on("uploading", function() {
recorder.get('video');
});
EDIT 2016/10/28
The uploaded event was actually introduced in r18, so it should work in r18, 19 and up.
It will however not work on stable tag since it points currently to v1-r16 during which it was not available.
I have updated the sample script above and the code on the docs page will be fixed soon as well.

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?

How to display map on Blackberry by using Kony Studio?

I am new to Kony Studio. I have to display Google map on mobile by using kony Studio API.I tried and Its working fine on Android mobile.But On blackberry,It's not working on blackberry.Please give me some solution for this

Without some more information, hard to diagnose, but take a look at the Kony Map Widget documentation; there are some specific steps you need to follow to setup the map widget in Blackberry, and some Blackberry configurations that need to be set for the map to be able to test it in the emulator. Take a look here: Kony doc Map Reference

Following the above recommendation I found the below simple sample.
enter code here
function onPinClickCallBck(map)
{
alert("Some Message");
var mapBasicConf = {
id: "map1",
provider:constants.MAP_PROVIDER_GOOGLE,
mapKey:"0z5UtaSPUYj42f5qX0VAwmDGLX39Qxgbtcra0TA",
defaultPinImage: "kmpin.png",
isVisible:true, onPinClick:onPinClickCallBck
};
var mapLayoutConf = {
margin:[20,40,50,20],
containerWeight:100,
widgetAlignment:constants.WIDGET_ALIGN_BOTTOM_LEFT,padding: [10,10,10,10],
hExpand:false,
vExpand:false
};
var mapPSPConf = {
mode: constants.MAP_VIEW_MODE_HYBRID,
showCurrentLocation:constants.MAP_VIEW_SHOW_CURRENT_LOCATION_AS_PIN
};
var map = new kony.ui.Map(mapBasicConf,mapLayoutConf,mapPSPConf);
enter code here
I hope it is helpful.
Regards.

You need to subscribe BIS (Blackberry Internet Services) on the BB device to see map widget functioning properly.