I am trying to implement the side-by-side example of openlayers 3: http://heiri.5cz.de/test.html, but the DOM rendered version of the map is not displayed. I am opening the page with Internet Explorer 11 under Windows 8.1. What am I missing?
Contents of test.html:
<!DOCTYPE html>
<html>
<head>
<title>Side-by-side example</title>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.4.0/resources/bootstrap/css/bootstrap.min.css" type="text/css">
<script src="http://openlayers.org/en/v3.4.0/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.4.0/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.4.0/build/ol.js"></script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.4.0/resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span4">
<h4>Canvas</h4>
<div id="canvasMap" class="map"></div>
</div>
<div class="span4">
<h4>WebGL</h4>
<div id="webglMap" class="map"></div>
<div id="no-webgl" class="alert alert-error" style="display: none">
This map requires a browser that supports WebGL.
</div>
</div>
<div class="span4">
<h4>DOM</h4>
<div id="domMap" class="map"></div>
</div>
</div>
</div>
<script>
var domMap = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'sat'})
})
],
renderer: 'dom',
target: 'domMap',
view: new ol.View({
center: [0, 0],
zoom: 1
})
});
if (ol.has.WEBGL) {
var webglMap = new ol.Map({
renderer: 'webgl',
target: 'webglMap',
layers: domMap.getLayers(),
view: domMap.getView()
});
} else {
var info = document.getElementById('no-webgl');
/**
* display error message
*/
info.style.display = '';
}
var canvasMap = new ol.Map({
target: 'canvasMap',
layers: domMap.getLayers(),
view: domMap.getView()
});
</script>
</body>
</html>
The problem is that your map divs do not have a height.
If you look at http://openlayers.org/en/v3.4.0/examples/side-by-side.html and inspect the page using your favorite dev tools you'll observe that the map divs have height.
The difference between your example and ol3's side-by-side.html example is the layout.css file that the side-by-side.html example uses.
Related
I try to get a jquery mobile multipage form with local variables running, but I have two problems.
a) the second value is not updated after save, but reloaded in the edit page
b) when I continuously change between view and edit (4 times), the edit-button calls the edit page (see URL), but the page is not shown
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div id="view" data-role="page">
<div id="view-head" data-role="header">
<h1>View</h1>
Edit
</div>
<div id="content" data-role="content">
<h2 id="unit-title">x</h2>
<p id="unit-summary">y</p>
</div>
</div>
<div id="edit" data-role="page">
<div id="edit-head" data-role="header">
View
<h1>Edit</h1>
</div>
<form>
<label for="edit-title" class="ui-hidden-accessible">Unit title</label>
<input type="text" name="edit-title" id="edit-title" data-clear-btn="true" placeholder="Title ...">
<label for="edit-summary" class="ui-hidden-accessible">Unit summary</label>
<textarea name="edit-summary" id="edit-summary" placeholder="Summary ..."></textarea>
<input type="button" name="edit-submit" id="edit-submit" value="Save">
</form>
</div>
<script type="text/javascript">
var unit = { "id":"1" , "title" : "Hello", "summary" : "World" };
$(document).on("pagebeforeshow","#view",function() {
document.getElementById('unit-title').innerHTML = unit.title;
document.getElementById('unit-summary').innerHTML = unit.summary;
});
$(document).on("pagebeforeshow","#edit",function() {
$(document).on('click', '#edit-submit', function() {
unit.title = document.getElementById('edit-title').value;
unit.summary = document.getElementById('edit-summary').innerHTML;
$.mobile.navigate("#view", {});
});
document.getElementById('edit-title').value = unit.title;
document.getElementById('edit-summary').innerHTML = unit.summary;
});
</script>
</body>
</html>
Here is the complete example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div id="view" data-role="page">
<div id="view-head" data-role="header">
<h1>View</h1>
Edit
</div>
<div id="view-content" data-role="content">
<h2 id="unit-title">x</h2>
<p id="unit-summary">y</p>
</div>
</div>
<div id="edit" data-role="page">
<div id="edit-head" data-role="header">
View
<h1>Edit</h1>
</div>
<form>
<label for="edit-title" class="ui-hidden-accessible">Unit title</label>
<input type="text" name="edit-title" id="edit-title" data-clear-btn="true" placeholder="Title ...">
<label for="edit-summary" class="ui-hidden-accessible">Unit summary</label>
<textarea name="edit-summary" id="edit-summary" placeholder="Summary ..."></textarea>
<input type="button" name="edit-submit" id="edit-submit" value="Save">
</form>
</div>
<script type="text/javascript">
var unit = { "title" : "Hello", "summary" : "World" };
$(document).on("pagebeforeshow","#view",function() {
document.getElementById('unit-title').innerHTML = unit.title;
document.getElementById('unit-summary').innerHTML = unit.summary;
});
$(document).on("pagebeforeshow","#edit",function() {
document.getElementById('edit-title').value = unit.title;
document.getElementById('edit-summary').innerHTML = unit.summary;
});
$(document).on('click', '#edit-submit', function() {
unit.title = document.getElementById('edit-title').value;
unit.summary = document.getElementById('edit-summary').value;
$.mobile.navigate("#view", {});
});
</script>
</body>
</html>
When run, if I click the link at the bottom of the index page to get to the map page, I see the map briefly, filling a quarter of the screen, before it vanishes. What am I doing wrong?
Here is the code for the index page, which creates the map page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
<script type="text/javascript">
function initialize(){
if(!window.navigator.onLine){
alert("An internet connection is required to use the MetPetDB App. Please find a connection and reopen the app.");
var element = document.getElementById("mainPage");
element.parentNode.removeChild(element);
document.getElementById("mainBody").innerHTML = "<p>An internet connection is required to use this app.</p>";
}
}
</script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<script type="text/javascript">
// When map page opens get location and display map
$('.page-map').live("pagecreate", function() {
initializeMap(42,-73);
});
function initializeMap(lat,lng) {
var latlng = new google.maps.LatLng(lat, lng);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
}
</script>
</head>
<body id="mainBody" onload="initialize()">
<div id="mainPage" data-role="page" data-theme="e">
<div data-role="header">
<!-- <img src="headerlogo.png" />-->
<br />
<p style="text-align:center">To begin searching for samples, select one of the following search methods.</p>
</div>
<div data-role="content" style="height: 100%;">
<a data-role="button" data-theme="a" href="useMyLocation.html">Use My Location</a>
<a data-role="button" data-theme="a" href="InputCoordinates.html">Input Coordinates</a>
<a data-role="button" data-theme="a" href="selectRegion.html">Select Region</a>
Testing
</div>
</div>
</body>
</html>
And here is the map page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
</head>
<body>
<div data-role="page" data-theme="e" class="page-map" style="width:100%; height:100%;">
<div data-role="header"><h1>Map Page</h1></div>
<div data-role="content" style="width:100%; height:100%; padding:0;">
<div id="map_canvas" style="width:100%; height:100%;"></div>
</div>
</div>
</body>
</html>
The following code works: jsfiddle
I took your code, simplified it (using a single page template instead of the multi page one, but just to make it easier for jsfiddle) and moved all scripts inside the head.
Also be careful with phonegap, you should handle the onDeviceReady event, and not the body onload event. Even then there's a different method there to check if you're online.
I'm doing rel="external" on the link that opens this page, so the DOM reloads which should rule out a lot of problems.
Nevertheless, with the following code I get a huge red background with a nice header and footer-- the map just doesn't initialize despite that the function is being called. Can anyone spot the problem? This bug has been holding me up forever; I've tried a million things including redesigning it as a multipage template without rel="external", but that didn't work either.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript">
$(function(){initializeMap(42,-73);});
function initializeMap(lat,lng) {
var latlng = new google.maps.LatLng(lat, lng);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var crosshairLayer = new google.maps.KmlLayer('http://freezoo.alwaysdata.net/justcrosshair2.kml',
{preserveViewport: true});
crosshairLayer.setMap(map);
google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );
}
</script>
</head>
<body>
<div data-role="page" data-theme="e" data-add-back-btn="true" class="map1" id="testing">
<div data-role="header"><h1>Map Page</h1></div>
<div id="content" style="position:absolute; bottom:40px; top:40px; left:0px; right:0px; background:green;">
<div id="map_canvas" style="position:absolute; top:0px; bottom:0px; width:100%; background:red;"></div>
</div>
<div data-role="footer" style="position:absolute; bottom:0px; width:100%;">
<h1>Working!</h1>
</div>
</div>
</body>
</html>
Your code doesn't load the google maps script. Like this for example:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
I init my accordion in the following way:
$(function() {
$("#gallery_accordion").accordion({ event: false });
$("#gallery_accordion").click(function(e) {
var contentDiv = $(this).next("div");
contentDiv.load($(this).find("a").attr("href"));
});
});
The content is loaded onclick but the accordion is invisible.
Nothing is shown. Any help highly appreciated.
Thanks.
Update: The height stays at '0'. Any reason for that?
Here is the markup:
<div id="gallery_accordion">
<h3>My first gallery</h3>
<div id="gallery369">
</div>
<h3>The second gallery</h3>
<div id="gallery381">
</div>
</div>
Try changing your initial call to:
$("#gallery_accordion").accordion({ header: "h3", event : false });
And your HTML to:
<div id="gallery_accordion">
<div>
<h3>My first gallery</h3>
<div id="gallery369">
</div>
</div>
<div>
<h3>The second gallery</h3>
<div id="gallery381">
</div>
</div>
</div>
Each of your cells needs to have its own div tag and in the initial call you have now set the header to the H3 tag.
Hope this helps.
Here is a sample doc that loads the accordion:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery UI Example Page</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/themes/start/jquery-ui.css" rel="Stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
// Accordion
$("#gallery_accordion").accordion({ header: "h3"});
$("#gallery_accordion a").click(function(evt) {
var galleryId = $(this).attr('href').split('#')[1];
var contentDiv = $('#' + 'gallery' + galleryId);
if(contentDiv.html() == " ") {
var galleryContent = getGallery(galleryId);
contentDiv.html(galleryContent);
}
});
var galleryIdI = $('#gallery_accordion div div:first').attr('href').split('#')[1];
var contentDivI = $('#' + 'gallery' + galleryId);
var galleryContentI = getGallery(galleryId);
contentDivI.html(galleryContentI);
});
</script>
</head>
<body>
<!-- Accordion -->
<h2 class="demoHeaders">Accordion</h2>
<div id="gallery_accordion">
<div>
<h3>Gallery 1</h3>
<div id="gallery369"> </div>
</div>
<div>
<h3>Gallery 2</h3>
<div id="gallery381"> </div>
</div>
<div>
<h3>Gallery 3</h3>
<div id="gallery392"> </div>
</div>
</div>
</body>
</html>
Let's say I have something set to be dragged:
<div class="container">
<div id="draggable-1"></div>
<div id="draggable-3"></div>
<div id="draggable-4"></div>
<div id="draggable-5"></div>
</div>
Is it possible to set jqueryui's draggable api so I can drag multiple draggable elements at the same time?
Thanks.
this is a guess but try
set no style sheet on container so it is set as a group. then do this
$(function() {
$(".container").draggable();
});
then when you drag the entire container drags as a group including all elements inside.
here is a working example of what i did.
<html>
<head>
<style type="text/css">
#draggable-1,#draggable-2,#draggable-3,#draggable-4,#draggable-5 {
width:100px;
height:100px;
background:red;
margin-bottom:10px;
}
.container {
}
</style>
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.draggable.js"></script>
<script type="text/javascript">
$(function() {
$(".container").draggable();
});
</script>
</head>
<body>
<div class="container">
<div id="draggable-1"></div>
<div id="draggable-3"></div>
<div id="draggable-4"></div>
<div id="draggable-5"></div>
</div>
</body>
</html>