creating html to call Bing Maps - bing-maps

I inherited some code that worked with Bing Maps v6 so I'm now trying to reproduce functionality in v8. I did the following as an initial attempt, but even this doesn't seem to work. (I've tried to follow https://social.technet.microsoft.com/wiki/contents/articles/34568.bing-maps-v6-3-to-v8-migration-guide.aspx along with various other bits I've found online, but I'm coming into this with no knowledge at all of Bing maps, so I've erred in apparently significant ways since this gets no results. Happy for all guidance.
I've omitted our Bing key below, but other than that, this is the code I attempted to use.
<!DOCTYPE html>
<html>
<head>
<title>Title here</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
</head>
<body>
<div id='myMap' style='width: 100vw; height: 100vh;'></div>
<script type='text/javascript'>
var map;
function loadMap() {
map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
credentials: 'BingKeyOmittedHereForSecurityPurposes'
});
map.Geocode('Jericho, VT', GeocodeCallback);
}
function GeocodeCallback(layer, results, places, hasMore, veErrorMessage) {
// no idea what should be here
}
</script>
<script type='text/javascript'
src='https://www.bing.com/api/maps/mapcontrol?callback=loadMap' async defer></script>
</body>
</html>
I'll be adding Pins and possible directions once I get this working, but figured I should get the basics working before getting fancy.

The map doesn't have a geocode function, instead you have to use the search module. Bing Maps V7 and above break out additional functionalities using modules. This makes for a much lighter page load compared to V6 which had every possible feature crammed into a single downloaded file.
In any case here is a sample of how to geocode in V8. https://github.com/Microsoft/BingMapsV8CodeSamples/blob/master/Samples/Search/Geocode.html
Here are some resources to help you with your migration:
Bing Maps V8 code samples
Bing Maps V6.3 to V8 Migration Guide

Related

Configuring URL parameters in run configurations

