Adding NOAA Radar to JavaScript Application - javascript

I am attempting to add NOAA's Doppler Radar to my web map. For whatever reason the later will not display on the map. No errors are being reported and I have used console.log() to confirm the data is being pulled correctly form noaa's arcGIS server. Any thoughts as to how to configure this so the data gets displayed?
maps.addWeather = function addWeatehr () {
console.log("addWeather Called...");
var weatherServiceURL = "http://gis.srh.noaa.gov/arcgis/rest/services/RIDGERadar/MapServer"
var weatherLayer = new FeatureLayer(weatherServiceURL,{
outFields:["*"],
visible:true
});
console.log(weatherLayer);
maps.map.addLayer(weatherLayer);
};

You're trying to add a FeatureLayer using a map service that doesn't support returning features - which makes sense if you think about it, what features would a weather radar return? If you look at the root folder of the NOAA server:
http://gis.srh.noaa.gov/arcgis/rest/services
You should see "RIDGERadar (MapServer)". If it supported Feature access it would either say "FeatureServer", or have a second entry if it supported both.
Try adding it as a dynamic map service instead:
var layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://gis.srh.noaa.gov/arcgis/rest/services/RIDGERadar/MapServer");
maps.map.addLayer(layer);
The ArcGIS services directory is a very useful thing to play with - I got the above line from the internal Javascript viewer linked from the MapServer page.

Related

Open Layers not displaying LineString added via addLayer on mobile

I have a line string that needs to be displayed. It is a collection of GeoJSON data.
I have a problem where this works fine when opened in the browser, but when I open it in the mobile browser, the line that I am adding is not displayed.
Function that adds routeLayer
const route = new LineString(breaks)
route.transform('EPSG:4326', 'EPSG:3857');
const routeFeature = new Feature({
type: 'route',
geometry: route,
});
const features = [routeFeature];
routeFeature.setStyle(mainRouteStyle);
const mainRouteVector = new VectorLayer({
source: new VectorSource({
features,
}),
});
map.addLayer(mainRouteVector);
I couldn't find anywhere what is wrong, I don't have any errors. I am adding geo markers also with the same method and they are displayed. I also tried putting a simple line that connects 2 coordinates and it is also not shown when I add it later with addLayer but when I include that in layers when initializing the map, it is shown.
Keep in mind that on desktop browser it is working fine, but on mobile it has problems. Does anybody know what is the issue?
Ok, turns out this was not the issue with OpenLayers, I had targeting localhost to get the geojson data, which on mobile is obviously not localhost.

Error trying to access Sharepoint Online host web list data from provider hosted add-in part using JSOM CDL

