For some reason when using the Google Earth Plugin with EXTJS it just gives me a white map.
Wish I could post an image although my reputation needs some work.
I include the following files when loading my app.
https://www.google.com/jsapi
/location_of_file/googleearth/Ext.ux.GEarthPanel-1.3.js
/location_of_file/googleearth/Ext.ux.GEarthPanel-1.3.css
/location_of_file/GoogleEarthStartup.js
The startup file contains.
google.load("earth", "1");
google.load("maps", "2.xx");
Do I need a key with the jsapi?
Please advice.
All browsers are giving me same issue.
We have GE plugin loading in an ExtJs container. HTML looks like:
<script type="text/javascript" src="scripts/globe/Globe.js"></script>
<script type="text/javascript" src="scripts/ext/ext-all-debug.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("earth", "1");
</script>
<script type="text/javascript">
Ext.onReady(function() {
Globe.initGlobe();
});
</script>
...
<body><!--Globe Panel is inserted here from Globe.js by Ext--></body>
The javascript class sets up a container with a div that we can target:
this.globeContainingPanel = Ext.create('Ext.container.Container', {
...
renderTo: Ext.getBody(),
items: [{
{
xtype: 'panel',
region: 'center',
html: '<div id="map3d"></div>'
}
}]
});
Then have the GE render to the div panel:
window.google.loader.ApiKey = 'ABCDEFGHIJKLMNOPgoogle.earth.ex.key';
window.google.loader.KeyVerified = true;
window.google.earth.allowUsageLogging = false;
google.earth.createInstance('map3d', this.initCallback, this.failureCallback);
Also, make sure you have the Google Earth plugin installed in your browser.
Related
I want to add google map layer to Esri BaseMapGallery control.
Everything was going well till I updated the web app to use latest ArcGIS JS API 3.19.
After that the BaseMapGallery doesn't change the map to any of google layers.
There is not error at console.
You can see live demo I've created her: https://jsbin.com/denoduquzi/edit?html,output
If I just downgrade Esri API version to 3.17 it will work fine, but it fails when upgrading to 3.18 or 3.19
<title>Basemap gallery</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.19/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.19/esri/css/esri.css">
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
#map{
padding:0;
}
</style>
<script>
var djConfig = {
async: true,
packages: [
{ name: "agsjs", location: "https://maps.ngdc.noaa.gov/viewers/dijits/agsjs/xbuild/agsjs" }
]
};
</script>
<script src="https://js.arcgis.com/3.19/"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
var map;
require([
"esri/map", "esri/dijit/BasemapGallery", "esri/arcgis/utils",
"dojo/parser",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/TitlePane","agsjs/layers/GoogleMapsLayer",
"dojo/domReady!"
], function(
Map, BasemapGallery, arcgisUtils,
parser
) {
parser.parse();
map = new Map("map", {
basemap: "topo",
center: [-105.255, 40.022],
zoom: 13
});
//add the basemap gallery, in this case we'll display maps from ArcGIS.com including bing maps
var basemapGallery = new BasemapGallery({
showArcGISBasemaps: true,
toggleReference: true,
google: {
apiOptions: {
v: '3.6'
}
},
map: map
}, "basemapGallery");
basemapGallery.startup();
basemapGallery.on("error", function(msg) {
console.log("basemap gallery error: ", msg);
});
});
</script>
<div data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'headline', gutters:false"
style="width:100%;height:100%;margin:0;">
<div id="map"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'center'"
style="padding:0;">
<div style="position:absolute; right:20px; top:10px; z-Index:999;">
<div data-dojo-type="dijit/TitlePane"
data-dojo-props="title:'Switch Basemap', closable:false, open:false">
<div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">
<div id="basemapGallery"></div>
</div>
</div>
</div>
</div>
</div>
I felt I should mention it. I think that's not allowed to consume Google Maps content from third party APIs -> Google Maps Terms of Use (section 10.1):
No access to APIs or Content except through the Service. You will not access the Maps API(s) or the Content except through the Service. For example, you must not access map tiles or imagery through interfaces or channels (including undocumented Google interfaces) other than the Maps API(s).
Besides that, technically there is no problem on doing it like this:
//Adding Google Imagery Basemap
var mapGMapSat = new Basemap({
layers: [new BasemapLayer({
type: "WebTiledLayer",
url : "https://mts1.google.com/vt/lyrs=s#186112443&hl=x-local&src=app&x={col}&y={row}&z={level}&s=Galile",
copyright: "Google Maps"
})],
id: "gmapsat",
thumbnailUrl: "https://maps.ngdc.noaa.gov/viewers/dijits/agsjs/xbuild/agsjs/dijit/images/googlehybrid.png",
title: "Google Imagery"
});
basemapGallery.add(mapGMapSat);
As you can see here: https://jsbin.com/rabacoq
I wrote html page with simplest graph. It contain only one node.
In FireFox it's showed well, but Safari (5.1.7 fo Windows) does not show it.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
</head>
<body>
<div id="cy" style="height:100%;width:100%;position:absolute;left:0;top:0;"></div>
</body>
</html>
<script>
$(function(){ // on dom ready
$("#cy").cytoscape({
elements: [ { group: 'nodes', data: { id: 'a', name: 'Adam' } } ],
ready: function(){
}
});
alert('END');
}); // on dom ready
</script>
Moreover I use function alert('END') to check that everything is ok.
And FireFox shows message 'END', but Safari does not.
Only if I remove line 'elements: [ ... ]', then Safari shows message 'END'.
Any idea?
Cytoscape.js uses HTML5 technologies such that only A-grade autoupdated browsers are supported. Safari 5 is very old, and I don't think it's supported on Windows anymore.
I have simplest implementation of CardBoard:
<!DOCTYPE html>
<html>
<head>
<title>CardBoard Example</title>
<script type="text/javascript" src="/apps/2.0p5/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function() {
Ext.define('CustomApp', {
extend: 'Rally.app.App',
launch: function() {
var cardBoardConfig = {
xtype: 'rallycardboard',
types: ['User Story'],
attribute: "ScheduleState"
};
this.add(cardBoardConfig);
}
});
Rally.launchApp('CustomApp', {
name: 'CardBoard Example'
});
});
</script>
<style type="text/css">
</style>
</head>
<body></body>
</html>
Very annoying issue occurs after each drag and drop action: page refreshes.
Also I've noticed some bug that prevents page from reloading. Steps to reproduce:
Open page with code above;
Change project scope;
Drag and drop card;
You will see javascript error in browser console that prevent page from refreshing.
How can I prevent page refreshing after Card drag and drop action in case when there are no javascript Rally SDK errors?
It's caused by a poor handling of the objectUpdate message by the parent window. When the card is dropped, the objectUpdate message is fired (correctly), but the Custom HTML panel handles it by refreshing the app. I've filed a bug with Rally to fix it.
To overwrite this behavior, add this after Rally.onReady:
if(window.parent) {
window.parent.RALLY.ui.dashboard.PanelPanel.prototype.onObjectModificationMessage = function(){};
}
So the entire code looks like:
<!DOCTYPE html>
<html>
<head>
<title>CardBoard Example</title>
<script type="text/javascript" src="/apps/2.0p5/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function() {
if(window.parent) {
window.parent.RALLY.ui.dashboard.PanelPanel.prototype.onObjectModificationMessage = function(){};
}
Ext.define('CustomApp', {
extend: 'Rally.app.App',
launch: function() {
var cardBoardConfig = {
xtype: 'rallycardboard',
types: ['User Story'],
attribute: "ScheduleState"
};
this.add(cardBoardConfig);
}
});
Rally.launchApp('CustomApp', {
name: 'CardBoard Example'
});
});
</script>
<style type="text/css">
</style>
</head>
<body></body>
</html>
Here is a similar question with a slightly different answer that should work for you as well:
App works as desired in debug mode but crashes in Rally environment
The dojo api doesn't seem to load on my system (IE 8, Windows 7 with IIS 7.5). I try to test these examples by linking to the dojo api like this
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js"></script>
<script type="text/javascript">
dojo.require("dojo.lang.*");
dojo.require("dojo.widget.Tree");
</script>
I also downloaded the library to link to it directly like this.
<script type="text/javascript" src="dojo.js">/*_*/</script>
<script type="text/javascript">
dojo.require("dojo.lang.*");
dojo.require("dojo.widget.Tree");
</script>
But got the same result. The library scripts don't load the treeview. Are there issues with IE8, Windows 7 or IIS 7.5 for the dojo libary 1.6.1?
Do you know of a treeview with this functionality: MySQL database support, context menu, add/delete node, hyperlink in tree support?
Thanks.
Complete HTML file where the dojo api doesn't load.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
<!-- load Dojo -->
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js"></script>
<script type="text/javascript">
dojo.addOnLoad() {
dojo.require("dojo.lang.*");
dojo.require("dojo.widget.Tree");
}
</script>
<script type="text/javascript">
var treeDat = {
treeNodes: [
{ title:"World" },
{ title:"Business",
children:[
{ title:"News",
children:[
{ title:"Main"},
{ title:"Company News" },
{ title:"Economy" }
]
},
{ title:"Markets" },
{ title:"Technology" },
{ title:"Jobs and Economy" }
]
},
{ title:"Sports" }
]
};
</script>
<script type="text/javascript">
var TreeBuilder = {
buildTreeNodes:function (dataObjs, treeParentNode){
for(var i=0; i<dataObjs.length;i++){
var node = dojo.widget.createWidget("TreeNode",{
title:dataObjs[i].title,
expandLevel:99,
widgetId:(((treeParentNode)?treeParentNode.widgetId:"root_")+"_"+i)
});
treeParentNode.addChild(node);
treeParentNode.registerChild(node,i);
if(dataObjs[i].children){
this.buildTreeNodes(dataObjs[i].children, node);
}
}
},
buildTree:function (){
var myTreeWidget = dojo.widget.createWidget("Tree",{
widgetId:"myTreeWidget",
DNDMode:"between",
DNDAcceptTypes:["myTreeWidget"]
});
this.buildTreeNodes(treeDat.treeNodes,myTreeWidget);
var treeContainer = document.getElementById("myWidgetContainer");
var placeHolder = document.getElementById("treePlaceHolder");
treeContainer.replaceChild(myTreeWidget.domNode,placeHolder);
}
}
function addTreeContextMenu(){
var djWdgt = dojo.widget;
var ctxMenu = djWdgt.createWidget("TreeContextMenu",{});
ctxMenu.addChild(djWdgt.createWidget(
"TreeMenuItem",{caption:"Add Child Menu Item"}));
ctxMenu.addChild(djWdgt.createWidget(
"TreeMenuItem",{caption:"Delete This Menu Item"}));
document.body.appendChild(ctxMenu.domNode);
var myTree = dojo.widget.manager.getWidgetById("myTreeWidget");
/* Bind the context menu to the tree */
ctxMenu.listenTree(myTree);
}
dojo.addOnLoad(function(){
TreeBuilder.buildTree();
addTreeContextMenu();
});
</script>
</head>
<body>
<h1>Programmatic Dojo Tree Demo</h1>
<hr />
<div id="myWidgetContainer"
style="width: 17em; border: solid #888 1px; height:300px;">
<span id="treePlaceHolder"
style="background-color:#F00; color:#FFF;">
Loading tree widget...
</span>
</div>
</body>
</html>
You need to wrap the dojo.require calls in the dojo.addOnLoad function. This is required when using Dojo cross-domain build.
See more at http://dojotoolkit.org/reference-guide/quickstart/cross-domain.html
dojo.addOnLoad(function() {
dojo.require("dojo.lang.*");
dojo.require("dojo.widget.Tree");
});
I donwloaded this release, and I'm trying to run an example from the docs.
After expanding the Dojo download, my dojo dir is:
js/dojo-release-1.5.0/dijit
js/dojo-release-1.5.0/dojo
js/dojo-release-1.5.0/dojox
The buttons show up, but hide button does not hide the div.
Do I need to add other Dojo libraries along with the reference to dojo.js?
<script type="text/javascript" language="JavaScript" src="/js/dojo-release-1.5.0/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("dijit.form.Button");
dojo.addOnLoad(function() {
var node = dojo.byId("findMe");
dojo.connect(dijit.byId("buttonOne"), "onClick", function() {
dojo.fadeOut({
node: node,
duration: 300
}).play();
});
dojo.connect(dijit.byId("buttonTwo"), "onClick", function() {
dojo.fadeIn({
node: node,
duration: 300
}).play();
})
});
HTML:
<button dojoType="dijit.form.Button" id="buttonOne">
Hide Me!
</button>
<button dojoType="dijit.form.Button" id="buttonTwo">
Show Me!
</button>
<div id="findMe">
Hiya!
</div>
There are a couple of things you may be missing. As Daniel says, adding parseOnLoad=true as a djConfig param will help. Alternatively you can add djConfig params as a global JS variable before your dojo.js script tag, i.e.
<script>
var djConfig = {
parseOnLoad: true
}
</script>
A final alternative is to manually call the parser yourself. To do this, modify your JS to:
dojo.require("dijit.form.Button");
// You need to manually require the parser if you're going to call it yourself
dojo.require("dojo.parser");
dojo.addOnLoad(function() {
var node = dojo.byId("findMe");
dojo.connect(dijit.byId("buttonOne"), "onClick", function() {
dojo.fadeOut({
node: node,
duration: 300
}).play();
});
dojo.connect(dijit.byId("buttonTwo"), "onClick", function() {
dojo.fadeIn({
node: node,
duration: 300
}).play();
})
// New line, parse the doc
dojo.parser.parse();
});
Additionally to parsing, you may need to add a theme (you've not mentioned if you've done this or not). The easiest way to do this is to add the class name to your body tag and import the css.
...
<link rel="stylesheet" type="text/css" href="/js/dojo-release-1.5.0/dijit/themes/claro/claro.css">
</head>
<body class="claro">
...
</body>
http://telliott.net/dojoExamples/dojo-buttonHelloWorld.html contains an example of this all working for you, feel free to go crib.
Reading http://dojotoolkit.org/reference-guide/djConfig.html#djconfig and http://dojotoolkit.org/reference-guide/dijit/info.html#dijit-info would probably be a good idea also.
HTH.
Tom
try adding djConfig="parseOnLoad:true" when add the dojo.js to the page.
ex:
<script type="text/javascript" language="JavaScript" src="/js/dojo-release-1.5.0/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
//Daniel