I'm using "js.arcgis.com/3.7" to implement esri maps. Sometime when i try to load page, I get below error and map doesn't load.
Error:
http://js.arcgis.com/3.9/js/dojo/jquery.js Failed to load resource: the server responded with a status of 404 (Not Found)
scriptError(…)(anonymous function) # init.js:40 (console.error(a))
Below is my code:
require([
"esri/map",
"esri/toolbars/draw",
"dojo/parser",
"esri/dijit/LocateButton",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/form/Button",
"dijit/WidgetSet",
"dojo/domReady!"
], function (
Map,
Draw,
parser,
LocateButton
) {
parser.parse();
var opts = {
basemap: "topo",
center: [-103.08, 44.05],
zoom: 17
};
map = new Map("mapDiv", opts);
geoLocate = new LocateButton({
map: map
}, "LocateButton");
geoLocate.startup();
}
});
To clarify, you're using the 3.7 JS API, but are getting an error referencing the 3.9 API?
Moreover, is there a reason you're not using the newest (3.18) API?
I'd have to see a full stack trace, but it's difficult to see why Esri would be referencing a module from a newer version of its API. They've provided a resource for their 3.18 API on using jQuery with Dojo, if you decide to switch to the newest version:
https://developers.arcgis.com/javascript/3/jssamples/framework_jquery.html
That said, I don't see any references to jQuery in your code, so without more information I'd imagine the issue is a broken internal reference in their 3.7 API.
Related
I have this weird issue while using ArcGIS API for JavaScript v4.4 in my code. I am trying to build an Excel Web Add-in in which I would like to load an ArcGIS map but when I load ArcGIS I get a multipleDefine error.
ArcGIS is getting bundled with Dojo which is used as the loader for all the ArcGIS/esri packages. I have no other choices to load my own custom JS bundles with Dojo because of the way ArcGIS has built their API. So I can't decide to not use Dojo and thus not getting the multipleDefine error.
I load my own JS files like this:
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
<script>
var dojoConfig = {
parseOnLoad: false,
async: false,
// we make aliases for our js file
aliases: [
['index', './Bundles/index.js'],
],
};
</script>
<script src="https://js.arcgis.com/4.4/init.js"></script>
<script>
require(['index'], function (index) {
//...do something
});
</script>
When I restart the page I get a multipleDefine error once in every two/three trials. After a lot of investigation I understood that the error lies with the Office.js API but I had a hard time to find a good solution.
After a while I found the cause of the problem; we cannot start office-js and Dojo together because they both want to add scripts in the head tag of our page and somehow they end up in conflict with one another, thus we get the dreaded multipleDefined Dojo error and some of our files do not get loaded.
Once this cause was identified I decided to solve it by making sure Dojo, Argis and my custom js files got loaded once Office and dependencies were fully loaded.
I implemented it like this in my js code:
// This Dojo config variable has to be defined before Dojo is loaded in our scripts
var dojoConfig = {
// we make aliases for our custom js file
aliases: [
['index', './Bundles/index.js'],
],
// We require our dependencies (our own code bundles) with Dojo.
// Notice that it is mandatory to bundle our js files
// as AMD Modules for Dojo to be able to load them as dependencies.
deps: ['index'],
};
// Once office has fully initialized we can add our arcgis file and let
// him load our own required javascript files.
// We cannot start Office-js and Dojo/Arcgis together because they both
// want to add scripts in the head tag of the HTML page and
// somehow they end up in conflict, thus we get the dreaded
// multipleDefined Dojo error and some of our files
// do not get loaded.
Office.initialize = function (reason) {
// we manually add the Arcgis script to the header of our page
// once we are sure Office and dependencies has fully loaded.
var tag = document.createElement('script');
tag.src = 'https://js.arcgis.com/4.4/init.js';
document.getElementsByTagName('head')[0].appendChild(tag);
};
Once this was added the code started working like a charm.
I try to use Arcgis javascript API in Liferay 7.0 but it's fail. I think because Liferay 7.0 using requireJS for using javascript which conflict with dojo of Arcgis javascript API. I am using this code for implement Arcgis API:
<script type="text/javascript" src="<%=request.getContextPath() %>/js/arcgis_js_api/library/3.14/3.14/init.js"></script>
<script>
require([
"esri/map", "dojo/dom"
], function(Map, dom) {
var map = new esri.Map("map", {
basemap: "topo", //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
center: [-122.45, 37.75], // longitude, latitude
zoom: 13
});
});
This is console log:
java.lang.IllegalArgumentException: Path esri/map.js does not start with a "/" character
java.lang.IllegalArgumentException: Path dojo.js does not start with a "/" character
This is javascript error:
Error: defineAlreadyDefined
Anyone has solution help me please. Thanks!
As you mention Liferay7 and your script tag makes use of <%=request.getContextPath()%>, you most likely have a mismatch between your portlet and the servlet API: request is not aware of any portlet context (but is still there, because JSPs have been designed for servlets and it's a mandatory object that's around, irritating a lot of people)
The URLs for your own Javascript files are just not relative to the context root, but Liferay makes them available on a different path. The easiest way, without messing around with this location, is to just mention the file you'd like to include in your portlet's configuration. In Liferay 7 OSGi portlet modules, it works like this (pseudocode, simplified)
#Component(
immediate = true,
property = {
"com.liferay.portlet.footer-portlet-javascript=/js/main.js",
"javax.portlet.display-name=My Portlet",
},
service = Portlet.class
)
In JSR-286 portlets packaged in WARs, you'd use the footer-portlet-javascript value in WEB-INF/liferay-portlet.xml.
Alternatively, use the header-* variant.
I personally prefer this way over memorizing how the path of resources is being constructed.
I use this code before implement arcgis (javascript):
if(typeof define !== "undefined" && typeof require !== "undefined"){
window.__define = window.define;
window.__require = window.require;
window.define = undefined;
window.require = undefined;}
It will be resolved.
I've been struggling days to get my KML-File working on a Google Maps API. I originally downloaded a GPX-File and made it to .kml to use it on my Maps.
Here's the HTML code:
<script type="text/javascript">
function initialize()
{
var mapProp = {
center: new google.maps.LatLng(47.2769,8.650017),
zoom:9,
panControl:true,
zoomControl:false,
mapTypeControl:true,
scaleControl:false,
streetViewControl:false,
overviewMapControl:false,
rotateControl:false,
mapTypeId:google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapProp);
var ctaLayer = new google.maps.KmlLayer({
url: 'kml/route.kml'
});
ctaLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
What seems to be the problem? The Map gets displayed, but the Layer with KML-information does not appear. Does it have to do with a connection error to Google? My Firebug Console keeps reporting me network errors like:
"NetworkError: 407 authenticationrequired - https://maps.gstatic.com/intl/de_de/mapfiles/api-3/15/0/main.js"
BTW The KML File seems to be OK. I uploaded it on Google Maps and it does work.
Does anyone know a better solution to get my GPX cyclingcourse displayed on Google Maps?
You should host your kml file somewhere.
https://developers.google.com/kml/articles/pagesforkml?hl=en
With our update to XPages version 9 and the Esri ARcgis javascript api v 3.5, we're having problems with our dojo namespaces resulting in a defineAlreadyDefined error. There are a few similar problems listed here (Using Durandal dojoConfig and ESRI Maps, How can I fix this AMD path conflict?), but even with that help we are unable to get it working. I believe the issue is the dojoConfig syntax - any thoughts or help would be appreciated!
Here is a simple version of our xpage source code with js:
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:this.resources>
<xp:styleSheet
href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dijit/themes/claro/claro.css">
</xp:styleSheet>
<xp:styleSheet
href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css">
</xp:styleSheet>
<xp:script clientSide="true">
// dojo.registerModulePath("esri","http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri");
dojoConfig = {
baseUrl: "http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri",
packages: [
{
name: 'dojo',
location: "http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dojo/"
},
{
name: 'dojox',
location: "http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dojox"
},
{
name: 'esri',
location: "http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri"
}
]};
</xp:script>
<xp:script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/"
clientSide="true">
</xp:script>
<xp:dojoModule name="esri.map"></xp:dojoModule>
</xp:this.resources>
<xp:eventHandler event="onClientLoad" submit="false">
<xp:this.script><![CDATA[var map;
function init(){
var map = new esri.Map("mapDiv", {
center: [-56.049, 38.485],
zoom: 3,
basemap: "streets"
});
}
dojo.ready(init);
]]></xp:this.script>
If we include the dojo.registerModulePath command, the map does load (at least in FF), but with the error. Without it, the esri dojo doesn't load - it's looking in the wrong place for the esri files.
There are few things you need to keep in mind, and probably change the code accordingly:
xPages already makes use of dojoconfig, either through xsp-config
file options or using xPages parameters.
As mentioned by Per, dojo is already used in xPages, so you don't need to load it from somewhere else (same applies to the CSS).
What you can do is following:
Option 1: Use offline copies of JS library for maps. You can add them
to your xPages app as JS resources. You will only have to specify
them in your xPage, and load dojo module as you do already;
Option 2: See below how to inject more dojoConfig options before a xPage will load
Code:
<xp:this.properties>
<xp:parameter name="xsp.client.script.dojo.djConfig" value="packages: exPackages" />
</xp:this.properties>
<xp:this.beforePageLoad>
<![CDATA[#{javascript:
var exCon = facesContext.getExternalContext();
var response = exCon.getResponse();
var writer = response.getWriter();
writer.write("<script>\n");
writer.write("var exPackages=[{name:'esri',location:'http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri'}]\n");
writer.write("</script>\n");
}]]>
</xp:this.beforePageLoad>
<xp:this.resources>
<xp:dojoModule name="esri.map"></xp:dojoModule>
</xp:this.resources>
Update: Small correction of code.
Update2: After briefly checking ArcGis website, it seems they choose to provide Dojo together with their API (which is wrong in my opinion). See https://developers.arcgis.com/en/javascript/jshelp/inside_dojoversion.html (part2), although it will not help you much as they don't provide a feasible solution for Dojo 1.8.x
Seeing that their API is not free, I think the best way would be to contact them, ask for ESRI part of the API as separate download, host it on your own servers and follow either Option 1 or 2. Moreover, the version of API you try to use is based on Dojo 1.8.3, while Domino 9 has Dojo 1.8.
OK, this was a problem for me too!
I've been able to get it working by using the following code:
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:this.resources>
<xp:script clientSide="true">
dojo.registerModulePath("esri","http://js.arcgis.com/3.8/js/esri");
dojoConfig = { baseUrl: "http://js.arcgis.com/3.8/js/esri",
packages: [ { name: 'esri', location: "http://js.arcgis.com/3.8/js/esri" } ]};
</xp:script>
<xp:styleSheet href="http://js.arcgis.com/3.8/js/esri/css/esri.css" />
<xp:styleSheet href="http://js.arcgis.com/3.8/js/esri/dijit/css/Popup.css" />
<xp:dojoModule name="esri.map"></xp:dojoModule>
</xp:this.resources>
<xp:eventHandler event="onClientLoad" submit="false">
<xp:this.script><![CDATA[var map;
function init(){
var map = new esri.Map("mapDiv", {
center: [0,53],
zoom: 10,
basemap: "streets"
});
}
dojo.ready(init);
]]></xp:this.script>
</xp:eventHandler>
<div id="mapDiv" style="width:1000px;height:600px"></div>
</xp:view>
I think the order of scripts is important and you don't need to include the esri.map script twice.
Right now I'm in the process of creating a Chrome extension. For it, I need to use Google's Calendar Data API. Here is my manifest.json file:
{
"name": "Test",
"version": "1.0",
"background_page": "background.html",
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["jquery.js", "content_script.js"]
}
],
"permissions": [
"tabs", "http://*/*"
]
}
I've tried adding the following to the js part of the manifest file but that throws an error when loading the extension.
http://www.google.com/jsapi?key=keyhere
I've also tried adding
document.write('<script type="text/javascript" src="http://www.google.com/jsapi?key=keyhere"></script>');
to my background.html file. However, whenever I call
google.load("gdata", "1");
I get an error that says Uncaught ReferenceError: google is not defined. Why is my extension not loading this api when it loads the other ones fine?
You can't include external script into content_scripts.
If you want to inject <script> tag using document.write then you need to mask slash in a closing tag:
document.write('...<\/script>');
You can include your external api js into background page just as usual though:
<script type="text/javascript" src="http://www.google.com/jsapi?key=keyhere"></script>
If you need this api in content scripts then you can send a request to your background page and ask it to do API-dependent stuff there, and then send a result back to your content script.
Thanks for that link, it helped a lot. However, now I've run into another interesting problem.
for (var i = rangeArray.length - 1; i >= 0; i--) {
var myLink = document.createElement('a');
myLink.setAttribute('onclick','helloThere();');
myLink.innerText ="GO";
rangeArray[i].insertNode(myLink);
}
Now I get the error, "helloThere is not defined" even though I placed that function about ten lines above the current function that has the above loop in the same file. Why might this be happening? And if I do:
for (var i = rangeArray.length - 1; i >= 0; i--) {
var myLink = document.createElement('a');
myLink.setAttribute('onclick','chrome.extension.sendRequest({greeting: "hello"}, function(response) { });');
myLink.innerText ="GO";
rangeArray[i].insertNode(myLink);
}
I get Uncaught TypeError: Cannot call method 'sendRequest' of undefined
This is because there is some syntax error in your code. I had same problem. I opened my background.html page in fire fox with fire-bug plug-in enabled. Fire-bug console should me the error, I fixed and it is working now.