I need consume my WMS on leaflet and display it in web view. When I open my leaflet app in broser is pretty pure and readable. When same code run in android, it is much worst readable. I've tried add detectRetina: true to wms layer, but text was very small, and worst readable as now. On the images you can see differents.
Here is my full code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LEaflet</title>
<link rel="stylesheet" href="leaflet/leaflet.css">
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body style="padding:0; margin:0; height: 100vh; width: 100vw;">
<div id="map" style="height: 100vh; width: 100vw;"></div>
</body>
<script src="leaflet/leaflet.js"></script>
<script>
var map = L.map('map', {
minzoom:13
}).fitWorld();
var wmsLayer = L.tileLayer.wms('http://10.0.2.2:8080/geoserver/TEST/wms?', {
layers: 'TEST:MyBaseLayer'
//detectRetina: true
}).addTo(map);
</script>
</html>
You will have to resort to the trick of having tiles double the size, with a zoomOffset of -1, i.e.:
var tileLayer = L.tileLayer(tileUrlTemplate, {
tileSize: 512,
zoomOffset: -1
}).addTo(map);
Check the Leaflet documentation for L.TileLayer about those options. They apply to L.TileLayer.WMS as well.
Related
I'm trying to build this directory type of app and I'm using iframe to embed other sites into the app.I'd also like the links of the embedded sites to open within the parent window.
With the Progressive web app version, this works great and there are no redirections to external pages.
With the Native android version, the iframe links are redirected back to the original web site.
Here is the code.
var app = angular.module('bible', []);
app.controller('MainCtrl', function($scope, $element) {
});
app.directive('iframeDirective', ['$sce', function($sce) {
return {
restrict: 'E',
template: '<iframe src="{{ trustedUrl }}" frameborder="0" allowfullscreen></iframe>',
link: function(scope) {
scope.trustedUrl = $sce.trustAsResourceUrl("https://www.bible.com/bible/100/JHN.3");
}
}
}]);
*{margin:0;padding:0}
html, body {height:100%;width:100%;-webkit-overflow-scrolling:touch;position:fixed; overflow:auto;}
table {height:100%;width:100%;table-layout:static;border-collapse:collapse}
iframe {height:100%;width:100%}
.header {border-bottom:1px solid #000}
.content {height:100%}
<!DOCTYPE html>
<html ng-app="bible">
<head>
<meta charset="utf-8" />
<title>Bible app</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="style.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js" data-semver="1.2.0"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<iframe-directive></iframe-directive>
</body>
</html>
Any help is much appreciated. Thank you!
Finally got it to work for Android replacing iframe with object data:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<object data="https://www.bible.com/bible/100/JHN.3" width="100%" height="700" type="text/html">
Alternative Content
</object>
</body>
</html>
Fully functional in Android!
Downside is that it doesn't scroll in IOS yet!
I am testing a simple script for a larger solution; Im retrieving information from an external JSON file and displaying it within a PhoneGap app. The script works as needed, except when I change the content (not the structure) of the external JSON file. In fact I can even remove the JSON file from the server and the script still displays the original JSON content. Apparently there is something caching somewhere. Is there a way to disable such?
BTW Im running this on a local device via USB debugging not an emulator.
Here is the code (the console log is present for earlier debugging via the browser):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body>
<div class="app">
<script>
$( document ).ready(function() {
console.log( "ready!" );
});
$.getJSON( "http://www.serverxyz.com/test.json", function( data ) {
var items = [];
$.each( data, function( key, val ) {
items.push( "<li id='" + key + "'>" + val + "</li>" );
});
$( "<ul/>", {
"class": "my-new-list",
html: items.join( "" )
}).appendTo( "body" );
});
</script>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
and here is the JSON content:
{
"Goal One": "Activity One Completed",
"Goal Two": "Activity Two Completed",
"Goal Three": "Activity Three Completed",
}
Looks like I can use the cache:false for this. Hope someone finds this helpful.
I am testing polymer with phonegap.When I try this with the phonegap app,it is working but when i build it with adobe build and try it with my device it is showing a blank screen.
This is the code:
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/paper/webcomponentsjs/webcomponents.js">
</script>
<meta name="viewport"
content="width=device-width, minimum-scale=1.0, initial-scale=1.0,user-scalable=yes">
<link rel="import"
href="bower_components/paper/font-roboto/roboto.html">
<link rel="import"
href="bower_components/paper/core-header-panel/core-header-panel.html">
<link rel="import"
href="bower_components/paper/core-toolbar/core-toolbar.html">
<link rel="import"
href="bower_components/paper/paper-tabs/paper-tabs.html">
<link rel="import"
href="bower_components/paper/paper-elements/paper-elements.html">
<link rel="import"
href="bower_components/paper/core-drawer-panel/core-drawer-panel.html">
<style>
html,body{
height : 100%;
margin : 0;
background-color:#e5e5e5;
font-family : 'RobotoDraft' , 'sans-serif';
-webkit-tap-highlight-color : rgba(0,0,0,0);
}
core-toolbar {
background-color:#4285f4;
color : white;
}
.dropdown{
color : black;
}
</style>
<script>
app.initialize();
</script>
</head>
<body>
<core-toolbar>
<paper-icon-button icon = "menu">
</paper-icon-button>
<span flex>Hello world</span>
<paper-menu-button>
<paper-icon-button icon = "create"></paper-icon-button>
<paper-dropdown class = "dropdown" halign = "right">
<paper-menu>
<paper-item><div id = "hi">hi</div></paper-item>
</paper-menu>
</paper-dropdown>
</paper-menu-button>
</core-toolbar>
<paper-button>Test</paper-button>
</body>
</html>
I have made other apps but not with polymer that work with phonegap.
I am running android 5.0.2.
Thanks.
Disabling hardware acceleration is an (ugly) workaround.
in an empty HTML page,i try to display a banner including the link of my app
I used this as tutorial:
http://www.dunnsolutions.com/content/application-development-blog/-/blogs/smart-app-banners-for-ios-and-android
For the moment, i just try to make it work locally, in an empty page. This is my page:
<html>
<head>
<title>Hulu Plus</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="author" content="Hulu LLC">
<meta name="google-play-app" content="app-id=MyAppIdIsHere">
<link rel="stylesheet" href="jquery.smartbanner.css" type="text/css" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="jquery.smartbanner.js"></script>
<script type="text/javascript">
$(function () {
$.smartbanner({
title: 'Audience Opinion',
author: 'Dunn Solutions Group'
});
})
</script>
</head>
<body>
</body>
</html>
My html page and the js/css files are located in the same folder. there is no problem of path.
Does anyone know why this code does not work ?
Thanks in advance!
The default option is to only display the bar on a either an Android or iOS device. If you open the page on a desktop, nothing appears. You can set the 'force' option to 'windows' in order to have it appear on your desktop.
$(function () { $.smartbanner({ daysHidden: 0, daysReminder: 0, title:'Hulu', force:'windows' }) })
All of the other options can be found on the github page: https://github.com/jasny/jquery.smartbanner
I am new one Android..i created one project in Html...it is running perfectly what i want..i want to run this html project in android emulator..i dont know what is the reason..... Design is came in Android emulator....but drag and drop is only not working in android Emulator.. i have used phonegap to run the html code..if u know pls tel me..Thanks in advance..
This is my Html(jquery code)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo by scaillerie</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
.ui-layout-center {
width: 400px;
height: 300px;
border: 1px solid black;
}
.ui-state-hover {
background-color: #f9ffff;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
jQuery(function() {
jQuery(".component").draggable({
// use a helper-clone that is append to 'body' so is not 'contained' by a pane
helper: function() {
return jQuery(this).clone().appendTo('body').css({
'zIndex': 5
});
},
cursor: 'move',
containment: "document"
});
jQuery('.ui-layout-center').droppable({
activeClass: 'ui-state-hover',
accept: '.component',
drop: function(event, ui) {
if (!ui.draggable.hasClass("dropped"))
jQuery(this).append(jQuery(ui.draggable).clone().addClass("dropped").draggable());
}
});
});
});//]]>
</script>
</head>
<body>
<div class="component">Element 1</div>
<div class="component">Element 2</div>
<div class="ui-layout-center"> </div>
</body>
</html>
Unfortunately, jQuery UI doesn't work properly with touch events. There are, however, a number of plugins to enable touch in jQuery UI, Touch Punch is one: http://touchpunch.furf.com/
You should also consider updating the version of jQuery you're using...v1.4.4 is 3 years old now.