I've looked all over the internet for the answer to this, and still cannot figure it out. There are many examples CLOSE to what I'm trying to do, but none that actually are exact. Here's what I'm trying to do:
I have a provider hosted Sharepoint Add-In that has an aspx page with C# codebehind. I also have a javascript file in the provider hosted side (web side, NOT the app-web) that I'm trying to use to access some List data from the host web.
Here's the code I'm using:
var customWP_NewsAndInfo_allArticles;
var hostweburl;
var addinweburl;
// This code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model
$(document).ready(function () {
//Get the URI decoded URLs.
hostweburl =
decodeURIComponent(
getQueryStringParameter("SPHostUrl")
);
addinweburl =
decodeURIComponent(
getQueryStringParameter("SPAppWebUrl")
);
// resources are in URLs in the form:
// web_url/_layouts/15/resource
var scriptbase = hostweburl + "/_layouts/15/";
// Load the js files and continue to the successHandler
$.getScript(scriptbase + "SP.Runtime.js",
function () {
$.getScript(scriptbase + "SP.js",
function () { $.getScript(scriptbase + "SP.RequestExecutor.js", customWP_NewsAndInfo_retrieveListItems); }
);
}
);
});
function customWP_NewsAndInfo_retrieveListItems() {
// get parameters from the query string for add-in part properties
var sourceList = 'News and Information';
// context: The ClientContext object provides access to
// the web and lists objects.
// factory: Initialize the factory object with the
// app web URL.
var clientContext = new SP.ClientContext(addinweburl);
var factory = new SP.ProxyWebRequestExecutorFactory(addinweburl);
clientContext.set_webRequestExecutorFactory(factory);
var appContextSite = new SP.AppContextSite(clientContext, hostweburl);
this.web = appContextSite.get_web();
clientContext.load(this.web);
var web = clientContext.get_web();
var oList = web.get_lists().getByTitle(sourceList);
var items = oList.getItems(SP.CamlQuery.createAllItemsQuery());
var includeExpr = 'Include(Title)';
clientContext.load(items, includeExpr);
clientContext.executeQueryAsync(
Function.createDelegate(this, this.customWP_NewsAndInfo_onQuerySucceeded),
Function.createDelegate(this, this.customWP_NewsAndInfo_onQueryFailed)
);
}
I don't need to show the success and failure functions since it never reaches those. When it runs executeQueryAsync, it always comes back with this error and stack trace:
MicrosoftAjax.js:5 Uncaught TypeError: Cannot read property 'apply' of undefined
at Array.<anonymous> (MicrosoftAjax.js:5)
at MicrosoftAjax.js:5
at SP.ClientRequest.$3I_0 (SP.Runtime.js?_=1493695027549:2)
at Array.<anonymous> (MicrosoftAjax.js:5)
at MicrosoftAjax.js:5
at Sys.Net.WebRequest.completed (MicrosoftAjax.js:5)
at SP.ProxyWebRequestExecutor.$1W_1 (SP.RequestExecutor.js?_=1493695027551:2)
at Function.SP.ProxyWebRequestExecutorInternal.processSuccessCallback (SP.RequestExecutor.js?_=1493695027551:2)
at SP.RequestInfo.success (SP.RequestExecutor.js?_=1493695027551:2)
at SP.RequestExecutor.internalOnMessage (SP.RequestExecutor.js?_=1493695027551:2)
I even tried troubleshooting by trying a Sharepoint Hosted add-in but I get a very similar error:
Uncaught TypeError: Cannot read property 'apply' of undefined
at Array.<anonymous> (ScriptResource.axd?d=NmWpgseF5Lm2ObZqsFB7X8Sc_FI92_ZNS_ucNmpXp96dB8TO5HMUZeqx3R5ocUw8b6hyk9AKxItxXJ…:5)
at ScriptResource.axd?d=NmWpgseF5Lm2ObZqsFB7X8Sc_FI92_ZNS_ucNmpXp96dB8TO5HMUZeqx3R5ocUw8b6hyk9AKxItxXJ…:5
at SP.ClientRequest.$x_0 (SP.Runtime.js?_=1493693899820:2)
at SP.ClientRequest.$3I_0 (SP.Runtime.js?_=1493693899820:2)
at Array.<anonymous> (ScriptResource.axd?d=NmWpgseF5Lm2ObZqsFB7X8Sc_FI92_ZNS_ucNmpXp96dB8TO5HMUZeqx3R5ocUw8b6hyk9AKxItxXJ…:5)
at ScriptResource.axd?d=NmWpgseF5Lm2ObZqsFB7X8Sc_FI92_ZNS_ucNmpXp96dB8TO5HMUZeqx3R5ocUw8b6hyk9AKxItxXJ…:5
at Sys.Net.WebRequest.completed (ScriptResource.axd?d=NmWpgseF5Lm2ObZqsFB7X8Sc_FI92_ZNS_ucNmpXp96dB8TO5HMUZeqx3R5ocUw8b6hyk9AKxItxXJ…:5)
at SP.ProxyWebRequestExecutor.$1W_1 (SP.RequestExecutor.js?_=1493693899822:2)
at Function.SP.ProxyWebRequestExecutorInternal.processSuccessCallback (SP.RequestExecutor.js?_=1493693899822:2)
at SP.RequestInfo.success (SP.RequestExecutor.js?_=1493693899822:2)
I tried creating a custom list called "testing" and just used 'Include(Title)' but I received the same error. I tried inserting debugger; and stepping through the code using Chrome Developer tools but it's hard to read the obfuscated Microsoft code. Any help on figuring this out would be hugely appreciated! Thanks a lot ahead of time!
Paul
I was finally able to solve this issue by using this code and working my way back from it, since it worked when I ran it. I finally found the problem to be the call:
clientContext.executeQueryAsync(
Function.createDelegate(this, this.onQuerySucceeded),
Function.createDelegate(this, this.onQueryFailed)
);
When I compared to the github example, their call was like this:
clientContext.executeQueryAsync(onQuerySucceeded, onQueryFailed);
When I took out the Function.createDelegate part and just used the syntax they used, the error went away and I'm now able to load the list items!
As far as why this would be, maybe someone can shed some more light on this for us than I can? All I know is that whatever I tried, even testing on a Sharepoint Hosted add-in instead of Provider Hosted, it never worked until I changed this code. Now I can use Sharepoint JSOM using the Cross Domain Library on my Provider Hosted add-in on the web side. This is very valuable to me, especially when working with Publishing Images because of the limitations in this area with REST. I knew I could use REST instead in my case, but unfortunately, REST calls don't work well for my situation, since I'm also getting a Publishing Image column (Type="Image") and using REST you have to make a separate call for each list item.
I really hope this helps someone else in my position and saves you the hours I spent tracking this down!
Cheers!
Paul

LeafletJS & Cloudmade: Retina Tile Support

I'm using Leaflet JS and Cloudmade in my mobile HTML5 application. Unfortunately I can't get the retina support to work.
I use this url to access the cloud made api:
var url = 'http://{s}.tile.cloudmade.com/{key}/{style}#2x/256/{z}/{x}/{y}.png?token={token}';
My key, style and token are replaced by the correct values.
For my leaflet map layer I use the following simple configuration:
L.tileLayer(url, {
detectRetina: true
}).addTo(map);
Unfortunately the result looks really weird.
It seems like something is going wrong with the tiles and the position of them.
If I remove the detectRetina flag I get a correct result in the browser
But as you can see both solutions are not sharp on my retina display (Mac Book Pro).
Has anyone made this working?
Thanks!
This worked for me:
var tileURL = 'http://{s}.tile.cloudmade.com/{api-key}/1714' + (L.Browser.retina? '#2x': '') + '/256/{z}/{x}/{y}.png';
L.tileLayer(tileURL, {detectRetina: true}).addTo(yourMap);
Have you tried with different tile styles and check if that might be the issue?

