I'm developing a javascript/html application for WP8.1 [WinJS 4.3/ HTML] in Visual Studio Community 2015 and now I'm at the part of implementing the map.
Unfortunately I seem to be unable to reference the javascript api (bing ajax)... Seems like implementing this in my pivot item doesn't get the library properly (not at all to be more specific) Following the steps here https://msdn.microsoft.com/en-us/library/gg427624.aspx to download the library from the server:
<script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
Fails to reference it and using "Microsoft." namespace ends in error.
So I've tried to install the bing maps extension for VS, which gets installed, but I cannot add the reference to the extension in my VS2015 Community. https://visualstudiogallery.msdn.microsoft.com/224eb93a-ebc4-46ba-9be7-90ee777ad9e1
<script type="text/javascript" src="ms-appx:///Bing.Maps.JavaScript//js/veapicore.js"></script>
But that is again without any success.
So I'm stuck without the library and any map. Any chance there would be an offline version of the bing maps javascript api I could download and reference the same way as WinJS.
This has been covered on the Bing Maps blog and was a topic at the Microsoft //Build/ conference this year. Here is the video: https://channel9.msdn.com/Blogs/Best-of-Build-2015-Cloud/Visualizing-Business-Data-on-any-Device-with-Bing-Maps
Here is a blog post: https://blogs.bing.com/maps/2013/06/28/cross-platform-development-with-bing-maps-and-phonegap/
Basically, you will need to use the web URL:
<script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
But you when you go to load the map you will need to wait for the Microsoft namespace to become available. Alternatively load the map on the document.body.onload event. Here is how you can wait for the Microsoft namespace before loading the map:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
var map = null;
function getMap()
{
var mapElement = document.getElementById('myMap');
if (typeof Microsoft == 'undefined' ||
typeof Microsoft.Maps == 'undefined' ||
mapElement == null) {
setTimeout(getMap, 100);
return;
}
map = new Microsoft.Maps.Map(mapElement, { credentials: 'Your Bing Maps Key' });
}
getMap();
</script>
</head>
<body>
<div id='myMap' style="position:relative; width:400px; height:400px;"></div>
</body>
</html>
The example you posted still seems like it's designed for web page use so it's referencing external JS files.
With windows apps if you ever have to call a JS file it can never be external, so if you ever see an example that has src="http://..." know it wont work or you will have to download it local.
Try this link: https://msdn.microsoft.com/en-us/library/hh852186.aspx
It switches to all local references.
That article has a complete example too which helped me get my version working.
Now if they only ported the offline maps option...
Related
I'm trying to get PouchDB's Getting Started Guide working using IE11 from a local file (file://). Is it possible?
It works great using a local http server by adding the following scripts to the header in the index.html file:
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill#8/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/whatwg-fetch#3.0.0/dist/fetch.umd.min.js"></script>
I think my issue is both indexedDB and localStorage seem to be restricted by IE when served using the file:// protocol, however I was able to get localStorage working on it's own using the code below from this post:
!localStorage && (l = location, p = l.pathname.replace(/(^..)(:)/, "$1$$"), (l.href = l.protocol + "//127.0.0.1" + p));
So I thought that would get it working, but even then when i add the pouchdb localstorage adapter I get this error: "AssertionError: .status required, old abstract-leveldown".
Even if that did work, the solution isn't ideal because I need to add file://127.0.0.1 to the trusted sites list.
That's about as far as I've gotten, any help would be appreciated!
Thanks to Zhi Lv - MSFT comment I was able to get the demo working in IE11, however it requires the user to add 'file://127.0.0.1' to the trusted sites list in IE.
After completing the 'Getting Started' guide you'll need to make the following changes.
Update the head element in index.html file:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>VanillaJS • TodoMVC</title>
<link rel="stylesheet" href="style/base.css">
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill#8/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/whatwg-fetch#3.0.0/dist/fetch.umd.min.js"></script>
<script src="pouchdb/object-assign.js"></script>
<script src="pouchdb/pouchdb-7.2.1.js"></script>
<script src="pouchdb/pouchdb.localstorage.js"></script>
<script src="pouchdb/pouchdb.memory.js"></script>
<!--[if IE]>
<script src="style/ie.js"></script>
<![endif]-->
</head>
You will need to download any missing 7.2.1 pouch-db files and put into a pouchdb directory. object-assign.js can be found here.
Modify the app.js, replace the db variable with these two lines:
!localStorage && (l = location, p = l.pathname.replace(/(^..)(:)/, "$1$$"), (l.href = l.protocol + "//127.0.0.1" + p));
var db = new PouchDB('todos', {adapter: 'localstorage'});
Goto line 8796 of pouchdb.localstorage.js, edit it to set the db.status like this:
function LevelUP (db, options, callback) {
db.status = 'unknown';
if (!(this instanceof LevelUP)) {
return new LevelUP(db, options, callback)
}
Bit of a muck around, but worked for me. Any improvement please let me know.
Error: 0x800a138f - JavaScript runtime error: Unable to get property 'setApiKey' of undefined or null reference
Hello I'm desperatly trying to get this to work on my Universal Windows App. There is a sample for Googles URL shortener with instructions on how to use the API.
https://developers.google.com/api-client-library/javascript/samples/samples
All of this works when I run this in my Browser, but as soon as I start running this in my Universal Windows App, it won't work. I figured that it had something to do with the security of the UWP, inline skripts arent allowed and you can't load scripts from the web normally. You have to use a webview to load scripts from the web so I did this with this webview:
<x-ms-webview id="UrlShortenerWebview"src="ms-appx-web:///Pages/URLShortener/URLShortener.html" style="width: 200px; height: 200px; border: 1px solid black;"></x-ms-webview>
This is my URL Shortener html file:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="https://apis.google.com/js/api.js" type="text/javascript"></script>
<script>
function appendResults(text) {
var results = document.getElementById('results');
results.appendChild(document.createElement('P'));
results.appendChild(document.createTextNode(text));
}
function makeRequest() {
var request = gapi.client.urlshortener.url.get({
'shortUrl': 'http://goo,gl/fbsS'
});
request.then(function (response) {
appendResults(response.result.longUrl);
}, function (reason) {
console.log('Error: ' + reason.result.error.message);
});
}
function init() {
gapi.client.setApiKey('AIzaSyCzBnER6KmLiO2ZBIycZIPCEQEXxIrHnR0');
gapi.client.load('urlshortener', 'v1').then(makeRequest)
}
gapi.load("client", init);
</script>
</head>
<body>
<div id="results"></div>
</body>
</html>
Error: 0x800a138f - JavaScript runtime error: Unable to get property 'setApiKey' of undefined or null reference
I have no idea why that happens or what else I can do to fix this. Is it even possible to use the google api in windows apps???
Please check Rob's comments in your MSDN case: https://social.msdn.microsoft.com/Forums/windowsapps/en-US/bd101515-212b-4366-b60d-2807b2783f62
Rob mentioned two choices: calling local js files if Google permits it, or taking full control and stream your content to your x-ms-webview with navigateToLocalStreamUri method.
I have been digging in the this site and others for several days and the answer to my problem still escapes me.
I have read all of these pages:
http://pastebin.com/cbagkw8h
but none of them exactly answers this question:
I am trying to get a Rally Dashboard (custom board) to appear in HTML/Javascript in a confluence wiki. I have gotten a simple Standard Report working using a read-only account and AppSDK1.32 with loginKey by embedding the following HTML/Javascript into the Confluence wiki page:
{html}
<meta name="Name" content="App Example: Rally Application" />
<meta name="Version" content="2011.04" />
<meta name="Vendor" content="Rally Software" />
<script type="text/javascript"
src="https://rally1.rallydev.com/apps/1.32/sdk.js?loginKey=loginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkey">
</script>
<script type="text/javascript">
function onLoad() {
var rallyDataSource = new rally.sdk.data.RallyDataSource(
'__WORKSPACE_OID__',
'__PROJECT_OID__',
'__PROJECT_SCOPING_UP__',
'__PROJECT_SCOPING_DOWN__');
rally.sdk.ui.AppHeader.destroy();
var reportConfig = {report: rally.sdk.ui.StandardReport.IterationBurndown,
width : 400, height: 300};
var report = new rally.sdk.ui.StandardReport(reportConfig);
report.display("reportDiv");
}
rally.addOnLoad(onLoad);
</script>
<div id="reportDiv" style="width: 400px; margin-left:20px"></div>
<br/>
{html}
I am trying to expand this success to an entire dashboard with App SDK2.x using the new apiKey - by using the following code:
{html}
<meta name="Name" content="App Example: Rally Application" />
<meta name="Version" content="2015.04" />
<meta name="Vendor" content="eBay Enterprise" />
<script type="text/javascript"
src="https://loginapirally1.rallydev.com/apps/1.32/sdk.js?loginKey=loginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkeyloginkey">
</script>
<script type="text/javascript">
function onLoad() {
rally.sdk.ui.AppHeader.destroy();
document.getElementById("iframeA").width = screen.width - 60 ;
document.getElementById("iframeA").height = (screen.width - 60 ) * 3;
}
rally.addOnLoad(onLoad);
</script>
<iframe id="iframeA" src="https://loginapirally1.rallydev.com/#/111111111d/custom/222222222?expandApp=333333333&apiKey=_apikeyapikeyapikeyapikeyapikeyapikeyapikey" width="1024" height="1024">
</iframe>
<br/>
{html}
I am noticing a few things:
1) it almost works - I get the dashboard/report title but not the cards
2) the apiKey seems to have no affect at all - I still get prompted for a login and password (which I could stand if I could see the cards).
3) it doesn't seem to matter if I put the apiKey before or after the hash symbol
Citation A suggested using the "full screen" dashboard/report but didn't cover the apiKey.
Citaton B says that the AppSDK2 uses the apiKey as of Apr 14 2014 but doesn't say how to use it exactly with AppSDK2.
I have gotten the apiKey to work with the Ruby API but it is unclear how to access the dashboard/reports from there.
Citation C says that the AppSDK1 is based on the Javascript dojo framework and the AppSDK2 is based on the Javascript Sencha's ExtJS but avoids giving any kind of rosetta stone from one to the other.
The only other options I can think of is to 1) copy the entire HTML page-source from the "Custom Board" and then start debugging the Javascript with ExtJS (but I cannot find an example of where to put the apiKey for ExtJS) or 2) bypass all of the APIs and use Ruby Watir-Webdriver (which uses
Selenium) and VNCServer to clip an image of the "Custom Board" page and show THAT in confluence.
Citations: http://pastebin.com/YMUEPjSF
The issue seems to be specific to the canned Custom Board that cannot be loaded externally. It should work if you write a js source code to build a similar Board and compile that into a deployment html. That is similar to option (1) you mentioned in the end of your post if I understand it correctly.
Here is my test where I compared Custom Board and Custom HTML side by side.
Below is a screenshot from Rally. This custom dashboard has Custom Board on the left and Custom HTML on the right. The Custom HTML is using a code example of filterable board from AppSDK2 documentation.
Next I use this code:
<html>
<head>
<title>Custom Grid</title>
<meta name="Name" content="App: Custom Dashboard"/>
<meta name="Version" content="2011.08.31"/>
<meta name="Vendor" content="Rally Labs, NickM"/>
<script type="text/javascript" src="https://rally1.rallydev.com/apps/1.32/sdk.js?loginKey=c33e83...."></script>
<script type="text/javascript">
rally.addOnLoad(function() {
var iframe = document.createElement("iframe");
iframe.src = "https://loginapirally1.rallydev.com/#/14018981229/custom/34207853894"
iframe.width = 2000;
iframe.height = 1000;
document.getElementById("storyboard").appendChild(iframe);
});
</script>
</head>
<body>
<div id="storyboard"></div>
</body>
</html>
Here is the dashboard loaded externally on localhost:3000. The left column of the dashboard where Custom Board is expected to load is empty, but the right column with a custom html code of a board loads successfully:
It looks like the canned Custom Board cannot be loaded externally but a custom html code written in AppSDK2 can be displayed externally.
A couple of observations:
There is really no upgrade path from AppSDK1 to AppSDK2. The underlying frameworks and the class structures are very different and the code cannot be simply refactored. There is no translation from one to the other.
LoginKey is intended to work with AppSDK1. Both are legacy. Both predate AppSDK2 and ApiKey. To use ApiKey with custom html apps written with AppSDK2 see "Use API Key with AppSDK2" article.
AppSDK2 does not support LoginKey usage for authentication. The reason it seems to work in this example is that we load the entire page. Loading the entire page using iframe's src property is possible with LoginKey. In this example there is no reason to use ApiKey and LoginKey together. You are right that ApiKey makes no difference in this use case.
The way LoginKey works is that it "tricks" the browser into thinking that there is this different server, loginapirally1.rallydev.com. If you look in Network tab of your browser and see that request comes from there it means that LoginKey is working. ApiKey works differently. There is no equivalent to loginapirally1 server with ApiKey.
If you are being prompted to supply login credentials when using LoginKey it means that LoginKey is not working. See "LoginKey Troublshooting" article.
Embedding custom AppSDK2 apps in 3rd party portals (running custom apps externally) is possible with ApiKey, and the supported scenario described in this guide is similar to the option (1) you mentioned in the end of your post. Loading entire Rally page or entire Rallynavigation is not a supported use case even though it is possible with LoginKey.
I am facing this strange issue.
The bing map does not display on my page where as all the controls even pushpins displays properly.
I googled a lot and same the functionality is working great in my other project(s)
I suspect that something is wrong with the reference to the dev.virtualearth.net, Or I am missing something
Here is my code:
ASCX (is inside the content place holder of dynamically generated aspx):
<script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&mkt=de-de">
</script>
<div>
.
.
.
<div id="bigMapContainer">
<div id="eventMap">
</div>
</div>
</div>
Code behind:
string script = #"
function GetVEMap() {
map = new VEMap('eventMap');
map.SetDashboardSize(VEDashboardSize.Small);
map.LoadMap();
DisplayEventsOnMap();
}
function DisplayEventsOnMap() {
var eventMapLayer = new VEShapeLayer();
eventMapLayer.Id = 'eventMapLayer';
var points = null;
.
.
.
//Code to get the data for pin display etc
.
.
map.AddShapeLayer(eventMapLayer);
map.SetMapView(eventMapLayer.GetBoundingRectangle());
map.SetZoomLevel(15);
});
}
$(window).load(function() {
GetVEMap();
}
);";
ScriptManager.RegisterStartupScript(this, typeof(Page), "MapDisplay", script, true);
CSS:
#bigMapContainer {display: block;}
#eventMap { position: absolute; width: 550px height: 500px; }
I have added some references on the master pages which are not related to the map but might conflict with my map implementation(?)
<script type="text/javascript" src="/js/modernizr-2.0.6.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/js/script.js"></script>
<script type="text/javascript" src="/js/superfish.js"></script>
<script type="text/javascript" src="/js/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="/js/jquery.ui.totop.js"></script>
<script type="text/javascript" src="/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="/js/jquery.responsivemenu.js"></script>
<script type="text/javascript" src="/js/client.js"></script>
<script type="text/javascript" src="/js/jquery-ui.js"></script>
Help is very much appreciated.
First off, it looks like you are pointing to Virtual Earth 6.2 which was deprecated several years ago and now points to v6.3. That said v6.3 is really old and is not recommended for new development projects. If this is a new project you should be using Bing Maps V7 which is the latest and greatest version of Bing Maps (Virtual earth was renamed to Bing Maps in 2009). V7 is much faster, has a lot more features, and also a lot smaller.
Assuming that this is an existing project that just started having issues. Looking at your code, one thing I notice right away is that there are no credentials specified when loading the map. This is required. Right before you call the LoadMap method you should have a line of code like this:
map.SetCredentials('YOUR_BING_MAPS_KEY');
If you do not have a Bing Maps key you can get one by creating a Bing Maps account in the Bing Maps portal: http://bingmapsportal.com Here is some documentation on creating a key: http://msdn.microsoft.com/en-us/library/ff428642.aspx
Next, the eventMap div, do you specify any styles for this? It should have a position, width and height specified in as either a CSS class or as an inline style. Without this you will get odd rendering in some browsers.
After a huge reserach I found that the issue was with the css. Thanks #rbrunditt for help
mapcontrol.css inside http://ecn.dev.virtualearth.net/mapcontrol/v6.3/css/bin/6.3.20091207154938.04/de/mapcontrol.css have a class for the map container- .MSVE_Map which have the attribute position:absolute which was making the tiles display out of the screen.
I have overridden the class to position:relative which actually solved the issue..
I have various JS libraries in my web application, which are loaded before my main JS file (main.js). One of these libraries is jshashtable, but when I try to create a new Hashtable object in main.js, Google Chrome and Firefox throw a ReferenceError, complaining that the variable does not exist.
Here is the <head> of the application:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="/static/jquery-1.4.4.min.js"></script>
<script type="text/javacsript" src="/static/jshashtable-2.1.js"></script>
<script type="text/javascript" src="/static/main.js"></script>
Here is the problem line in main.js:
posts = new Hashtable();
This line is inside a function called init which is called when the page has finished loading (using the jquery $(document).ready() function).
Any reason why Hashtable is not global? Google maps and jquery objects work with no such problem. The source of jshashtable can be seen on Google code.
Updated answer: The problem is that you've got a typo in the script tag:
<script type="text/javacsript" src="/static/jshashtable-2.1.js"></script>
<!-- ^^---- here (the letters are transposed) -->
I couldn't understand why you would be running into a problem and decided to actually copy-and-paste your script tags and replicate the structure exactly on my machine. And things stopped working and my world tilted 3° counter-clockwise until I finally stared at them long enough to see it.
Provided that the jshashtable code really is at /static/jshashtable-2.1.js and your server is serving it up correctly (double-check on Chrome's resources tab in the dev tools), I can't see any reason for that. Your scripts are in the right order, and jshashtable's docs show using a global Hashtable (and the code link you gave clearly shows it creating one).
Edit: I've just replicated that same structure (same scripts, same order, using jQuery(document).ready(function() { ... });) on my own server, and am not having that problem. I can create a Hashtable and use its functions.
My HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Test Page</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type='text/javascript' src='jquery-1.4.4.js'></script>
<script type='text/javascript' src='jshashtable-2.1.js'></script>
<script type='text/javascript' src='main.js'></script>
</head>
<body>
</body>
</html>
My main.js:
jQuery(document).ready(function() {
try {
var ht = new Hashtable();
display("typeof ht = " + typeof ht);
display("ht.size() = " + ht.size());
}
catch (e) {
display("Exception: " + e);
}
function display(msg)
{
$("<p>").html(msg).appendTo(document.body);
}
});
Only difference is I'm not using a /static prefix, and I'm absolutely certain that makes no difference.