I'm having a hard time initializing a leaflet map in fullscreen in a jquery mobile project.
When I init the map from a $(document).on('pagecreate')-event the map starts as a very small layer sitting on the left top of the browser, and if I resize the browser just a little, the map pops into fullscreen and stays there.
On the other hand, when i init the map from a window.onload-event - everything inits perfect.
As i understand it using pagecreate is preferable, so i wanna use it.
aspx:LeafletLoad.aspx
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="LeafletLoad.aspx.cs" Inherits="RadikaleNu.LeafletLoad" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Leflet load</title>
<link href="Content/jquery.mobile-1.4.5.css" rel="stylesheet" />
<link href="Content/leaflet.css" rel="stylesheet" />
<link href="Content/leafletload.css" rel="stylesheet" />
<!-- Javascript libraies -->
<script src="Scripts/jquery-2.1.3.js"></script>
<!--<script src="Scripts/jquery-2.1.3.min.js"></script>-->
<script src="Scripts/jquery.mobile-1.4.5.js"></script>
<script src="Scripts/leaflet-src.js"></script>
<script src="Scripts/leafletload.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div data-role="page" id="MapPage" >
<div role="main" class="ui-map">
<!-- Map -->
<div id="map"></div>
</div>
</div>
</form>
</body>
</html>
Javascript: leafletload.js
var map = null;
var osm = null;
//This works perfectly - the map starts fullscreen
/*
window.onload = function () {
InitMap();
};
*/
//This works not so perfectly - the leflet map starts very minimized in the top left corneruntil browser resize.
$(document).on('pagecreate', function(){
InitMap();
});
function InitMap() {
// set up the map
map = new L.Map('map');
osm = new L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.{ext}', {
subdomains: 'abcd',
minZoom: 0,
maxZoom: 20,
ext: 'png'
});
// start the map in Copenhagen, Denmark
map.setView(new L.LatLng(55.682665, 12.536639), 9);
map.addLayer(osm);
}
CSS: leafletload.css
body {
margin: 0;
}
#map {
height: 100%;
}
.ui-map {
position: absolute;
top: 0px;
right: 0;
bottom: 0px;
left: 0;
padding: 0 !important;
}
On the other hand, when i init the map from a window.onload-event - everything inits perfect.
You'll want to use onload. The gist of it is that events like pagecreate and ready (also known as $(function(){}) fire when the page's content is loaded but the page isn't laid out - your browser doesn't know yet what size the map will be. Leaflet needs that size in order to draw the map, and since pagecreate doesn't let it know that, it draws a tiny, cropped map as you see currently.
Related
I finally have given up as I can't get AR.JS to run with a simple NFT marker that should display a Video or a PNG image over it. If I run it with a GLTF Model it works without problems. I tried changing the scale and position to see if it is somehow behind the marker etc. but that doesn't help in any way.
The console doesn't throw me any errors as well.
Could anybody throw me a short fix as I tried a lot of different stuff but nothing gets displayed.
Link to page with marker https://natrium83.github.io
Link to 3D example https://natrium83.github.io/ar3d/
Link to Picture example https://natrium83.github.io/arbild/
Link to Video example https://natrium83.github.io/arvideo/
Here is the code for the image:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Image based tracking AR.js demo</title>
<!-- import aframe and then ar.js with image tracking / location based features -->
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
<!-- style for the loader -->
<style>
.arjs-loader {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
.arjs-loader div {
text-align: center;
font-size: 1.25em;
color: white;
}
</style>
</head>
<body style="margin : 0px; overflow: hidden;">
<!-- minimal loader shown until image descriptors are loaded. Loading may take a while according to the device computational power -->
<div class="arjs-loader">
<div>Loading, please wait...</div>
</div>
<!-- a-frame scene -->
<a-scene
vr-mode-ui="enabled: false;"
renderer="logarithmicDepthBuffer: true;"
embedded
arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;">
<!-- a-nft is the anchor that defines an Image Tracking entity -->
<!-- on 'url' use the path to the Image Descriptors created before. -->
<!-- the path should end with the name without the extension e.g. if file is trex.fset' the path should end with trex -->
<a-nft
type="nft"
url="https://natrium83.github.io/ar3d/assets/marker_image"
smooth="true"
smoothCount="10"
smoothTolerance=".01"
smoothThreshold="5">
<!-- as a child of the a-nft entity, you can define the content to show. here's a GLTF model entity -->
<a-entity>
<a-image src="https://natrium83.github.io/arbild/assets/bild.png"
scale="5 5 5"
position="100 100 0"
crossorigin
></a-image>
</a-entity>
</a-nft>
<!-- static camera that moves according to the device movemenents -->
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
'''
The problem might be the size of the media. Despite the documentation saying '1' = 1 meter, I had to set the size to height='160' width='120' to get mine working. Hope it works for you as well.
I just saw this thread! I have kinda the same problem with image tracking. But I have tried with the marker-based something as follow to play video beside a marker:
<!DOCTYPE html>
<html>
<title>#</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
<script src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v4.1.2/dist/aframe-extras.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
AFRAME.registerComponent('vidhandler', {
init: function() {
this.toggle = false;
this.vid = document.querySelector("#vid");
this.vid.pause();
},
tick: function() {
if (this.el.object3D.visible == true) {
if (!this.toggle) {
this.toggle = true;
this.vid.play();
}
} else {
this.toggle = false;
this.vid.pause();
}
}
});
function refrespage() {
location.reload();
}
function playvid() {
vid.play();
}
</script>
<body style="margin : 0px; overflow: hidden;">
<a-scene embedded artoolkit='sourceType: webcam; detectionMode: mono; maxDetectionRate: 60; canvasWidth: 200; canvasHeight: 200'>
<a-assets>
<video preload="auto" id="vid" autoplay loop="true" src="foo.mp4" crossorigin webkit-playsinline playsinline controls>
<source src="foo.mp4">
</video>
</a-assets>
<a-marker id="memarker"
type="pattern"
preset="hiro"
smooth="true"
smoothCount="10"
smoothTolerance="0.01"
smoothThreshold="5" vidhandler>
<a-plane scale = '10 10 0' position='-4.5 0.1 -5.5' rotation="-90 0 0" material='transparent:true;src:#vid' controls></a-plane>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
Still working on image-tracking though. I'd post an update if I got something.
Side note: this might not work on ios devices
I am trying to archive similar effect to facebook's cover and profile image when one is placed top of the other. I tried to add css like this:
.profileImage{
position: relative !important;
z-index: -1 !important;
}
it does not change anything. My cover photo is in <Image> tag and my profile is in <Avatar> if that's important. Thanks :)
With the right CSS you can do it pretty easy.
Here a example:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta charset="utf-8">
<title>MVC with XmlView</title>
<style>
.profileImage {
position: absolute !important;
margin-top: 50px !important;
margin-left: -100px !important;
}
</style>
<!-- Load UI5, select "blue crystal" theme and the "sap.m" control library -->
<script id='sap-ui-bootstrap' src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js' data-sap-ui-theme='sap_belize_plus' data-sap-ui-libs='sap.m' data-sap-ui-xx-bindingSyntax='complex'></script>
<!-- DEFINE RE-USE COMPONENTS - NORMALLY DONE IN SEPARATE FILES -->
<!-- define a new (simple) View type as an XmlView
- using data binding for the Button text
- binding a controller method to the Button's "press" event
- also mixing in some plain HTML
note: typically this would be a standalone file -->
<script id="view1" type="sapui5/xmlview">
<mvc:View xmlns="sap.m" xmlns:f="sap.f" xmlns:mvc="sap.ui.core.mvc" controllerName="my.own.controller">
<Image src="http://via.placeholder.com/350" height="150px"></Image>
<f:Avatar class="profileImage"></f:Avatar>
</mvc:View>
</script>
<script>
// define a new (simple) Controller type
sap.ui.controller("my.own.controller", {});
/*** THIS IS THE "APPLICATION" CODE ***/
// instantiate the View
var myView = sap.ui.xmlview({
viewContent: jQuery('#view1').html()
}); // accessing the HTML inside the script tag above
// put the View onto the screen
myView.placeAt('content');
</script>
</head>
<body id='content' class='sapUiBody'>
</body>
</html>
I am trying to display Google Map in my ASP.net web form page.
The javascript is as below:
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=xxxxx&sensor=false">
</script>
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mapcv = document.getElementById('map-canvas');
map = new google.maps.Map(mapcv,
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
I used the following HTML and it doesn't work if I put the Div Tag within the form tag.
<form id="form1" runat="server">
<div id="map-canvas" ></div>
</form>
But if I move Div tag outside of the form tag as below, it works
<div id="map-canvas" ></div>
<form id="form1" runat="server">
</form>
I want to put the Div tag inside the form. Could you please help me how I could do that? Thanks.
Simply set the div width and height to see it! Your map is there but not visible :)
<div id="map_canvas" style="width:600px;height:400px"></div>
You could also set them in css in the header:
<style>
html, body, #form1, #map_canvas
{
margin: 0;
padding: 0;
height: 100%;
}
</style>
There should not be any problem if it is inside form tag. I have posted a example here.. Can you take a look http://deepumi.wordpress.com/2010/03/28/google-map-3-with-multiple-locations-in-asp-net-c/
I am trying to use the jquery-mobile spinner but it doesn't seem to work
From the official docs ( http://jquerymobile.com/demos/1.2.0/docs/pages/loader.html ), i tryied running this in the chrome console and it works
$.mobile.loading( 'show', {
text: 'foo',
textVisible: true,
theme: 'z',
html: "<i class='icon-spinner icon-4x'></i>"
});
but if i try running this, from application.html.haml or console, doesn't seem to work
$( document ).bind( 'mobileinit', function(){
$.mobile.loader.prototype.options.text = "loading";
$.mobile.loader.prototype.options.textVisible = false;
$.mobile.loader.prototype.options.theme = "a";
$.mobile.loader.prototype.options.html = "<i class='icon-spinner icon-4x'></i>";
});
it displayes a shadow instead of my spinner :-? .
What am i missing here?
Thanks :)
Solution:
Working jsFiddle: http://jsfiddle.net/Gajotres/vdgB5/
Mobileinit event must be initialized before jQuery Mobile is initialized and after jQuery. Also some additional changes to css must be done for this to work.
First of all, we need to override default ui-loader-default class because its opacity is to low and final spinner is hard to see. Change opacity value how ever you want.
.ui-loader-default {
opacity: 1 !important;
}
And this is our spinner. Because you are using custom i tag we need to use display: block, without it spinner will be hidden.
.custom-spinner {
width: 37px !important;
height: 37px !important;
background-image:url('http://pictures.reuters.com/ClientFiles/RTR/Images/ajax-loader.gif');
display: block;
}
Here's a working example:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<style>
.ui-loader-default {
opacity: 1 !important;
}
.custom-spinner {
width: 37px !important;
height: 37px !important;
background-image:url('http://pictures.reuters.com/ClientFiles/RTR/Images/ajax-loader.gif');
opacity: 1 !important;
display: block;
}
</style>
<script type="text/javascript" src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
<script>
$( document ).bind( 'mobileinit', function(){
$.mobile.loader.prototype.options.text = "loading";
$.mobile.loader.prototype.options.textVisible = false;
$.mobile.loader.prototype.options.theme = "a";
$.mobile.loader.prototype.options.html = "<i class='custom-spinner'></i>";
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
$(document).on('pageshow', '#index', function(){
$.mobile.loading( 'show');
});
</script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
I am using Google maps Javascript API. I want to overlay a Bootstrap button on top of map, which will initiate a modal overlay with helpful hints.
The code below works, but the modal button is not on top of the map. Help appreciated.
Here's an example in JSBin: JSBIN
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/base/jquery-ui.css'/>
<link href='http://twitter.github.com/bootstrap/assets/css/bootstrap.css' rel='stylesheet' type='text/css' />
<script src='http://code.jquery.com/jquery.min.js'></script>
<script src='http://code.jquery.com/ui/jquery-ui-git.js'></script>
<script type='text/javascript' src='http://www.google.com/jsapi'></script> <!--Load the Google chart AJAX API-->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <!-- Google map API -->
<script src='http://twitter.github.com/bootstrap/assets/js/bootstrap.js'></script>
<title>Google Maps</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map_canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<!-- MODAL OVERLAY START -->
<a data-toggle='modal' href='#myModal' class='btn btn-info pull-left'><i class='icon-white icon-info-sign'></i> Hint</a>
<div id='myModal' class='modal hide fade' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal' aria-hidden='true'></button>
<h3 id='myModalLabel'>Welcome</h3>
</div>
<div class='modal-body'>
<h4>Quick Hints</h4>
<p><small>Blah blah.</small></p>
</div>
<div class='modal-footer'>
<button class='btn' data-dismiss='modal'>Close</button>
</div>
</div>
<!-- MODAL OVERLAY END -->
<div id="map_canvas"></div>
It's not on the map because the map is just another element on the page, and by default all elements are positioned relatively. You can get around this by extending the bootstrap CSS for btn, upping the z-index, and positioning the element absolutely.
Extend the CSS by adding an extra class to your button. Lets call it "my_mo".
.my_mo {
position:absolute;
z-index:2;
}
For this to work, the new CSS has to come after the bootstrap CSS (so the positioning setting is overridden).