I am trying something fairly simple, you can see a demo here:
http://www.jsfiddle.net/VVe8x/19/
This bug only appears in Firefox, so to see it press either one of the links once (it will take you to either NY or Israel) then press the other link.
The bug is that it will not show me the tiles in that location, instead it will show me the background of the div.
P.S In Chrome this works flawlessly.
I dont know if this is a clue or it might confuse you, if in between pressing either NY or Israel links you press the "view the world" link it will allow you then to see the other location..
Full Source for reference
<!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" xml:lang="en" lang="en">
<body>
show me NY
show me TLV
show world map(a "workaround"
<div id='myMap' style="height: 600px; width: 600px; position: relative"></div>
<script src="http://openlayers.org/api/OpenLayers.js" type="text/javascript"></script>
<script src="http://developers.cloudmade.com/attachments/download/58/cloudmade.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
map = new OpenLayers.Map("myMap", {
controls: [
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar()
]
});
var cloudmade = new OpenLayers.Layer.CloudMade("CloudMade", {
key: 'd5da652e33e6486ba62fca3d18ba70c9'
});
map.addLayer(cloudmade);
var epsg4326 = new OpenLayers.Projection("EPSG:4326");
map.setCenter(new OpenLayers.LonLat(40, 32), 2);
show1 = function(){
var bound1 = new OpenLayers.Bounds(-8236567.917898,4972686.066032,-8236148.409989,4972889.624407);
map.zoomToExtent(bound1); // to NY
};
show2 = function(e){
var bound2 = new OpenLayers.Bounds(3874818.203389,3773932.267033,3875217.305962,3774226.370443);
map.zoomToExtent(bound2); // to Israel
return false;
};
</script>
</body>
</html>
The myMap_OpenLayers_Container has the following CSS when the tiles are invisible:
position: absolute; z-index: 749; left: -2.02815e+7px; top: -2007340px;
If you change these around you can see that the correct tiles were loaded, so its likely to be jsFiddle messing them up. The tiles CSS when they don't show also have strange values.
Update:
Testing locally also produces the issue, so that rules out jsFiddle.
A fix would be to set this value after the zoom by calling a function such as:
updateCSS = function(){
OpenLayers_Container = document.getElementById("myMap_OpenLayers_Container").style.left = "0px";
}
This looks like a bug, although if it is in OpenLayers or the CloudMade layer properties is hard to tell - I'd imagine the latter, or it would be a widely reported bug. The relevant code in OpenLayers.js appears to be:
centerLayerContainer: function(lonlat){
var originPx = this.getViewPortPxFromLonLat(this.layerContainerOrigin);
var newPx = this.getViewPortPxFromLonLat(lonlat);
if ((originPx != null) && (newPx != null)) {
this.layerContainerDiv.style.left = Math.round(originPx.x - newPx.x) + "px";
this.layerContainerDiv.style.top = Math.round(originPx.y - newPx.y) + "px";
}
I was running into this problem too, and it turned out I was not setting the map's center as I thought I was. The problem goes away if you first call map.setCenter(). For example:
var newCenter = new OpenLayers.Lonlat(longitude, latitude)
.transform(new OpenLayers.Projection('ESPG:4326'),
this.map.getProjectionObject());
this.map.setCenter(newCenter);
Hope this helps whoever next has the problem.
Related
I am working on a straightforward double buffering application with HTML5 canvas. (I've commented out the IIFE beginning and end to make debugging easier.) So far as I can tell, when I enter commands live from the developer console, it gives textbook appropriate results for e.g. painting a background image, or scaling and then painting a background image.
I was originally trying to do this as one detail of a tabbed page, but then pulled it out to its own page, which is self-sufficient other than CDN pulls and an uninteresting background image. The code, which duplicates the earlier reported behavior, runs:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A Snowfall of Skills</title>
<style type="text/css">
canvas#display-background
{
display: none;
}
</style>
</head>
<body>
<canvas id="display-background"></canvas>
<canvas id="display-foreground"></canvas>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js">
</script>
<script
src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.js">
</script>
<script>
/*
;(jQuery.ready(function()
{
*/
console.log('Reached A');
var original_background_width = jQuery('#display-background'
)[0].width;
var original_background_height =
jQuery('#display-background')[0].height;
var background_width = jQuery(window).width() * .8 - 20;
var background_height = (original_background_height *
background_width / original_background_width);
jQuery('#display-background')[0].width = background_width;
jQuery('#display-background')[0].height = background_height;
jQuery('#display-foreground')[0].width = background_width;
jQuery('#display-foreground')[0].height = background_height;
var raw_background = new Image();
raw_background.src = '/images/skills-snowfall.jpg';
var background_scale = (.8 * jQuery(window).width() /
background_width);
var canvas_height = background_width / background_scale;
var background_canvas = jQuery('#display-background')[0];
var background_context = background_canvas.getContext('2d');
var foreground_canvas = jQuery('#display-foreground')[0];
var foreground_context = foreground_canvas.getContext('2d');
/*
background_context.drawImage(raw_background, 0, 0);
foreground_context.drawImage(raw_background, 0, 0);
*/
background_context.drawImage(raw_background,
0, 0, raw_background.width, raw_background.height,
0, 0, background_canvas.width, background_canvas.height);
foreground_context.drawImage(raw_background,
0, 0, raw_background.width, raw_background.height,
0, 0, foreground_canvas.width, foreground_canvas.height);
console.log('Reached Z');
/*
}()));
*/
</script>
</body>
</html>
The page does appear to be working in one thing; the background canvas is meant not to be directly displayed, although it should be copied to the foreground canvas; and Inspecting HTML elements confirms that there is one displayed canvas, with dimensions making sense.
If I reference raw_background, Chrome shows an IMG element. If I comment out the bracketing, both scaled and unscaled background declarations work correctly when entered manually to the Chrome console. But the context seems to be a noop when it's run live on the page; the Reached A and Reached Z messages are displayed with other diagnostics that are not in my code but appear to me to be innocuous.
What, exactly, am I doing that things basically work dead simple when I enter commands in Chrome's console, but show no visible effect when run as regular JavaScript inlined on a page?
I'm testing out OpenSeadragon to see how it can handle a custom tile source. I've also turned on the navigator. However the thumbnail image does not show up in the navigator. Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>OpenSeaDragon (OSD) Custom Tile Sources Test</title>
</head>
<body>
<div id="custom_tilesource" style="width: 800px; height: 600px;"></div>
<script src="libs/openseadragon/openseadragon.js"></script>
<script type="text/javascript">
var viewer = OpenSeadragon({
showNavigator: true,
navigatorSizeRatio: 0.25,
id: "custom_tilesource",
prefixUrl: "libs/openseadragon/images/",
wrapHorizontal: false,
tileSources: {
height: 9425,
width: 9426,
tileSize: 512,
maxLevel: 14,
minLevel: 10,
getTileUrl: function( level, x, y ){
var strSources = "W3siQXR0cmlidXRlcyI6eyJPcGVyYXRpb24iOiJTdW0ifSwiSWQiOm51bGwsIlR5cGUiOiJJbWFnZSJ9LHsiQXR0cmlidXRlcyI6e30sIklkIjoiMjIwOSIsIlR5cGUiOiJJbWFnZUlkIn1d";
var strSampleRegion = 161;
var handlerURL = "/MultiOmyxU/handler.ashx?X=" + x + "&Y=" + y + "&Level=" + level + "&Sources=" + strSources + "&Reason=SampleRegion=" + strSampleRegion;
return handlerURL;
}
}
});
</script>
</body>
</html>
If anyone has had a similar problem please let me know as I am unsure as how to proceed to fix this issue.
Interesting. I assume it works if you use a DZI instead of a custom tilesource? Are you seeing any errors in the console? Do you have a link you can share?
I recommend posting this to the OpenSeadragon issues:
https://github.com/openseadragon/openseadragon/issues
Someone might be able to help you there.
I know there are question like this but I still can't find a fix, I've looked through the console and can't see anything. There are two images, one which should appear on set coordinates, and another which follows the mouse, the one which is mean't to follow the mouse does not show up but the other one does.
Main.js
/**
* Created with JetBrains WebStorm.
* User: Script47
* Date: 22/09/13
* Time: 00:54
*/
function drawAvatars() {
// Create variable for the canvas & create a new object for image
var gameCanvas = document.getElementById("gameCanvas");
var userImage = new Image();
// The source of the images
userImage.src = ("Images/userImage.png");
// Create an event listener then call function redrawAvatar
gameCanvas.addEventListener("mousemove", redrawAvatar);
}
function redrawAvatar(mouseEvent) {
var gameCanvas = document.getElementById("gameCanvas");
var userImage = new Image();
var enemyImage = new Image();
var score = 0;
userImage.src = ("Images/userImage.png");
enemyImage.src = ("Images/enemyImage.png");
// Erase canvas sort of refresh, then re-draw image following the coordinates of the mouse in the canvas
gameCanvas.width = 400;
gameCanvas.getContext("2d").drawImage(userImage, mouseEvent.offsetX, mouseEvent.offsetY);
gameCanvas.getContext("2d").drawImage(enemyImage, 150, 150);
// Simple hit detection to see if user image hits enemy image
if (mouseEvent.offsetX > 130 && mouseEvent.offsetX < 175 && mouseEvent.offsetY > 130 && mouseEvent.offsetY < 175) {
score++;
alert("You hit the enemy!\n You score is: " +score);
}
}
Index.html
<!DOCTYPE html>
<html>
<head>
<title>Avoid Me | Game</title>
<link rel="stylesheet" type="text/css" href="CSS/styles.css">
<script src="JS/Main.js"></script>
</head>
<body>
<br/>
<center><h3>Avoid Me!</h3>
<br/>
<br/>
<canvas id="gameCanvas" height="300" width="400" onclick="drawAvatars();">
<p><strong>Notice:</strong> Browser does not support canvas!</p>
</canvas>
</center>
</body>
</html>
JsFiddle
(Basing this off the code in the link you provided.)
In your mouseMovement function, you use mouseEvent.offsetX and mouseEvent.offsetY to get the player's position, but Firefox unfortunately doesn't support those properties. Unfortunately, IIRC, the only thing that works cross-browser is to get the position of the canvas, and subtract it from the event's pageX/pageY properties. You can use the canvas's getBoundingClientRect() method to find its position on the page.
This is is an example of a version of the function that should work in Firefox as well:
function mouseMovement(mouseEvent) {
var canvasPosition = gameCanvas.getBoundingClientRect();
userImageX = mouseEvent.pageX - canvasPosition.left;
userImageY = mouseEvent.pageY - canvasPosition.top;
}
I'm going to start this question off by saying that this is 100% working in Firefox (v21.0). For some reason it's not working in Google Chrome (v27.0.1453.94m). It also doesn't work in IE10.
Here is the JavaScript code I'm having issues with:
function canvasDrawBackground(value){
console.log(value);
stage.removeChild(background);
var temp = new createjs.Bitmap("images/bg_" + value +".jpg");
background = new createjs.Container();
background.x = background.y = 0;
background.addChild(temp);
stage.addChild(background);
background.addEventListener("mousedown", function(evt) {
var offset = {x:evt.target.x-evt.stageX, y:evt.target.y-evt.stageY};
evt.addEventListener("mousemove",function(ev) {
ev.target.x = ev.stageX+offset.x;
ev.target.y = ev.stageY+offset.y;
stage.update();
});
});
stage.update();
}
So, in Firefox the above code works, as in the image is added to the canvas and you can drag it around.
In Chrome / IE10 nothing happens - or more simply nothing appears on the canvas. I think the issue is in regards to when I add the image into the container, as I can place other items into the container and it works.
I am using http://code.createjs.com/easeljs-0.6.1.min.js and this code is based off of the "drag" tutorial. Here's the code from the tutorial:
<!DOCTYPE html>
<html>
<head>
<title>EaselJS demo: Dragging</title>
<link href="../../shared/demo.css" rel="stylesheet" type="text/css">
<script src="http://code.createjs.com/easeljs-0.6.0.min.js"></script>
<script>
var stage, output;
function init() {
stage = new createjs.Stage("demoCanvas");
// this lets our drag continue to track the mouse even when it leaves the canvas:
// play with commenting this out to see the difference.
stage.mouseMoveOutside = true;
var circle = new createjs.Shape();
circle.graphics.beginFill("red").drawCircle(0, 0, 50);
var label = new createjs.Text("drag me", "bold 14px Arial", "#FFFFFF");
label.textAlign = "center";
label.y = -7;
var dragger = new createjs.Container();
dragger.x = dragger.y = 100;
dragger.addChild(circle, label);
stage.addChild(dragger);
dragger.addEventListener("mousedown", function(evt) {
var offset = {x:evt.target.x-evt.stageX, y:evt.target.y-evt.stageY};
// add a handler to the event object's onMouseMove callback
// this will be active until the user releases the mouse button:
evt.addEventListener("mousemove",function(ev) {
ev.target.x = ev.stageX+offset.x;
ev.target.y = ev.stageY+offset.y;
stage.update();
});
});
stage.update();
}
</script>
</head>
<body onLoad="init();">
<canvas id="demoCanvas" width="500" height="200">
alternate content
</canvas>
</body>
</html>
To simulate my issue, change "var circle = new createjs.Shape();" into a bitmap / image, createjs.Bitmap("images/bg_" + value +".jpg");. It then doesn't render.
Any help is greatly appreciated! Hopefully I'm just doing it wrong. :P
This is probably because the image is not loaded. If you only update the stage after creating it, the image may not display. I would recommend adding a callback to the image to update the stage after its loaded.
// Simple approach. May not work depending on the scope of the stage.
var temp = new createjs.Bitmap("images/bg_" + value +".jpg");
temp.image.onload = function() { stage.update(); }
It also may make sense to preload the images you intend to use.
I'm using Google Earth in Web-development but I'm facing a weird situation, this is a simple code from the google code playground and it loads a 3D model into a google earth, if I refresh the page it wont load the model again,
http://savedbythegoog.appspot.com/?id=7f8638b214605a2327af223c613a6ae13874416b
Is there any way to fix it.
I'm facing with one more problem of loading the 3D models in Internet Explorer 8 in 32 bit XP machine, IE8 doesn't load the 3d model in google earth, you can check the link given. I'm also posting the js code below.
Please Help
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Earth API Sample</title>
<script src="http://www.google.com/jsapi?key=ABQIAAAAuPsJpk3MBtDpJ4G8cqBnjRRaGTYH6UMl8mADNa0YKuWNNa8VNxQCzVBXTx2DYyXGsTOxpWhvIG7Djw" type="text/javascript"></script>
<script type="text/javascript">
function addSampleButton(caption, clickHandler) {
var btn = document.createElement('input');
btn.type = 'button';
btn.value = caption;
if (btn.attachEvent)
btn.attachEvent('onclick', clickHandler);
else
btn.addEventListener('click', clickHandler, false);
// add the button to the Sample UI
document.getElementById('sample-ui').appendChild(btn);
}
function addSampleUIHtml(html) {
document.getElementById('sample-ui').innerHTML += html;
}
</script>
<script type="text/javascript">
var ge;
google.load("earth", "1");
function init() {
google.earth.createInstance('map3d', initCallback, failureCallback);
// addSampleButton('Create a 3D Model!', buttonClick);
}
function initCallback(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
// add a navigation control
ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);
// add some layers
ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true);
ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, true);
var la = ge.getView().copyAsLookAt(ge.ALTITUDE_RELATIVE_TO_GROUND);
la.setRange(100000);
ge.getView().setAbstractView(la);
create3dModel();
document.getElementById('installed-plugin-version').innerHTML =
ge.getPluginVersion().toString();
}
function failureCallback(errorCode) {
}
function create3dModel() {
// Create a 3D model, initialize it from a Collada file, and place it
// in the world.
var placemark = ge.createPlacemark('');
placemark.setName('model');
var model = ge.createModel('');
ge.getFeatures().appendChild(placemark);
var loc = ge.createLocation('');
model.setLocation(loc);
var link = ge.createLink('');
// A textured model created in Sketchup and exported as Collada.
link.setHref('http://earth-api-samples.googlecode.com/svn/trunk/examples/' +
'static/splotchy_box.dae');
model.setLink(link);
var la = ge.getView().copyAsLookAt(ge.ALTITUDE_RELATIVE_TO_GROUND);
loc.setLatitude(la.getLatitude());
loc.setLongitude(la.getLongitude());
placemark.setGeometry(model);
la.setRange(300);
la.setTilt(45);
ge.getView().setAbstractView(la);
}
function buttonClick() {
create3dModel();
}
</script>
</head>
<body onload="init()" style="font-family: arial, sans-serif; font-size: 13px; border: 0;">
<div id="sample-ui"></div>
<div id="map3d" style="width: 500px; height: 380px;"></div>
<br>
<div>Installed Plugin Version: <span id="installed-plugin-version" style="font-weight: bold;">Loading...</span></div>
</body>
</html>
If that links doesn't work copy the code and paste it in a text file and rename it to .html and then execute it.
Even I had faced the same problem with collada models and internet explorer, the code u have given is working fine in rest of the browsers like chrome and mozilla.
check out this link, but in this case they are loading a kml file and not directly loading collada models into the browser using javascript.