Google Earth Plugin not loading sideDatabase from Mapsengine/Earthbuilder

I have not been able to successfully display my side database (map from Mapsengine/Earthbuilder). I have installed Google Plugin and tried to access it from Firefox, Chrome, and IE browsers and nothing seems to work. I am not sure what I'm doing wrong as I have confirmed my code with the code used in Google's Code Playground, and I have attempted a workaround that was suggested in a similar issue from the past (Issue 21: GMaps Engine Layer Disappeared over GEarth plugin). When specifing the URL of my map to be displayed in GE plugin, I even changed the URL to include &export=download, which is one of the fixes I saw in another similar issue (it was about kml files from google docs).
Strangely, when my webpage is accessed, it does not give an error that the side database failed to download.
I have included part of the code below.
Any assistance would be greatly appreciated.
Thanks in advance,
<script type="text/javascript">
var CHO;
google.load("earth", "1");
function init() {
google.earth.createInstance('map3d', initCB, failureCB);
}
function initCB(instance) {
CHO = instance;
CHO.getWindow().setVisibility(true);
CHO.getNavigationControl().setVisibility(CHO.VISIBILITY_AUTO);
CHO.getLayerRoot().enableLayerById(CHO.LAYER_BORDERS, true);
CHO.getLayerRoot().enableLayerById(CHO.LAYER_ROADS, true);
addSideDatabase()
// Add controls for the window
CHO.getOptions().setStatusBarVisibility(true);
CHO.getNavigationControl().setVisibility(CHO.VISIBILITY_AUTO);
// Update the view in Google Earth
var lookAt = CHO.createLookAt('');
lookAt.setLatitude(30.0);
lookAt.setLongitude(-90.0);
lookAt.setRange(9500000); //default is 0.0
CHO.getView().setAbstractView(lookAt);
}
function failureCB(errorCode) {
alert(errorCode);
}
function sideDatabaseSuccess(db) {
sideDatabase = db;
db.setDrawOrder(2);
}
function sideDatabaseFail() {
alert('Sorry! Side database failed to load!');
}
/** Add the URL for the globe served by Earth Enterprise or Earth Builder.
* This function operates similarly to the File => Add Database feature
* in Google Earth EC.
*/
function addSideDatabase() {
google.earth.addSideDatabase(
CHO, "https://mapsengine.google.com/map/edit?mid=zHgXRX6Mts2Q.kHGFoYZlcyBQ&export=download",
sideDatabaseSuccess,
sideDatabaseFail,
{
userName: '',
password: ''
}
);
}google.setOnLoadCallback(init);</script>
Is that URL for a Google Maps Engine Lite map? If so, that might be the issue. I just tried swapping in the URL (https://earthbuilder.google.com/10446176163891957399-13516001307527776624-4/kh/) used in the Google Code Playground example here http://code.google.com/apis/ajax/playground/#adding_a_side_database. That one worked, but my Google Maps Engine Lite URL didn't. Furthermore, it didn't even seem to call its success or failure callback functions!
The thing you are trying to load is a map, not a globe. The two are not equivalent. You can't load a map in Google Earth.
On the bright side, your side-loading code is spot on. Replace your URL with http://laearth.la.gov (Louisiana's Custom Google Earth Server) and it will work.

Does the ExternalInterface, in Flex 3, have a data size limitation?

I am using the ExternalInterface on Flex 3. We are actually using flex to compress a large amount of DOM data, so this is specifically being used with LARGE data.
To further investigate, if there is a limitation, is this universal? (IE. Silverlight)
First, let me state that this is being done with an application that was made by inexperienced software engineers. This is an app that we need to buy time by compressing the data so that we can build a long-term solution. We have no other options, unfortunately.
Background: This is an application that is actually a web-spreadsheet. Our long term solution is to make a Office Business Application.
No, Flash do not impose any size limits on ExternalInterface communication.
I think it does, or there is some other configuration which governs this. I was testing a file upload using FileReference object and wanted to pass the data sent from server back to hosting page via external interface call. Below is a snippet of my UPLOAD_COMPLETE_DATA event handler
private function onFileUploadCompleteData (e:DataEvent):void
{
var file:FileReference = FileReference(e.target);
Alert.show("onFileUploadCompleteData : " + e.data );
if(ExternalInterface.available && callBackOnUploadCompleteData.length > 0)
{
var data:Object = new Object();
data.FileName = file.name;
data.ServerData = e.data;
//data.ServerData = e.data.substr(0, 50);
ExternalInterface.call(callBackOnUploadCompleteData, data);
}
}
This event gets fired but the call to my javascript is never made. If I uncomment the line which trims the returned data to first 50 characters, it start working and calls the javascript correctly.
Either there is a size restriction imposed by flash (10.2) or IE9 (which is what I was using), or there is something else I am missing.

Categories