My team is migrating to SAP BAS from SAP Web IDE. But when making run configurations I could not find how to configure something important to us: where to configure URL parameters like we could in the Web IDE.
I've consulted several pieces of SAP documentation such as this guide, but came away empty handed. The UI5 CLI also doesn't seem to offer anything interesting in this regard.
Does anyone know whether configuring URL parameters in run configurations is still possible, if necessary in the raw corresponding .env files?
Thank you in advance,
Joshua
I don`t know if you found yet how to do this but in any case, the solution that i found was to modify the Index.HTML file called and put a little piece of Script code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EXTRATOCLIENTE</title>
<script id="sap-ui-bootstrap" src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_belize" data-sap-ui-resourceroots='{"br.com.araguaia.EXTRATOCLIENTE": "./"}'
data-sap-ui-compatVersion="edge" data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
data-sap-ui-async="true" data-sap-ui-frameOptions="trusted">
</script>
<script>
var oStartupParameters = jQuery.sap.getUriParameters().mParams;
var oComponent = sap.ui.getCore().createComponent({
name: "br.com.araguaia.EXTRATOCLIENTE",
settings: {
componentData: { startupParameters: oStartupParameters }
}
});
new sap.ui.core.ComponentContainer({
component: oComponent
}).placeAt("content");
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
After that you can put some parameter on the url like this :
index.html?Kunnr='123'&Kkber='ACRA'
Renan Pacheco
I also found a quick-and-dirty way to run with URL parameters. Run configurations are saved in the .vscode/launch.json file. In that file, there's an args array associated with each run configuration with a mention of the index.html file of your project. You can manually append your desired URL parameters to it.
There is a package.json which is created when you create any application.
It contains the script to start. You can add your URL parameters here.

Is it really required to listen for global init event using "attachInit" function?

I read it in many articles that, "it is a good practice to listen for global init event in order to trigger your application logic only after the event has been fired". But I tried to do otherwise still no problem occurs. When I check the network tab all, irrespective of the placement of the code, the core libraries are loaded first. Then the code dependent on libraries is loaded.
I tried searching for my answer but couldn't get a clear answer. I tried to check it using a sample code I wrote. But no success.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="UTF-8">
<title>My Pets</title>
<script id="test"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_belize"
data-sap-ui-libs="sap.m">
</script>
<script>
var oImage2 = new sap.m.Image({
src: "img/cat_sad.jpg",
decorative: false,
alt: "sad cat"
});
oImage2.placeAt("content");
alert("different_script_tag");
</script>
<script>
sap.ui.getCore().attachInit(function() {
alert("inside_attachinit");
var oImage1 = new sap.m.Image({
src: "img/dog_sad.jpg",
decorative: false,
alt: "sad dog"
});
oImage1.placeAt("content");
});
alert("outside_attachinit");
</script>
</head>
<body id="content" class="sapUiBody">
</body>
</html>
I wish to know, if browser already prioritizes the requests accordingly for us, why we are told to follow this good practice?
It is not only "a good practice", it's absolutely necessary in order to enable asynchronous loading.
Activating asynchronous loading of modules requires listening to the init event. Otherwise, the app will crash because you're trying to access Image from sap.m although that library hasn't been loaded yet:
<script id="sap-ui-bootstrap" src="https://ui5.sap.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_belize"
data-sap-ui-libs="sap.ui.core, sap.m"
data-sap-ui-async="true"
></script>
<script>
var oImage2 = new sap.m.Image(/*...*/); // Uncaught TypeError: Cannot read property 'Image' of undefined!
</script>
If you're wondering why asynchronous loading is important, compare these two scenarios:
1. Without listening to init (no aync possible):
Dependent libraries and other modules are retrieved sequentially one by one.
It uses sync XHR which is deprecated.
While the app loads, browser often freezes.
Users usually need to wait longer until they see something.
2. With async (listening to init required):
Files are retrieved in parallel asynchronously.
No freezing behavior.
Depending on synchronous XHR is not future-proof and makes the app significantly slower. As UI5 is getting better and better and preparing for further improvements, please keep following best-practices in order to "evolve" together with UI5.

Babel & JSX Browser Code Highlighting

I use https://highlightjs.org/ for an in browser (and in a static site generator) to highlight code snippets for blogs and sites. I'm almost certain its not handling ES6, ES7, JSX, and Flow.
How can I get better highlighting for these new additions to javascript?
Please advise. Thanks :)
Using highlight.js you can register languages.
<script src="/js/highlight.js" type="text/javascript"></script>
<script src="/js/highlight-js.js" type="text/javascript"></script>
<script src="/js/highlight-xml.js" type="text/javascript"></script>
<script>
hljs.registerLanguage('js', H_js);
hljs.registerLanguage('xml', H_xml);
hljs.initHighlightingOnLoad();
</script>
Here is a good hightlight-js.js for ES6/React.

Wicket with Javascript application(GWT made by LibGDX)

I can read english to some degree but I'm not good at writing.
Then I appologize for any rudeness.
I don't know well about wicket but I think it very good.
I want to deploy on wicket Javascript application made by LibGDX ,but on wicket's HTML file it does not work.
LibGDX logo was shown but next is not.(Maybe it seems to be not found next file (xxxx.cache.html) ??)
Please Tell me how to work Javascript(GWT) application on wicket.
Chrome shows this error.
Uncaught ED5709743BB488EF40123B0ADA51D171.cache.html:84393
com.badlogic.gdx.utils.GdxRuntimeException: Invalid assets description file.
My Javascript application is made by GWT which is client only created by LibGDX.
(LibGDX is multi platform game framework.
It can create WebGL application from java by GWT compiled.)
I think it can work in wicket because this GWT application is client only.
Javascript application is
assets
|...(many files used in game)
|-com
|-badlogic
|-gdx
|-...(some directory)
html
|html.nocache.js
|A0B51A68A37B38F9FF8A8855EDF848C7.cache.html
|Bxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.cache.html
|Cxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.cache.html
|ED5709743BB488EF40123B0ADA51D171.cache.html
|Exxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.cache.html
|hosted.html
|soundmanager2.swf
|logo.png
|....(many files)
|-gwt
|-chrome
|chrome_rtl.css
|chrome.css
|-images
|-...(some directory)
|...(some files)
soundmanager2-jsmin.js
soundmanager2-setup.js
styles.css
My Javascript application can work in Struts JSP(deployment under webapp).
I wrote at wicket in this way :
src/main/java/.../testwicket/page/xxx.html
<!doctype html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
<title>wicket + gwt(client only) test</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="soundmanager2-setup.js"></script>
<script src="soundmanager2-jsmin.js"></script>
</head>
<body>
<a class="superdev" href="javascript:%7B%20window.__gwt_bookmarklet_params%20%3D%20%7B'server_url'%3A'http%3A%2F%2Flocalhost%3A9876%2F'%7D%3B%20var%20s%20%3D%20document.createElement('script')%3B%20s.src%20%3D%20'http%3A%2F%2Flocalhost%3A9876%2Fdev_mode_on.js'%3B%20void(document.getElementsByTagName('head')%5B0%5D.appendChild(s))%3B%7D">SuperDev Refresh</a>
<div align="center" id="embed-html"></div>
<script type="text/javascript" src="html/html.nocache.js"></script>
</body>
<script>
function handleMouseDown(evt) {
evt.preventDefault();
evt.stopPropagation();
evt.target.style.cursor = 'default';
}
function handleMouseUp(evt) {
evt.preventDefault();
evt.stopPropagation();
evt.target.style.cursor = '';
}
document.getElementById('embed-html').addEventListener('mousedown', handleMouseDown, false);
document.getElementById('embed-html').addEventListener('mouseup', handleMouseUp, false);
</script>
</html>
Javascript application is in
src/main/webapp/
|-assets
|-html
soundmanager2-jsmin.js
soundmanager2-setup.js
style.css
Even if this code is added in GWT, it do not work(I don't call this code from java...Should I call it?).
public static native void setWindowHref(String url)/*-{
$wnd.location.href = url;
}-*/;

Bing maps: Specified credentials invalid

I can't seem to get Bing to accept my API key from my dev server-- I've set up an API key from the bingmapsportal.com site, and set the URL to http://localhost and generated the key successfully.
I then implement the map as shown in the API docs, as follows:
<html>
<head>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
function getMap(){
var mapInitOpts = {
credentials: 'mycredentials',
mapTypeId: Microsoft.Maps.MapTypeId.road
};
var map = new Microsoft.Maps.Map(document.getElementById("map_canvas"), mapInitOpts);
}
</script>
</head>
<body onload="getMap();">
<div id='map_canvas' style="position:absolute; top:0px; left:0px; width:100%; height:100%;"></div><br />
</body>
</html>
// map shows invalid credentials error
However, I always get the "Specified credentials invalid" message.
Any ideas on this issue?
Assuming you had 'mycredentials' act as a place holder for your actual credentials for this question posting, try using the API key from the interactive SDK:
AjtUzWJBHlI3Ma_Ke6Qv2fGRXEs0ua5hUQi54ECwfXTiWsitll4AkETZDihjcfeI
If the above works, and the key you obtained doesn't, then something is wrong with your key and you need to work with Bing Dev Support.
If the above key doesn't work, then there is something wrong with your development environment...