I am building a sample MVC4 web application, my aim is to learn and master working with the Bing Maps API, but I'm afraid it is not going well.
I am following this tutorial, but when I reload my page, I do not get a map, where the map is suppose to show, I just see blank background colour ! even after getting the API Key, and putting it into the script on my page ! No map is showing !
Here is my script code:
<script type="text/javascript">
var map = null;
function getMap()
{
var boundingBox = Microsoft.Maps.LocationRect.fromLocations(new Microsoft.Maps.Location(47.618594, -122.347618), new Microsoft.Maps.Location(47.620700, -122.347584), new Microsoft.Maps.Location(47.622052, -122.345869));
map = new Microsoft.Maps.Map(document.getElementById('myMap'), { credentials: 'MyKeyGoesHere', bounds: boundingBox });
}
</script>
There are several things to consider in your implementation.
Add the script reference to the Bing Maps API
Add the HTML element and required information in your web page
Add the load event and fire your getMap() method (using an onload event set on the body or dynamicaly by code)
See the MSDN to help you in your first implementation:
http://msdn.microsoft.com/en-us/library/gg427624.aspx
Here is a sample static page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" charset="UTF-8" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0">
</script>
<script type="text/javascript">
var map = null;
function getMap() {
var boundingBox = Microsoft.Maps.LocationRect.fromLocations(
new Microsoft.Maps.Location(47.618594, -122.347618),
new Microsoft.Maps.Location(47.620700, -122.347584),
new Microsoft.Maps.Location(47.622052, -122.345869));
map = new Microsoft.Maps.Map(
document.getElementById('myMap'),
{
credentials: 'YOURKEY',
bounds: boundingBox
});
}
</script>
</head>
<body onload="getMap();">
<div id="myMap" style="position: relative; width: 800px; height: 600px;">
</div>
</body>
</html>
Related
I was trying to convert the basic viewer example code into a simple vue.js viewer app. When I try to run `npm run serve'(vue-cli).Things are getting rendered correctly and I am getting all the console logs in the console.
But even before the script getting executed the eslint-loader is showing Autodesk is not defined error. But I can see the viewer loaded the document in the background.I will attach a screenshot of it here.
Can someone correct me with the code for creating a basic viewer as a simple vue.js app?
/public/index.html
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<!-- Autodesk Forge Viewer files -->
<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css" type="text/css">
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.min.js"></script>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
/src/App.vue
<div id="forgeViewer"></div>
</template>
<script>
export default {
mounted(){
var viewer;
var options = {
env: 'AutodeskProduction',
api: 'derivativeV2', // for models uploaded to EMEA change this option to 'derivativeV2_EU'
getAccessToken: function(onTokenReady) {
var token = 'eyJhbGciOiJIUzI1NiIsImtpZCI6Imp3dF9zeW1tZXRyaWNfa2V5In0.eyJzY29wZSI6WyJidWNrZXQ6Y3JlYXRlIiwiYnVja2V0OnJlYWQiLCJkYXRhOnJlYWQiLCJkYXRhOndyaXRlIl0sImNsaWVudF9pZCI6Ikp2Vk40bzdBQ0V0ZE81TVpnZ21QMk9WM1RoNFJnRW54IiwiYXVkIjoiaHR0cHM6Ly9hdXRvZGVzay5jb20vYXVkL2p3dGV4cDYwIiwianRpIjoiMXBQcVhxOFBZVVU0WmtpTURsaGpUSUxCM3I1UEpBWk9kbTY4dTY2R1ZjajhDY3VzYjB3VFVId0E3emZPVk5JRCIsImV4cCI6MTU4ODIzNDEwOX0.zmY_BFmoZgL4TbtSVyTWKlrFdImEKbQTUsfQxBjsPV4';
var timeInSeconds = 3600; // Use value provided by Forge Authentication (OAuth) API
onTokenReady(token, timeInSeconds);
}
};
Autodesk.Viewing.Initializer(options, function() {
var htmlDiv = document.getElementById('forgeViewer');
viewer = new Autodesk.Viewing.GuiViewer3D(htmlDiv);
var startedCode = viewer.start();
if (startedCode > 0) {
console.error('Failed to create a Viewer: WebGL not supported.');
return;
}
console.log('Initialization complete, loading a model next...');
});
var documentId = 'urn:dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6ZmFjaWxpb25ld2NsaWVudGJ1Y2tldC9yYWNfYWR2YW5jZWRfc2FtcGxlX3Byb2plY3QucnZ0';
Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
}
},
methods:{
onDocumentLoadSuccess:function(viewerDocument){
var defaultModel = viewerDocument.getRoot().getDefaultGeometry();
viewer.loadDocumentNode(viewerDocument, defaultModel);
viewer.addEventListener( Autodesk.Viewing.SELECTION_CHANGED_EVENT, event=>{
})
},
onDocumentLoadFailure:function(){
console.error('Failed fetching Forge manifest');
}
}
}
</script>
<style>
</style>
You have to fix your Eslint errors one by one.
1.- Declare autodesk as a global in .eslintrc
"globals": {
"Autodesk": true
}
2.- Declare viewer
const viewer = new Autodesk.Viewing.GuiViewer3D(htmlDiv);
3.- Remove event listeners if not being used or just console.log(event)
Alternatively you can disable eslint but I'd never recommend that.
check out these working samples here:
https://github.com/dukedhx/forge-tools-hub/blob/master/components/Viewer.vue
https://github.com/alvpickmans/forge-vuer
In the main.js you can add:
Vue.prototype.$Autodesk = window.Autodesk;
And use it in the vue components like below:
this.$Autodesk
I am trying to fetch and display a map from the arcgis server using Aptana IDE. It says l is undefined.
GET https://gistest2.xxx.xxx/arcgis/rest/info?f=json
200 OK 27ms TypeError: l is undefined
...x)<=p.dx)&&q._addFrameInfo(h,p);this.setExclusionAreas(this.exclusionAreas);this...
Here is the entire code except the URL I am trying to hit.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>BGSU Memorial Trees Location</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
<script src="http://js.arcgis.com/3.10/">
</script>
<script>
var map;
require(["esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "dojo/domReady!"],
function (Map, ArcGISTiledMapServiceLayer ) {
map = new Map("map", {
center: [-76.756, 40.241],
zoom: 8
});
var customBasemap = new ArcGISTiledMapServiceLayer(
"https://XXX/");
map.addLayer(customBasemap);
});
</script>
</head>
<body class="claro">
<div align="center"><strong>BGSU Memorial Trees Listing </strong><hr>
<i><a target="_self" href="listingtrees.html">Listing</a> | <a target="_self" href="locationtrees.html">Locations </a></i>
</div>
<br>
<div id="map" >
</div>
</body>
</html>
Any help is highly appreciated.
Thanks in Advance!
In the constructor of ArcGISTiledMapServiceLayer you have to specify the URL of an ArcGIS tiled map service. Example of URL:
http://myserver/arcgis/rest/services/map_service_name/MapServer
The address you specified (arcgis/rest/info?f=json) is the address of the REST service of ArcGIS Server but doesn't point to a Map service.
I am creating a app that can be displayed outside rally. I created a login key for a read-only user as described in the documentation and substituted it for [loginkey] in the code below. When i try to access the app I am being asked for user credentials again. When i cancel the authentication dialog i receive a 401 error in the developer tools in the browser. Please find my code below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>LoginKey</title>
<!--App information-->
<meta name="Name" content="App: LoginKey"/>
<meta name="Version" content="1.0"/>
<meta name="Vendor" content=""/>
<!--Include SDK-->
<script type="text/javascript" src="https://rally1.rallydev.com/apps/1.32/sdk.js?loginkey=[loginkey]"></script>
<script type="text/javascript">
function onLoad() {
var rallyDataSource = new rally.sdk.data.RallyDataSource(
'__WORKSPACE_OID__',
'__PROJECT_OID__',
'__PROJECT_SCOPING_UP__',
'__PROJECT_SCOPING_DOWN__');
rallyDataSource.setApiVersion("1.43");
var config = {type: "hierarchicalrequirement", columnKeys:["FormattedID", "Name"]};
var table = new rally.sdk.ui.Table(config, rallyDataSource);
table.display("tableDiv");
}
rally.addOnLoad(onLoad);
</script>
<style type="text/css">
.loginKey {
/* Add app styles here */
}
</style>
</head>
<body class="loginKey">
<div id="tableDiv" style="float:left;width:400px"></div>
</body>
</html>
The issue was with the name of the parameter. I was using loginkey for the name of the parameter while it was actually supposed to be loginKey
I am trying to create an HTML page to access Rally reports external of Rally. The below code is modified sample code where I am trying to show a burndown chart with my login key, workspace, and project keys removed. When opening the html file, the chart shows, but no data is shown on the chart. What am I doing wrong? BTW, if I add this same code in a custom app inside of Rally, the burndown chart shows just fine.
Thanks in advance.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta name="Name" content="Rally Iteration Burndown Report" />
<meta name="Version" content="2011.04" />
<meta name="Vendor" content="Rally Software" />
<script type="text/javascript" src="https://rally1.rallydev.com/apps/1.26/sdk.js?loginKey=MyValidLoginKey"></script>
<script type="text/javascript" src="/apps/1.26/sdk.js"></script>
<script type="text/javascript">
function initPage() {
var rallyDataSource = new rally.sdk.data.RallyDataSource("MyValidWorkspaceID","MyValidProjectID","true","false");
var config = {
report: rally.sdk.ui.StandardReport.IterationBurndown,
width : 800,
height: 400
};
var report = new rally.sdk.ui.StandardReport(config);
report.display("aDiv");
}
rally.addOnLoad(initPage);
</script>
</head>
<body>
<div id="aDiv"></div>
</body>
</html>
Please add iteration Object ID to the config:
iterations: 11111111
as in the example below
var config = {
report: rally.sdk.ui.StandardReport.IterationBurndown,
width : 400,
height: 300,
iterations: 111111
};
If you have a parent iteration in the parent project and children iterations in children projects, and you use only the OID of the parent iteration the data will not roll up on its own. If you want the data to aggregate, please use multiple iterations in the config object:
iterations: [11111,2222222]
I am new to javascript and dojo, and am trying to write code to navigate to
another URL dynamically. This seems easy to do with javascript, but I can't
get it to work with dojo/on.
Here is my example code. The trivial callback works fine. The dojo/on callback
invokes the callback, but the new page never appears. I have to do this
dynamically and with dojo because, well just because my project requires it.
Anyone know why this is failing and how to make it work?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js">
</script>
<script type="text/javascript">
callback = function() {
window.location.href = "about:blank";
console.debug("callback invoked");
}
function init() {
var node = dojo.byId("test");
var childNode = dojo.create("a", { href : "" }, node);
childNode.innerText = "dojo callback click here";
require(["dojo/on"], function(on){
on(childNode, "click", callback);
});
}
dojo.ready(init);
</script>
<div id="test">
<p>
trivial callback click here
</div>
Starting with Dojo 1.7, the AMD loader is the preferred way of using Dojo modules.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js"></script>
<script type="text/javascript">
require(['dojo/on', 'dojo/dom', 'dojo/domReady!'], function(on, dom){
on(dom.byId('theDiv'), 'click', function(){
alert("Click!") // replace this line with location changes
})
})
</script>
</head>
<body>
<div id="test">
Click Me
</div>
</body>
</html>
In this example, the core Dojo.js is loaded (as you requested), but the difference is I used the require method, attaching the click method of dojo/on to the div. Ideally, you would use separate javascript files to dictate the behavior of your page, but for this example, embedding the js into the index page is sufficient.
Using the parser, you can use declarative <script type="dojo/on" data-dojo-event="click">...</script>, but for a variety of reasons you should use programmatic parsing and use javascript files for maximum efficiency.
In addition, defining functions/methods/variables in the global scope:
<script type="text/javascript">
callback = function() {
window.location.href = "about:blank";
console.debug("callback invoked");
}
</script>
... isn't recommended and there are better alternatives.