I am trying my first application with openlayers3 and geoserver. The code in the bottom of this message is not working. I know that geoserver is working properly because when I run the following link I can see the image represented by Img_Sample in it.
So what's wrong with the openlayers code?
Any help will be very much appreciated.
thanks
JJ
Link
http://localhost:8081/geoserver/wms?service=WMS&version=1.1.0&request=GetMap&layers=Img_Sample&styles=&bbox=-130.85168,20.7052,-62.0054,54.1141&width=768&height=372&srs=EPSG:4326&format=application/openlayers
code
<html>
<head>
<title>OpenLayers Example</title>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
</head>
<body>
<div style="width:100%; height:100%" id="map"></div>
<script defer="defer" type="text/javascript">
var map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"localhost:8081/geoserver/wms", {layers: 'Img_Sample'} );
map.addLayer(wms);
map.zoomToMaxExtent();
</script>
</body>
Unlike openlayers2 ,openlayers3.x and above has 'ol' as top level namespace.
Openlayers syntax has been changed from 3.x and above.
Following is the documentation url for latest openlayers http://openlayers.org/en/latest/doc/tutorials/
Related
Just struggling to get the Attach addon working. The main xterm (4.4.0) comes up fine, but the Chrome browser Javascript console reports 'Uncaught TypeError: AttachAddon is not a constructor' when I try to reference the addon. The webserver is golang/echo, and I pull in the xterm.js and xterm-addon-attach.js from the packages as follows:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="xterm.css" />
<script src="xterm.js"></script>
<script src="xterm-addon-attach.js"></script>
</head>
<body>
<div id="terminal"></div>
<script>
var term = new window.Terminal();
term.open(document.getElementById('terminal'));
ws = new WebSocket('ws://example.net:8080/ws')
const attachAddon = new AttachAddon(ws);
term.loadAddon(attachAddon);
</script>
</body>
</html>
Can anyone help to point out what I've done wrong?
Also the examples in the docs where I took this from doesn't have the term.open() call, so how would the Terminal instance know what element to attach to? Eg at https://github.com/xtermjs/xterm.js/tree/master/addons/xterm-addon-attach
Many thanks in advance
Andy
Update:
I changed the HTML to include the import statements, as follows:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="xterm.css" />
<script src="xterm.js"></script>
</head>
<body>
<div id="terminal"></div>
<script type="module">
import { AttachAddon } from "./xterm-addon-attach.js";
var term = new window.Terminal();
term.open(document.getElementById('terminal'));
ws = new WebSocket('ws://boundstone.dynamic-dns.net:8080/ws');
const attachAddon = new AttachAddon(ws);
term.loadAddon(attachAddon);
</script>
</body>
</html>
but the Chrome console now reports: "The requested module './xterm-addon-attach.js' does not provide an export named 'AttachAddon'". The webserver serves the script with content type application/javascript, and the Chrome console recognises the structure of the AttachAddon as a Webpack it seems.
I'm afraid I'm not familiar as I clearly should be with JS modules. The web server for my project is not (and can't be) Node, but does that make a difference?
Many thanks in advance
Andy
This is what worked for me. The only thing you have to do is use AttachAddon twice as shown below using the OP's example. That's the only trick to getting it working. I am also using the fit addon and it was the same thing with that.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="xterm.css" />
<script src="xterm.js"></script>
</head>
<body>
<div id="terminal"></div>
<script>
var term = new window.Terminal();
term.open(document.getElementById('terminal'));
ws = new WebSocket('ws://boundstone.dynamic-dns.net:8080/ws');
const attachAddon = new AttachAddon.AttachAddon(ws);
term.loadAddon(attachAddon);
</script>
</body>
I'm a newbie to reactjs and trying to test a very basic component, however it seems all my struggle is futile because its not showing up in the browser.
I'm using asp.net MVC 5 app and I've been following along this tutorial https://reactjs.net/getting-started/tutorial_aspnet4.html as the tutorial states you need to add React.Web.Mvc4 Nuget package which have some dependencies.
My simple React component (SimpleComponent.jsx)
var ComponentBox = React.createClass({
render: function() {
return (<div style="background-color:antiquewhite">Hello World ReactJs Component!</div>);
}
});
ReactDOM.render(
<ComponentBox />,
document.getElementById('reactDiv')
);
and my razor view is pretty simple
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.7.1/remarkable.min.js"></script>
</head>
<body>
<div id="reactDiv"></div>
<script src="#Url.Content("~/Scripts/SimpleComponent.jsx")"></script>
</body>
</html>
Did I miss something?
The Solution for my problem was to replace the style element in my jsx file as following
var ComponentBox = React.createClass({
render: function () {
return (<div style={{background:'antiquewhite'}}>Hello World ReactJs Component!</div>);
}
});
Based on react docs "using the style attribute as the primary means of styling elements is generally not recommended"
by using javascript object to store the style as properties and I hope this'll help someone.
I embedded phoneGap in my UIWebView, referenced to this doc:
http://docs.phonegap.com/en/2.2.0/guide_cordova-webview_ios.md.html#Embedding%20Cordova%20WebView%20on%20iOS
And in the index.html, I write this sample code:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
alert(“jquery loaded”);
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
after the webview loaded, the "body" can be shown, but the alert can't be pop out. So the jquery.js is not loaded? Or something else is wrong?
Edit:
I added "http:" to the src, but not work.
Thanks!
change
alert(“jquery loaded”);
to
alert("jquery loaded");
or
alert('jquery loaded');
Add http or https to your code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
The above should work for you.
Did you add the Cordova file?
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="./cordova-2.3.0.js"></script>
<script>
$(document).ready(function() {
alert(“jquery loaded”);
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
Also as much as phonegap uses HTML 5 it still requires a bit different style of writing your code. Everypage you make should all be in the same index page because Cordova loads at startup in your project. If you navigate away from the page Cordova needs to reload.
Did you copy jquery file at www forder (www/jquery.js). I use jquery too, mine is www/js/jquery.js
Try this!!!
I am having trouble with using OpenLayers in Gmaps4Rails (Gem version 1.5.2.) When I click on a marker I would like to show the typical callout (Infobox). Unfortunately I get the following JavaScript error:
this.serviceObject is undefined
Firebug calls the line 195 of the file "gmaps4rails.openlayers.js" responsable:
return this.serviceObject.addPopup(popup);
If I use Google Maps as API provider instead, everything works fine. Showing and hiding the infobox works nicely. This is why I assume that the error must be somewhere in "gmaps4rails.openlayers.js"
I tried on the latest FF and Chrome on Mac.
For reproducing the error in a reduced example, I created a simple HTML page in the public folder of my Rails 3.2 app and directly linked the needed JS and CSS files. To create the HTML page I copied the HTML code of my broken Rails app and reduced it.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link href="/assets/gmaps4rails.css" media="screen" rel="stylesheet" type="text/css" />
<script src="/assets/gmaps4rails/gmaps4rails.base.js" type="text/javascript"></script>
<script src="/assets/gmaps4rails/gmaps4rails.openlayers.js" type="text/javascript"></script>
</head>
<body>
<div class="map_container">
<div id="map" class="gmaps4rails_map"></div>
</div>
<script src="http://www.openlayers.org/api/OpenLayers.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
Gmaps.map = new Gmaps4RailsOpenlayers();
Gmaps.load_map = function() {
Gmaps.map.map_options.provider = "openlayers";
Gmaps.map.initialize();
Gmaps.map.markers = [
{"description":"<p>This shall be in in the popup</p>",
"id":117979030,
"lat":39.5715,
"lng":2.64694}
];
Gmaps.map.create_markers();
Gmaps.map.adjustMapToBounds();
Gmaps.map.callback();
};
Gmaps.oldOnload = window.onload;
window.onload = function() {
Gmaps.triggerOldOnload();
Gmaps.loadMaps();
};
</script>
</body>
</html>
Unfortunately I could not find a working example of a successful Gmap4Rails–Openlayers integration on the web. Am I missing a mandatory parameter?
Thanks in advance.
It's a bug.
Replace:
return this.serviceObject.addPopup(popup);
with:
return this.map.addPopup(popup);
I'll push a fix soon, thanks and +1
I'm trying to embed a column3d chart from fusioncharts in my MonoTouch project using UIWebView. I've added the necessary outlets and tested by using loadrequest to load a url and loadHtmlString to format a simple line of text. This works fine. I even tested that fusionchart works correctly on my browser using the below code and it does.
I have a folder named "charts" in my MonoTouch project that contains, Column3d.swf, jquery.min.js, FusionCharts.js, FusionCharts.HC.js and FusionCharts.HC.Charts.js.
In my
ViewDidLoad
string htmlString = "<html>
<head>
<script type=\"text/javascript\"src=\"Charts/jquery.min.js\">
</script>
<script type=\"text/javascript\" src=\"Charts/FusionCharts.js\">
</script>
<script type=\"text/javascript\" src=\"Charts/FusionCharts.HC.js\">
</script>
<script type=\"text/javascript\" src=\"Charts/FusionCharts.HC.Charts.js\">
</script>
</head>
<body>
<div id=\"chartContainer\">FusionCharts will load here!
</div>
<script type=\"text/javascript\"> var myChart = new FusionCharts( \"Charts/Column3D.swf\", \"myChartId\", \"400\", \"300\", \"0\", \"1\" );myChart.setXMLUrl(\"Charts/Data.xml\");
myChart.render(\"chartContainer\");
</script>
</body>
</html>";
this.webView.LoadHtmlString (htmlString, new NSUrl ("./Charts", true));
/*string htmlString = "<html><head></head><body><span style=\"font-weight: bold;\">This</span> " +
"<span style=\"text-decoration: underline;\">is</span> <span style=\"font-style: italic;\">some formatted</span> " +"<span style=\"font-weight: bold;text-decoration: underline;\">text!</span><br></body></html>";*/ //works
//this.webView.LoadHtmlString (htmlString, null); //works
Data.xml
<chart caption='Weekly Sales Summary'
xAxisName='Week' yAxisName='Amount' numberPrefix='$'>
<set label='Week 1' value='14400' />
<set label='Week 2' value='19600' />
<set label='Week 3' value='24000' />
<set label='Week 4' value='15700' />
</chart>
Can someone explain how I can get this working? Thanks in advance.
EDIT: I also tried
string htmlString = "<html><head> <title>Creating Pure JavaScript chart</title><script type=\"text/javascript\" src=\"charts/FusionCharts.js\"></script></head> <body><div id=\"chartContainer\">FusionCharts will load here!</div> <script type=\"text/javascript\">FusionCharts.setCurrentRenderer('javascript');var myChart = new FusionCharts( \"charts/Column3D.swf\", \"myChartId\", \"400\", \"300\", \"0\", \"1\" );myChart.setXMLData(\"<chart><set label='Data1' value='1' /></chart>\"); myChart.render(\"chartContainer\"); </script></body> </html>";
where i force the renderer to use javascript and set the chart parameters in the string to no avail. Anyone?
I solved my issue and thought I would post it should someone run into a similar issue.
The first thing I did was to right click on each of my javscript files ie FusionCharts.js, FusionCharts.HC.js and FusionCharts.HC.Charts.js and set their build type to content.
I then told Monotouch the build path for the charts would be contained in the charts folder by declaring
string path = NSBundle.MainBundle.BundlePath + "/Charts/";
Since I declare i am going to look in the Charts folder for related files, I then had to amend my htmlString by removing the "charts" keyword reference from all the "src" as below (since we are already lo.
string htmlString = "<html>
<head>
<script type=\"text/javascript\" src=\"jquery.min.js\">
</script>
<script type=\"text/javascript\" src=\"/FusionCharts.js\">
</script>
<script type=\"text/javascript\" src=\"/FusionCharts.HC.js\">
</script>
<script type=\"text/javascript\" src=\"FusionCharts.HC.Charts.js\">
</script>
</head>
<body>
<div id=\"chartContainer\">FusionCharts will load here!
</div>
<script type=\"text/javascript\"> var myChart = new FusionCharts(\"Column3D.swf\", \"myChartId\", \"400\", \"300\", \"0\", \"1\" );myChart.setXMLUrl(\"Charts/Data.xml\");
myChart.render(\"chartContainer\");
</script>
</body>
</html>";
I then call the loadHtml string method as below with the second argument pointing to the path that contains the javascript files.
this.webView.LoadHtmlString(htmlString, new NSUrl(path, true));
I even tested that fusionchart works correctly on my browser using the below code and it does.
Did you test this with an iOS device running Safari ?
project that contains, Column3d.swf,
That looks like a Flash file and iOS (and WebKit) does not support flash.
The website hints of an HTML5 version - so if they support flash-less browser then you should be able to do what you want using MonoTouch (or anything in iOS) using FusionChart. Otherwise you might need to look at other charting products (or a server-side solution).
FusionCharts had put out a blog post showing how to get HTML5 charts in iOS devices.
Have a look at it here - http://blog.fusioncharts.com/2012/02/create-charts-for-iphone-and-ipad-apps-using-fusioncharts-xt/