I am currently displaying "LOADING STREET VIEW" while the image is loading. If it cannot find an image for the coordinate, I am popping up a dialog stating "Unable to load location in street view". I want to alter this so that I am not popping a dialog, but instead changing the LOADING STREET VIEW element to the image found at : https://maps.googleapis.com/maps/api/streetview?size=600x300&location=44.414382,11.013988&heading=151.78&pitch=-0.76 I'm very confused about referencing html elements in javascript code. From the research i've done, I think I need to be using document in my javascript code. All help is appreciated and you can find the code below:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">
function initialize() {
var markerPosition = new google.maps.LatLng(41.201316987470086, -82.98099300983233);
var panoramaOptions = {
position: markerPosition,
pov: {
heading: 165,
pitch: 0,
zoom: 1
}
};
var myPano = new google.maps.StreetViewPanorama(document.getElementById("pano"), panoramaOptions);
myPano.setVisible(false);
new google.maps.Marker({map: myPano, position: markerPosition, title: 'Feature'});
// add a variable that gets set when the position_changed handler gets fired off
var positionDidChange = false;
var newPov = {};
var listenerHandle = google.maps.event.addListener(myPano, 'position_changed', function () {
positionDidChange = true;
google.maps.event.removeListener(listenerHandle);
newPov.heading = google.maps.geometry.spherical.computeHeading(myPano.getPosition(), markerPosition);
newPov.pitch = 0;
newPov.zoom = 1;
myPano.setPov(newPov); myPano.setVisible(true);
});
// add a function that gets fired off to see if the position did change so that the user does not wait forever
setTimeout(function () {
if (!positionDidChange) {
alert("Unable to load location in street view");
}
}, 5000);
}
</script>
</head>
<body onload="initialize()">
<div id="pano" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;"> LOADING STREET VIEW...</div>
</body>
</html>
You can control that text with document.getElementById('pano').innerHTML, for instance:
document.getElementById('pano').innerHTML = ' LOADING STREET VIEW..'; // what you have now
document.getElementById('pano').innerHTML = ''; //empty
Make a function that will replace the inner HTML of the div to the image:
var changeImage = function(){
var image = "http://www.myimage.com/image.png";
document.getElementById("pano").innerHTML = "<img src='" + image + "'>";
}
Then
if(!positionDidChange){
changeImage();
}
Related
I am trying to select multiple features in a feature layer by using "hold 'ctrl' button and mouse click event". I am using ArcGIS JS API 3.x.
I have created the US State boundary FeatureLayer by using FeatureCollection and able to display the layer on map. User wanted to select multiple states by mouse click while holding 'ctrl' or 'alt' key.
var featureLayer = new esri.layers.FeatureLayer(featureCollection, {
id: stateLayer,
opacity: 0.30,
visible: true,
infoTemplate: infoTemplate
});
g_esri.map.addLayer(featureLayer);
featureLayer.on("click", onBoundaryClick);
function onBoundaryClick(evt) {
var g = evt.graphic;
g_esri.map.infoWindow.setContent(g.getContent());
g_esri.map.infoWindow.show(evt.screenPoint, g_esri.map.getInfoWindowAnchor(evt.screenPoint));
formatInfotemplate(false, g);
}
I tried to follow some of the below links,
a. selecting-multiple-features-with-graphics
b. select-multiple-features-by-mouse-clicks
But couldn't able to get through,
It's been a long time I do not work with 3.xx API. Anyways maybe this example that I made for you can help you. The idea is basically listen to click events on the feature layer to catch selected graphics and then added to selected collection. When adding just check if the desire keys are pressed.
<!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>Labeling features client-side</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.35/esri/css/esri.css">
<style>
html, body, #map {
height: 100%; width: 100%; margin: 0; padding: 0;
}
</style>
<script src="https://js.arcgis.com/3.35/"></script>
<script>
var map;
require([
"esri/map",
"esri/geometry/Extent",
"esri/layers/FeatureLayer",
"esri/layers/GraphicsLayer",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/renderers/SimpleRenderer",
"esri/Color",
"dojo/domReady!"
], function(Map, Extent, FeatureLayer, GraphicsLayer,
SimpleLineSymbol, SimpleFillSymbol,
SimpleRenderer, Color)
{
const bbox = new Extent({"xmin": -1940058, "ymin": -814715, "xmax": 1683105, "ymax": 1446096, "spatialReference": {"wkid": 102003}});
const map = new Map("map", {
extent: bbox
});
const statesUrl = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3";
const states = new FeatureLayer(statesUrl, {
id: "states",
outFields: ["*"]
});
map.addLayer(states);
const color = new Color("#00ffff");
const line = new SimpleLineSymbol("solid", color, 1.5);
const symbol = new SimpleFillSymbol("solid", line, null);
const renderer = new SimpleRenderer(symbol);
const selected = new GraphicsLayer();
selected.setRenderer(renderer);
map.addLayer(selected);
let ctrl = false;
let shift = false;
map.on("key-down", function (evt) {
if (evt.key === "Control") {
ctrl = true;
} else if (evt.key === "Shift") {
shift = true;
}
});
map.on("key-up", function (evt) {
if (evt.key === "Control") {
ctrl = false;
} else if (evt.key === "Shift") {
shift = false;
}
});
states.on("click", function (evt) {
if (!ctrl && !shift) {
selected.clear();
}
selected.add(evt.graphic.clone());
console.log(`Selected: ${selected.graphics.length}`);
});
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
I have embedded a page in a <iframe> as follows :
<iframe id = 'iframeid'
src="/qgis/index.html"
scrolling="no"
frameborder="0"
style="height: 100vh;
width: 100%"
onload="on_load(this)">
</iframe>
And here is the on_load function called once the iframe is loaded.
<script type="text/javascript">
function on_load(iframe) {
try {
var lat = -0.017;
var lng = 0.015;
var zoom = 16;
var map = document.getElementById("iframeid").contentWindow.map;
map.setView([lat, lng], zoom);
} catch (e) {
// This can happen if the src of the iframe is
// on another domain
alert('exception: ' + e);
}
}
</script>
My problem is that the <iframe> enters a loop and the page is loaded once again, inside the <iframe>, and it goes like this indefinitely.
If you have the possibility to use jQuery you might try to change your function "onload" with :
$('document').ready(function(){
try {
var lat = -0.017;
var lng = 0.015;
var zoom = 16;
var map = document.getElementById("iframeid").contentWindow.map;
map.setView([lat, lng], zoom);
} catch (e) {
// This can happen if the src of the iframe is
// on another domain
alert('exception: ' + e);
}
});
Because I'm wondering if your script is triggering the onload while it's still not ready.
I have tried your code and added a line befor your javascript
try it :
<iframe id = 'iframeid'
src="home.html"
scrolling="no"
frameborder="0"
style="height: 100vh;
width: 100%"
onload="on_load(this)">
</iframe>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
function on_load(iframe) {
try {
var lat = -0.017;
var lng = 0.015;
var zoom = 16;
var map = document.getElementById("iframeid").contentWindow.map;
map.setView([lat, lng], zoom);
} catch (e) {
// This can happen if the src of the iframe is
// on another domain
alert('exception: ' + e);
}
}
</script>
I trying to move the created movable marker so that it points to the results of the Locate() function.
This would allow the recalculation of the other closest markers in the datasource.
Presently, this works only when I manually drag the movable matker.
I can't seem to be able to get the coordinates of the location found and move the marker there.
Thanks for any help!
Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Reorder marker list based on proximity</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>
.info {
background:#fff;
position: fixed;
width:90%;
top:70%;
right:5%;
left:5%;
bottom: 5%;
border-radius:2px;
max-height:30%;
overflow:auto;
}
.info .item {
display:block;
border-bottom:1px solid #eee;
padding:5px;
text-decoration:none;
}
.info .item small { color:#888; }
.info .item:hover,
.info .item.active { background:#f8f8f8; }
.info .item:last-child { border-bottom:none; }
</style>
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js'></script>
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.42.0/L.Control.Locate.min.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.42.0/L.Control.Locate.mapbox.css' rel='stylesheet' />
<!--[if lt IE 9]>
<link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.42.0/L.Control.Locate.ie.css' rel='stylesheet' />
<![endif]-->
<div id='map' class='map'></div>
<div id='info' class='info'></div>
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoiamZnaWFyZCIsImEiOiJ6S09PVU5vIn0.kn_-BVWarxfNjT1hak0kyA';
var map = L.mapbox.map('map', 'jfgiard.9dee89eb')
.setView([51.953608, 36.776667], 4);
var info = document.getElementById('info');
// create control and add to map
var lc = L.control.locate({
position: 'topleft', // set the location of the control
drawCircle: true, // controls whether a circle is drawn that shows the uncertainty about the location
follow: false, // follow the user's location
setView: true, // automatically sets the map view to the user's location, enabled if `follow` is true
keepCurrentZoomLevel: true, // keep the current map zoom level when displaying the user's location. (if `false`, use maxZoom)
stopFollowingOnDrag: false, // stop following when the map is dragged if `follow` is true (deprecated, see below)
remainActive: false, // if true locate control remains active on click even if the user's location is in view.
markerClass: L.circleMarker, // L.circleMarker or L.marker
circleStyle: {}, // change the style of the circle around the user's location
markerStyle: {},
followCircleStyle: {}, // set difference for the style of the circle around the user's location while following
followMarkerStyle: {},
icon: 'fa fa-map-marker', // class for icon, fa-location-arrow or fa-map-marker
iconLoading: 'fa fa-spinner fa-spin', // class for loading icon
circlePadding: [0, 0], // padding around accuracy circle, value is passed to setBounds
metric: true, // use metric or imperial units
onLocationError: function(err) {alert(err.message)}, // define an error callback function
onLocationOutsideMapBounds: function(context) { // called when outside map boundaries
alert(context.options.strings.outsideMapBoundsMsg);
},
showPopup: true, // display a popup when the user click on the inner marker
strings: {
title: "Show me where I am", // title of the locate control
popup: "You are within {distance} {unit} from this point", // text to appear if user clicks on circle
outsideMapBoundsMsg: "You seem located outside the boundaries of the map" // default message for onLocationOutsideMapBounds
},
locateOptions: {} // define location options e.g enableHighAccuracy: true or maxZoom: 10
}).addTo(map);
// Creates a single, draggable marker on the page.
var m = L.marker(new L.LatLng(51.953608, 36.776667), {
icon: L.mapbox.marker.icon({
'marker-color': '#000000',
'marker-size': 'large'
}),
draggable: true
}).bindPopup('Drag me around the map to simulate GeoLocalization!').addTo(map);
// Repopulate the features layer in the menu listing based on the dragged markers proximity to them.
// console.log(marker.getLatLng());
m.on('dragend', function() {
populateListing();
});
// Load the features from the CSV files.
var features = omnivore.csv('NMOandHTC.csv')
.on('ready', function(layer) {
// Customizing marker styles based on an attribute.
this.eachLayer(function(marker) {
if (marker.toGeoJSON().properties.type === 'National Member Organization') {
// The argument to L.mapbox.marker.icon is based on the simplestyle-spec: see that specification for a full description of options.
marker.setIcon(L.mapbox.marker.icon({
'marker-color': '#e31837',
'marker-size': 'medium'
}));
} else {
marker.setIcon(L.mapbox.marker.icon({
'marker-color': '#616265',
'marker-size': 'small'
}));
}
// Bind a popup to each icon based on the same properties
marker.bindPopup(marker.toGeoJSON().properties.name + '<br>' + marker.toGeoJSON().properties.country);
});
})
.addTo(map);
map.on('ready', function() {
// Display the tooltip after the marker has been added to the map.
m.openPopup();
});
// When the features layer is ready (added to the map), run populateListing.
features.on('ready', populateListing);
function populateListing() {
// Clear out the listing container first.
info.innerHTML = '';
var listings = [];
// Build a listing of markers
features.eachLayer(function(marker) {
// Draggable marker coordinates.
var home = m.getLatLng();
var metresToMiles = 0.000621371192;
var distance = (metresToMiles * home.distanceTo(marker.getLatLng())).toFixed(1);
var link = document.createElement('a');
link.className = 'item';
link.href = '#';
link.setAttribute('data-distance', distance);
// Populate content from each markers object.
link.innerHTML = marker.feature.properties.type + '<br />' + marker.feature.properties.name + '<br />' +
'<small>' + distance + ' mi. away</small>';
link.onclick = function() {
if (/active/.test(this.className)) {
this.className = this.className.replace(/active/, '').replace(/\s\s*$/, '');
} else {
var siblings = info.getElementsByTagName('a');
for (var i = 0; i < siblings.length; i++) {
siblings[i].className = siblings[i].className
.replace(/active/, '').replace(/\s\s*$/, '');
};
this.className += ' active';
// When a menu item is clicked, animate the map to center
// its associated marker and open its popup.
map.panTo(marker.getLatLng());
marker.openPopup();
}
return false;
};
listings.push(link);
});
// Sort the listing based on the
// assigned attribute, 'data-listing'
listings.sort(function(a, b) {
return a.getAttribute('data-distance') - b.getAttribute('data-distance');
});
listings.forEach(function(listing) {
info.appendChild(listing);
});
}
</script>
</body>
</html>
Is L.control.locate really needed here? Why not just call map.locate() after binding an callback to locationfound with map.on('locationfound, dostuff) Your function receives the results of the geolocation and can proceed from there.
I'm having a problem getting my code to work when it's incororated into a live site. The fiddle works just fine, but when I include the identical code in a webpage, I can't get the function to load/work at all.
<!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>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Drag and Drop Assignment</title>
<!doctype html>
<link rel="stylesheet" href="styles/style1.css"/>
<style>
.drop{
float: left;
width: 350px;
height: 400px;
border: 3px solid blue;
background-image: url("http://debsiepalmer.com/images/tardis 2.jpg");
background-repeat: no-repeat;
background-size: cover;
}
#right{float: left;
width: 350px;
height: 400px;
border: 3px solid red;
}
</style>
<script src="draganddrop.js" ></script>
<script src="http://code.jquery.com/jquery-2.0.2.js" ></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" ></script>
<script type="text/javascript">
$ (init);
function image(id, image1) {
this.id = id;
this.image1 = image1;
}
$('#deal').click(function () {dealAll(
dealCard(randomCard()));
});
$(function() {
$( "#draggable" ).draggable({ containment: "#left"});
});
function init() {
$('.drop').droppable( {
drop: handleDropEvent
} );
$("img").draggable();
}
// global variables
var cardsInDeck = new Array();
var numberOfCardsInDeck = 15;
cardsInDeck[0] = "Ace";
cardsInDeck[1] = "Grace";
cardsInDeck[2] = "Susan";
cardsInDeck[3] = "Ian";
cardsInDeck[4] = "Barbara";
cardsInDeck[5] = "Brigadier";
cardsInDeck[6] = "Romana I";
cardsInDeck[7] = "K9";
cardsInDeck[8] = "Tegan";
cardsInDeck[9] = "Jamie";
cardsInDeck[10] = "Sarah Jane";
cardsInDeck[11] = "Jo";
cardsInDeck[12] = "Romana II";
cardsInDeck[13] = "Yates";
cardsInDeck[14] = "Leela";
var cardsDealt = new Array();
function dealAll(){
var z=0;
for (z=0;z<5;z++) {
cardsDealt[z] = new Image(z,dealCard(randomCard()));
}
}
function dealCard(i) {
if (numberOfCardsInDeck == 0) return false;
var $img = new Image();
$img.src = "images/Companions/" + cardsInDeck[i] + ".jpg";
// Here I set the ID of the object
$img.id=cardsInDeck[i];
$img.class='drag';
document.body.appendChild($img);
$('#'+$img.id).draggable();
removeCard(i);
return $img;
}
// deal randomly - works
function randomCard() {
return Math.floor(Math.random() * numberOfCardsInDeck);
}
function removeCard(c)
{
for (j=c; j <= numberOfCardsInDeck - 2; j++)
{
cardsInDeck[j] = cardsInDeck[j+1];
}
numberOfCardsInDeck--;
numberOfCardsInDeck--;
numberOfCardsInDeck--;
}
function handleDropEvent( event, ui ) {
alert("Fantastic! You chose " + ui.draggable.attr("id") + " to be your companion.");
// Here I want the id of the dropped object
}
</script>
</head>
<body>
<div id="container" div style="width:750px; margin:0 auto;">
<div id="page_content" style="left: 0px; top: 0px; width: 750px" class="auto-style8">
<!--Begin Assignment 10 --->
<div id="left" class="drop">
<img id="tardis" ></img>
</div>
<input type="button" value="Get Companions" id="deal" />
<div id="content" style="left: 0px; top: 0px; width: 750px">
</div>
</div>
</div>
</body>
</html>
It's supposed to generate 5 images, one of which can be selected to be dropped onto the target and generate an alert with the id of the image being dropped. Like I said, it works just fine in the fiddle - and the code is identical on the web page, so I don't understand what I'm doing wrong.
fiddle: http://jsfiddle.net/reaglin/FUvT8/6/
I ordered some code...and for me it worked
// global variables
var cardsInDeck = [],
numberOfCardsInDeck = 5;
cardsInDeck[0] = "Ace";
cardsInDeck[1] = "Grace";
cardsInDeck[2] = "Susan";
cardsInDeck[3] = "Ian";
cardsInDeck[4] = "Barbara";
cardsInDeck[5] = "Brigadier";
cardsInDeck[6] = "Romana I";
cardsInDeck[7] = "K9";
cardsInDeck[8] = "Tegan";
cardsInDeck[9] = "Jamie";
cardsInDeck[10] = "Sarah Jane";
cardsInDeck[11] = "Jo";
cardsInDeck[12] = "Romana II";
cardsInDeck[13] = "Yates";
cardsInDeck[14] = "Leela";
//load "init" when document it's ready
$(document).on('ready',init);
function init() {
$( "#draggable" ).draggable({ containment: "#left"});
$('.drop').droppable( {drop: handleDropEvent});
}
$('#deal').click(function () {
dealAll();
});
$('#reset-pictures').click(function(){
$('img.drag').remove();
numberOfCardsInDeck = 5;
});
// deal 5 cards at once - works
function dealAll(){
// 5 cards max, no repeat cards
while(numberOfCardsInDeck){
var rand = randomCard();
dealCard(rand);
}
}
//deal cards - works
function dealCard(i) {
//create id, remove space id
var id_picture = (cardsInDeck[i] +'-'+i).replace(/\s/g, '');
//validate not exist image
if (!!$('img#'+id_picture).length) {
return;
}
var $img = $('<img/>', { src : "http://debsiepalmer.com/images/companions/" + cardsInDeck[i] + ".jpg", id : id_picture, class : 'drag', 'data-info': cardsInDeck[i]
})
$('body').append($img);
$('img.drag').draggable();
numberOfCardsInDeck--;
}
// deal randomly - works
function randomCard() {
return Math.floor(Math.random() * cardsInDeck.length);
}
// this is what to do when card drops in tardis
function handleDropEvent( event, ui ) {
alert(ui.draggable.attr("data-info"));
}
DEMO
JSFinddle
Are you linking to JQuery correctly in the live version? Sometimes when moving from a development area to a live system the references mess up, you can find out if a reference is working or not by viewing the source code and entering in the link into the URL.
This is how you fix it: Take all the javascript (from $ (init) to the alert()) and place it at the bottom of the loaded page, inside the body, after all the elements. This ensures that the javascript knows what named elements you are talking about.
I would like to emphasise that this is not a tip for writing good javascript. The problem arises because it's bad javascript to begin with. Well written pages do not rely on the position of the code within the page, rather the opposite in fact.
Postscript: I literally did the following: I came here after googling "drag and drop"; I didn't fully read the actual question; I went to the jfiddle; I copied all the code for my own purposes; I couldn't get it to work; I fixed it (just trial and error really); I fixed the bug which is still present even on the jfiddle page; and then I came back here to find out what the original query had been!
The other bug is the fact that you can't drag the images of "Romana I", "Romana II" and "Sarah Jane". As the code makes the array values the id of the image elements, maybe others can instantly spot what causes that problem.
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.