I am trying to load a wfs layer stored in Geoserver to create a webmap using ArcGIS Javascript API. I have managed to do this ok with a WMS but I can't get it to work using WFSLayer. Does anyone know if this is even possible?
My code so far:
var layer = new WFSLayer();
var opts = { "url": "localhost:8080/geoserver/wfs";,
"version": "1.0.0",
"name": "RSAC:RSAC_Field_boundary_WGS84_2",
"wkid": 4326,
"maxFeatures": 100 };
esriConfig.defaults.io.proxyUrl = "/sproxy/";;
layer.fromJson(opts);
map.addLayer(layer); });
You should set proxy for your web server.Because WFSLayer requires using a proxy page.So in your code,the spoxy string should be your proxy path on your local computer.
esriConfig.defaults.io.proxyUrl = "/sproxy/";
1.prepare your proxy.Esri has provided 3 recommended ways to proxy,including dotnet,php and java.Let take dotnet way for example.For details or other ways to set proxy,see Using the proxy.
a. Download dotnet proxy files; download github Esri/resource-proxy zip files,extract the DotNet folder.
b. Follow dotnet proxy Instructions.
Open IIS Manager;
If you put the DotNet folder within wwwroot, right-click it and select "Convert to Application".
Make sure the "Application pool" is at least 4.0.
c. Edit the proxy.config file.Add serverUrl element to serverUrls to indicate which server url you would like to proxy.
<serverUrls>
<serverUrl url="http://services.arcgisonline.com"
matchAll="true"/>
<serverUrl url="http://suite.opengeo.org/geoserver/wfs"
matchAll="true"/>
<serverUrl url="http://localhost:8080/geoserver/wfs"
matchAll="true"/>
</serverUrls>
2.setup the proxy url in your code.
map = new Map("map", {
basemap: "topo",
center: [-122.836, 42.346],
zoom: 13
});
var layer = new WFSLayer();
var opts = {
"url": "http://suite.opengeo.org/geoserver/wfs",// your wfs layer url goes here
"version": "1.1.0",
"name": "citylimits",
"wkid": 3857,
"maxFeatures": 100
};
//relative path,namely: C:\inetpub\wwwroot\DotNet\proxy.ashx
esriConfig.defaults.io.proxyUrl = "/DotNet/proxy.ashx";
layer.fromJson(opts);
map.addLayer(layer);
Final code.Note: to make code run normally,you should set proxy for your web server according the above instructions.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>WFS Layer</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
<style>
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://js.arcgis.com/3.20/"></script>
<script>
var map;
require(["esri/map", "esri/InfoTemplate", "esri/layers/WFSLayer", "esri/config", "dojo/domReady!"], function(Map, InfoTemplate, WFSLayer, esriConfig) {
map = new Map("map", {
basemap: "topo",
center: [-122.836, 42.346],
zoom: 13
});
var layer = new WFSLayer();
var opts = {
"url": "http://suite.opengeo.org/geoserver/wfs",
"version": "1.1.0",
"name": "citylimits",
"wkid": 3857,
"maxFeatures": 100
};
//relative path,namely: C:\inetpub\wwwroot\DotNet\proxy.ashx
esriConfig.defaults.io.proxyUrl = "/DotNet/proxy.ashx";
layer.fromJson(opts);
map.addLayer(layer);
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
Hope it could you.
Related
A few days ago, I was trying to build Autodesk forge viewer API with react native by following this example:
https://forge.autodesk.com/blog/forge-react-native-au-talk
It works well. It used viewer v2.17, I up to viewer v7 but unfortunately, It doesn't show anything. I caught an error: Cannot read property 'texture' of null, when I use line viewer.start();
Please, help
Looking at your code it seems to me you're not using the viewer options properly on initializing.
The way to define the access token is by a callback as per the sample posted by Bryan.
Using the code below the viewer loaded in fine.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" href="https://developer.api.autodesk.com/derivativeservice/v2/viewers/style.min.css?v=v7.*" type="text/css">
<script src="https://developer.api.autodesk.com/derivativeservice/v2/viewers/three.min.js?v=v2.17"></script>
<script src="https://developer.api.autodesk.com/derivativeservice/v2/viewers/viewer3D.js?v=v7.*"></script>
</head>
<body style="margin:0">
<div id="viewer"></div>
</body>
<script>
var viewer = null;
function initializeViewer(urn, token) {
var options = {
env: "AutodeskProduction",
getAccessToken: function(onTokenReady) {
var token = 'access token provided by 2 legged api';
var timeInSeconds = 3600; // Use value provided by Forge Authentication (OAuth) API
onTokenReady(token, timeInSeconds);
}
}
Autodesk.Viewing.Initializer(options, () => {
try {
viewer = new Autodesk.Viewing.GuiViewer3D(document.getElementById('viewer'));
viewer.start();
console.log('viewer loaded');
} catch (err) {
alert(err)
}
});
function onDocumentLoadSuccess(doc) {
var viewables = doc.getRoot().getDefaultGeometry();
viewer.loadDocumentNode(doc, viewables).then(i => {
// documented loaded, any action?
});
}
function onDocumentLoadFailure(viewerErrorCode) {
console.error('onDocumentLoadFailure() - errorCode:' + viewerErrorCode);
}
}
</script>
I've created an iteration burn-down chart in the code below. When we try to launch this from a web server with the apikey appended we see a window generated with the Rally Login screen not the graph. If you are already logged into the Rally tool, the graph does generate correctly. We only see this issue with the standard report as code generated using treegrid does work as expected when the APIKey is appended to the path.
Thanks!
Mark
<!DOCTYPE html>
<html>
<head>
<title>iterationburndown</title>
<script type="text/javascript" src="https://rally1.rallydev.com/apps/2.1/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function() {
Ext.create("Ext.Container", {
context: {},
items: [{
xtype: "rallystandardreport",
width: 750,
height: 500,
reportConfig: {
report: "IterationBurndown",
iteration: "April",
subchart: "hide",
title: "Iteration Burndown"
},
project: "https://rally1.rallydev.com/slm/webservice/v2.0/project/51186097359",
projectScopeUp: !1,
projectScopeDown: !0
}],
renderTo: Ext.getBody().dom
});
Rally.launchApp('CustomApp', {
name: "iterationburndown",
parentRepos: ""
});
});
</script>
<style type="text/css">
</style>
Unfortunately this is a limitation with those old style charts rendered by the Standard Report component. The A1 service those use does not support API Keys.
The best you'll be able to do would be to re-implement the chart using the Rally.ui.chart.Chart component and the Lookback API.
Some resources:
https://help.rallydev.com/apps/2.1/doc/#!/guide/lookback_api
https://help.rallydev.com/apps/2.1/doc/#!/guide/data_visualization
There's also a related app already implemented for a release burndown you could use as a place to get started: https://github.com/RallyApps/app-catalog/tree/master/src/apps/charts/burndown
I have problem with Google Maps on my site.
Maps and code works locally but when i publish map it shows only gray background.
I have Joomla site.
Please could someone help me.
This is my code:
<head>
<script src='http://code.jquery.com/jquery.min.js' type='text/javascript'></script>
</head>
<body>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="/maps/westcampus.js"></script>
<script>
var infowindow;
function initialize() {
var map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(37.42362457157549, -122.0921247138165),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 10
});
for (var x in westcampus) {
var building = westcampus[x];
var location = new google.maps.LatLng(building.lat,building.lng);
addMarker(map, building.name, location);
}
}
var bounds = new google.maps.LatLngBounds ();
function addMarker(map, name, location) {
var marker= new google.maps.Marker({
position: location,
map: map
});
bounds.extend (location);
google.maps.event.addListener(marker, 'click', function() {
if (typeof infowindow != 'undefined') infowindow.close();
infowindow = new google.maps.InfoWindow({
content: name
});
infowindow.open(map,marker);
});
map.fitBounds (bounds);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map_canvas" style="width: 100%; height: 400px;"></div>
</body>
</html>
and DB
var westcampus = [{'name':'Google West Campus 1','lat':37.423901,'lng':-122.091497,'ost': "Ostatak!"},
{'name':'Google West Campus 2','lat':37.424194,'lng':-122.092699,'ost': "Ostatak!"},
{'name':'Google West Campus 3','lat':37.423901,'lng':-122.092456,'ost': "Ostatak!"}];
thanks
There seems to be nothing wrong with the code you're using.
So the problem is with the server, and where it's requesting the map from.
Are you running SSL, and trying to request the JavaScript via HTTP ? Maybe remote to the server and see if you can run the page locally there. Investigate the network with chrome of fiddler. Might be returning 403 somewhere or something along those lines.
Or a load timing issue. Sometimes google maps need the resize event called once the map triggers the idle event. So it recalculates the bounds of the map tiles.
Can't really suggest anything else. Good luck.
Sencha Touch application has requires:[] option to specify the list of controllers and models and stores etc that are loaded that we need for the application to work but is there a way to execute something that we need even before the loading of the dependencies. FOr e.g. I need the Browsers Language even before the loading of all dependencies. So is it possible to do?
Keep in mind: Sencha Touch is nothing but JavaScript.
You can add some script in your index.html in front of the script tag that loads the sencha microloader.
<!DOCTYPE HTML>
<html manifest="" lang="en-US">
<head>
<meta charset="UTF-8">
<title>FNL</title>
<style type="text/css">
<!-- sencha stuff -->
</style>
<script id="myScript" type="text/javascript" src="myScript.js"></script>
<!-- The line below must be kept intact for Sencha Command to build your application -->
<script id="microloader" type="text/javascript" src=".sencha/app/microloader/development.js"></script>
</head>
<body>
<div id="appLoadingIndicator">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
I added some lines to the ST Microloader:
this.css = processAssets(manifest.css, 'css');
// Load language strings
var xhr = new XMLHttpRequest();
xhr.open('GET', 'api/Settings', false);
xhr.send(null);
var settings = eval("(" + xhr.responseText + ")");
Lang = settings.Translations[0];
Options = settings.Options[0];
// End Load Language Strings
this.js = processAssets(manifest.js, 'js');
In ExtJS i accomplished this by loading a Dependency class first
Ext.require([
'MyApp.Dependencies',
..
]);
so the Dependecies class is loaded before all controllers which looks like this
Dependencies.js:
Ext.define('MyApp.Dependencies', {
singleton: true,
init: function() {
// load translation data
}
});
MyApp.Dependecies.init();
and for completition my init function looks something like this:
inti: function(){
function loadScriptSync(url) {
var xhrObj = new XMLHttpRequest();
// open and send a synchronous request
xhrObj.open('GET', url, false);
xhrObj.send('');
// add the returned content to a newly created script tag
var se = document.createElement('script');
se.type = "text/javascript";
se.text = xhrObj.responseText;
document.getElementsByTagName('head')[0].appendChild(se);
}
var language = this.getLanguage();
loadScriptSync("resources/locale/locale." + language + ".js");
}
I would like to have a map on the contact page of my sub-domain at http://www.pedregoza.org/birds/contact.html. I have faithfully copied the code in the various examples for google maps, and done the style sheet in my .css. I have specified referral domains such as .pedregoza.org/birds/ etc, all to no avail. I am functional in html and I can edit java scripts when needed, but I find the google maps api to be very complicated, given that the internet is full of similar complaints to mine. Here is the error that I keep on getting: *Google has disabled use of the Maps API for this application. The provided key is not a valid Google API Key, or it is not authorized for the Google Maps Javascript API v3 on this site. If you are the owner of this application, you can learn about obtaining a valid key here: https://developers.google.com/maps/documentation/javascript/tutorial#api_key* And yes, I have generated a new key, enabled API v.3, and tried a bunch of other suggestions people have made. If I can't get this to work, then I guess google maps is only useful for static map displays, which is kind of sad. I was hoping people could zoom in and out of the map on our site. If anyone has a suggestion; I would be happy to try it. I know I am not alone with this problem.
First You must get your location Latitude and Longitude from :
http://maps.googleapis.com/maps/api/geocode/xml?address=+" + MapAddress + "&sensor=false
try this html code in your page. str_lat and str_lng are your location.
<head>
<meta name='viewport' content='initial-scale=1.0, user-scalable=no' />
<style type='text/css'>
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type='text/javascript' src=https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=false>
</script>
<script type='text/javascript'>
function initialize() {
var myLatlng = new google.maps.LatLng(str_lat,str_lng);
var mapOptions = {
center: myLatlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:'Location!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id='map-canvas'/>
</body>
</html>;