This code below works fine in Chrome and IE 9. But breaks in IE 8.
The errant line is here. I think it's the bind.
google.maps.event.addListener(this.map, "click", (this.leftClick).bind(this));
Has anyone else had this problem? It's not clear if someone has this on SO.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style>
html, body, #map
{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?libraries=geometry,drawing&sensor=true" type="text/javascript"></script>
<script language="javascript">
var MyPage = function () {
this.map = null; //google map
};
MyPage.prototype.initialize = function () {
this.map = new google.maps.Map(document.getElementById("map"),
{
zoom: 8,
center: new google.maps.LatLng(30, -97),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
google.maps.event.addListener(this.map, "click", (this.leftClick).bind(this));
}
MyPage.prototype.leftClick = function (event) {
alert('hi');
}
$(window).load(function(){
var my = new MyPage();
my.initialize();
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
the bind Method is not supported in IE8 or below see http://msdn.microsoft.com/en-us/library/ff841995(v=vs.94).aspx
Related
Very simple question, can I use functions like await inside paperjs?
I can chain together a lot of .then's and it's going fine, but as soon as I add await in front of it I get the error
SyntaxError: Unexpected token (4:22)
Please tell me they didn't make it so that I have to start wrapping everything in insanely long chains in order to integrate functions like fetch into paperjs. Below my code:
<script type="text/paperscript" canvas="myCanvas">
getCollectionList = async function() {
var collectionlist = [];
collectionlist = await fetch('/api/graph/<%= database %>');
console.log(collectionlist);
}
getCollectionList();
</script>
<canvas id="myCanvas" resize></canvas>
Your are writing your code as PaperScript which implies that Paper.js uses a JavaScript parser to parse it and apply some transformations to it.
The problem is that by default, the JavaScript parser used by Paper.js does not support ES6 features.
You have to load a more recent version of the parser (Acorn) before loading Paper.js to solve your issue.
See my answer to an analog issue here for more details.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Debug</title>
<!-- Load latest acron version first -->
<script type="text/javascript" src="https://unpkg.com/acorn"></script>
<!-- Then load Paper.js -->
<script type="text/javascript" src="https://unpkg.com/paper"></script>
<style>
html,
body {
margin: 0;
overflow: hidden;
height: 100%;
}
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="canvas" resize></canvas>
<script type="text/paperscript" canvas="canvas">
// Here you can now use ES6 syntax.
const myAsyncFunction = async function() {
const response = await fetch('https://yesno.wtf/api/');
const json = await response.json();
console.log(json);
};
myAsyncFunction();
</script>
</body>
</html>
I'd would pass copy of instance ol.View to map constructor. When I do that zoom stop working and I wonder why?
I have to write some text to create post eh..
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.2.0/css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.2.0/build/ol.js"></script>
<title>OpenLayers example</title>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
const copy = (obj) => {
return Object.assign(Object.create(Object.getPrototypeOf(obj)), obj);
};
const v = new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
});
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: copy(v)
});
</script>
</body>
</html>
Openlayers v5.2.0
In a Controller, I have a handler method that should pass a string to a jsp named searchResultGraph.jsp
#RequestMapping(value = PATHELEM + "/searchGraph")
public String handleGraph(Model model) {
String write = writer.getWriteString();
model.addAttribute("write", write);
System.out.println(write);
return PATHELEM + "/searchResultGraph";
}
the jsp looks like this:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%#taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%#taglib uri="http://java.sun.com/jsp/jstl/core" prefix="core"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Graph View</title>
<script type="text/javascript" src="<c:url value="/resources/js/json2.min.js" />"></script> <!-- ${pageContext.request.contextPath}/WebContent/WEB-INF/views/ -->
<script type="text/javascript" src="<c:url value="/resources/js/cytoscapeweb.min.js" />"></script>
<script type="text/javascript" src="<c:url value="/resources/js/AC_OETags.min.js" />"></script>
<script language="JavaScript">
window.onload=function() {
// network data could alternatively be grabbed via ajax
var xml = '${write}';
// init and draw
// initialization options
var options = {
swfPath: "CytoscapeWeb",
flashInstallerPath: "playerProductInstall"
};
var vis = new org.cytoscapeweb.Visualization("cytoscapeweb", options);
var draw_options = {
// your data goes here
network: xml,
// show edge labels too
edgeLabelsVisible: false,
edgeTooltipsEnabled:true,
// let's try another layout
layout: "circle",
// hide pan zoom
panZoomControlVisible: true
};
vis.draw(draw_options);
};
</script>
<style>
/* The Cytoscape Web container must have its dimensions set. */
html, body { height: 100%; width: 100%; padding: 0; margin: 0; }
#cytoscapeweb { width: 100%; height: 100%; }
</style>
</head>
<body>
<h1>The Graph</h1>
<h1>${write}</h1>
<div id="cytoscapeweb">
Cytoscape Web will replace the contents of this div with your graph.
${write}
</div>
</body>
</html>
But nothing is displayed when I try to call ${write}. Is there something missing in my method?
Thanks!
CHECK ARE YOU HAVING A METHOD NAMED getWriteString(); in you bean class and if not create a class name Write and instantiate an object named write in your controller and then pass some string into that and add that to the model to return that by you controller,
Write write = new Write();
write.getWriteString();
Ok, I found the solution:
The links in options-tag had to be relative links too!
So instead of this
var options = {
swfPath: "CytoscapeWeb",
flashInstallerPath: "playerProductInstall"
};
I had to write this:
var options = {
swfPath: "<c:url value="/resources/js/CytoscapeWeb" />",
flashInstallerPath: "<c:url value="resources/js/playerProductInstall" />"
};
I've created a PHP file named maps.php that contains a simple Google Maps API that works on the iPad's default browser.
But when I call it using Ajax, the page loads itself but not the map. If I open the link in a desktop or mobile browser it works fine.
You can show google maps by accessing google's javascript api.
<!DOCTYPE html>
<html>
<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="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
</script>
<script type="text/javascript">
function initialize() {
var myOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
Or you can load any php page directly in webView by using window.location="http://www.mourady.me/alhokair/iphone/maps.php" javascript method, as your php page contain google map in canvas tag, you can not load that in div through ajax call, better way used iframe tag to the job.
<html>
<body onload="bodyload()">
<button onclick="bodyload()">Ajax call</button>
<iframe id="mapDiv" height=500px width=700px src="http://www.mourady.me/alhokair/iphone/maps.php"></iframe>
</body>
</html>
When I execute the code below in IE7/WinXP32, then the output in the console is "undefined". The output changes to the expected "getContext()", when I make either of two modifications:
I remove the image tag.
I use: <body onload="draw()">
Any idea what is going on here? What may be a workaround?
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Canvas</title>
<script type="text/javascript">
var djConfig = {parseOnLoad: false, isDebug: true};
</script>
<script type="text/javascript"
src="/development/javascript/dojo-release-1.4.3-src/dojo/dojo.js">
</script>
<!--[if IE]>
<script type="text/javascript" src="/javascript/excanvas_r73.js"></script>
<![endif]-->
<script type="text/javascript">
function draw() {
var canvas = dojo.byId("canvas");
console.log(canvas.getContext);
}
dojo.addOnLoad(draw);
</script>
</head>
<body>
<canvas id="canvas" width="100" height="100"></canvas>
<img src="nonexisting.gif">
</body>
</html>
Update: Seems like replacing "dojo.addOnLoad(draw);" with the following code does the trick.
function init() {
dojo.addOnLoad(draw);
}
if (dojo.isIE) {
dojo.connect('onload', init);
} else {
init();
}
dojo.addOnLoad fires before document.onload. I think it's associated with DOMContentLoaded. Perhaps excanvas does its initialization on the same event? Can you just use document.onload?