I'm having trouble displaying a map with OpenLayers v3 in JavaFX's WebView. Here's my code:
openLayersV3.html
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://openlayers.org/en/v3.19.1/css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 400px;
}
</style>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList"></script>
<script src="https://openlayers.org/en/v3.19.1/build/ol.js"
type="text/javascript"></script>
<title>OpenLayers 3 example</title>
<script type="text/javascript">
function loadMap() {
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([10.0, 53.55]),
zoom: 10
})
});
}
</script>
</head>
<body onLoad="loadMap()">
<h2>My Map</h2>
<div id="map" class="map"></div>
</body>
</html>
And here's an excerpt of the loader:
OsmView.java
...
protected WebView webView = new WebView();
protected WebEngine webEngine = webView.getEngine();
public OsmView() {
final URL urlOsmMap = getClass().getResource("/some/package/name/openLayersV3.html");
webEngine.load(urlOsmMap.toExternalForm());
getChildren().add(webView);
}
...
When I load the html in a browser like IE or Firefox, it shows without any complications. But in the Java program, there is only a blank page with the h2 ("My Map"). But the JavaScript doesn't load. So, what am I doing wrong here?
Ok, actually I found a solution: the requestAnimationFrame is not found so you have to add the following lines before every other javascript stuff:
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback, element) {
window.setTimeout(callback, 1000 / 60);
};
})();
var requestAnimationFrame = window.requestAnimFrame;
Related
I am trying to write the tests for a Backbone app which uses twig and symphony to render the underscore templates, using mocha, chai and sinon, with blanket for code-coverage and phantomjs for browser simulation. I have managed to load the template markup into test.html by doing the following in the body tag:
<!-- fixtures -->
<script>
$(function(){
$("#fixtures").load("fixtures/comment-fixture.html");
});
</script>
I have created a html fixture, or at least that is what I was aiming for, however I still get the following error when running my tests:
TypeError: 'undefined' is not an object (evaluating 'text.replace')
I understand that it refers to basically underscore evaluating _template(undefined), but I don't understand why it is doing that. Has anyone come across the a similar issue before or know why it is triggering this error?
This is my set-up:
Backbone view I want to test:
var CommentView = Backbone.View.extend({
//... is a list tag.
tagName: "li",
model: null,
// Cache the template function for a single item.
template: _.template($('#comment-template').html()),
// This is the timeout used to re-render the times
refreshTimer: null,
initialize: function(options) {
this.model = options.model;
this.listenTo(this.model, 'change', this.render);
this.listenTo(Backbone, 'stopCommentRefresh', this.stopRefreshTimer);
},
render: function() {
this.$el.html(this.template(this.model.renderAttributes()));
this.refreshTimer = setTimeout(_.bind(this.render, this), 60000);
return this;
},
// If you hit `enter`, we're through editing the item.
updateOnEnter: function(e) {
if (e.keyCode == 13) this.close();
},
stopRefreshTimer: function () {
clearTimeout(this.refreshTimer);
this.remove();
}
});
My fixture file for it :
<script type="text/template" id="comment-template">
<article class="comment">
<h4><%- user.username %></h4>
<p><%- comment %></p>
<time><%- time %></time>
</article>
</script>
My test file for it (so far nothing special):
describe("Comment View", function () {
before(function () {
// create test fixture
this.$fixture = $('<li id="comment-view-fixture"></li>');
});
beforeEach(function () {
// empty out and rebind the fixture for each run
this.$fixture.empty().appendTo($("#fixtures"));
// new default model and view for each test
this.view = new CommentView ({
el: this.$fixture,
model: new Comment({
comment: "Hello world!",
created: new Date(),
modified: new Date(),
user: {
username: "Mario"
}
})
});
});
afterEach(function () {
this.view.model.destroy();
});
after(function () {
$("#fixtures").empty();
});
});
And my test.html file:
<html>
<head>
<title>Backbone.js Tests</title>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="js/lib/mocha.css" />
</head>
<body>
<div id="blanket-main" class="hidden" style="display: none;"></div>
<div id="mocha"></div>
<!-- Utility libraries -->
<script src="js/lib/mocha.js"></script>
<script src="js/lib/chai.js"></script >
<script src="js/lib/sinon-chai.js"></script >
<script src="js/lib/sinon.js"></script >
<script src="js/lib/chai-datetime.js"></script>
<!-- JavaScript Coverage Libraries. -->
<script src="js/lib/blanket.js"></script>
<!-- jquery library -->
<script src="../../../../ApiBundle/Resources/public/js/thirdParty/jquery-1.11.js"></script>
<!-- fixtures -->
<script>
$(function(){
$("#fixtures").load("fixtures/comment-fixture.html");
});
</script>
<!-- JavaScript Core Libraries -->
<script src="../../../../ApiBundle/Resources/public/js/thirdParty/underscore.js"></script>
<script src="../../../../ApiBundle/Resources/public/js/thirdParty/jquery.dataTables.js"></script>
<script src="../../../../ApiBundle/Resources/public/js/thirdParty/backbone.js"></script>
<!-- Javascript Application Libraries - Views -->
<script src="../../../../ApiBundle/Resources/public/js/comment.js" data-cover></script>
<script>
var expect = chai.expect;
mocha.setup({
ui: "bdd",
globals: ['stats', 'failures', 'runner'], // Blanket leaks.
bail: false
});
// Set up Mocha with custom Blanket.js reporter.
mocha.reporter(function (_reporter) {
// Updated for Mocha 1.15.1 integration.
// See: https://github.com/alex-seville/blanket/pull/356
var blanketReporter = function (runner) {
// Listeners.
runner.on("start", function () { blanket.setupCoverage(); });
runner.on("suite", function () { blanket.onModuleStart(); });
runner.on("test", function () { blanket.onTestStart(); });
runner.on("test end", function (test) {
blanket.onTestDone(test.parent.tests.length,
test.state === 'passed');
});
runner.on("end", function () {
blanket.onTestsDone();
$("#blanket-main").removeClass("hidden").show("fast");
$("html, body").animate({ scrollTop: 0 });
});
_reporter.call(this, runner);
};
blanketReporter.prototype = _reporter.prototype;
return blanketReporter;
}(mocha._reporter));
blanket.beforeStartTestRunner({
callback: function () {
(window.mochaPhantomJS || mocha).run();
}
});
</script>
<script src="js/spec/views/view_CommentView.spec.js"></script>
<!-- Coverage style helpers -->
<style type="text/css">
#blanket-main {
margin-top: 65px;
margin-right: 20px;
margin-left: 20px;
border-radius: 5px;
border: 1px solid #666;
}
</style>
<!-- Test Fixtures. -->
<div id="fixtures" style="display: none; visibility: hidden;"></div>
</body>
</html>
It turns out its because $("#fixtures").load("fixtures/comment-fixture.html") is asynchronous and isn't actually loaded when I run the tests. By simply copying the contents of fixture.html into test.html body tag, the error stops happening!
I am trying to implement manifest for one page. i don't have any idea how to implement the manifest, using below reference i implemented. but its not working.
http://www.codemag.com/Article/1112051.
My doubt: In local after implementing manifest even if visual studio not in debug mode, after refresh the page it should show the page right? here its not showing.
Please help how to implement manifest in mvc.
Here is the my code:
Home Controller:
public ActionResult Index()
{
Response.Cache.SetCacheability(
System.Web.HttpCacheability.NoCache);
ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application.";
return View();
}
public ActionResult Manifest()
{
Response.ContentType = "text/cache-manifest";
Response.ContentEncoding = System.Text.Encoding.UTF8;
Response.Cache.SetCacheability(
System.Web.HttpCacheability.NoCache);
return View();
}
Index.cshtml:
<html manifest="#Url.Action("Manifest", "Home")">
<head>
<title></title>
<link href="~/Content/kendo/2014.2.903/kendo.common.min.css" rel="stylesheet" />
<link href="~/Content/kendo/2014.2.903/kendo.default.min.css" rel="stylesheet" />
<link href="~/Content/kendo/2014.2.903/kendo.dataviz.min.css" rel="stylesheet" />
<link href="~/Content/kendo/2014.2.903/kendo.dataviz.default.min.css" rel="stylesheet" />
<script src="~/Scripts/kendo/2014.2.903/jquery.min.js"></script>
<script src="~/Scripts/kendo/2014.2.903/kendo.angular.min.js"></script>
<script src="~/Scripts/kendo/2014.2.903/kendo.all.min.js"></script>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<div id="grid"></div>
<button type="button" id="btnOfflineMode">Offline</button>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "Name" },
{ field: "Age" },
{ field: "NewCol" }
],
dataSource: [
{ Name: "John Doe", Age: 33 }
],
batch: true,
}).on('focus', function (e) {
var offset = $(this).offset();
var textarea = $("<textarea>");
textarea.css({
position: 'absolute',
opacity: 0,
top: offset.top,
left: offset.left,
border: 'none',
width: $(this).width(),
height: $(this).height()
})
.appendTo('body')
.on('paste', function () {
setTimeout(function () {
var value = $.trim(textarea.val());
var grid = $("#grid").data("kendoGrid");
var rows = value.split('\n');
var data = [];
for (var i = 0; i < rows.length; i++) {
var cells = rows[i].split('\t');
grid.dataSource.add({
Name: cells[0],
Age: cells[1],
NewCol: cells[2]
});
}
});
}).on('blur', function () {
});
setTimeout(function () {
textarea.focus();
});
});
$("#grid").attr("tabindex", -1).focus();
</script>
</body>
</html>
Manifest.cshtml:
CACHE MANIFEST
# version 1
CACHE:
/
/Content/kendo/2014.2.903/kendo.common.min.css
/Content/kendo/2014.2.903/kendo.default.min.css
/Content/kendo/2014.2.903/kendo.dataviz.min.css
/Content/kendo/2014.2.903/kendo.dataviz.default.min.css
/Scripts/kendo/2014.2.903/jquery.min.js
/Scripts/kendo/2014.2.903/kendo.all.min.js
/scripts/modernizr-2.6.2.js
FALLBACK:
/events /events.htm
NETWORK:
*
#{
Layout = null;
}
events.html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Events</title>
<link rel="Stylesheet" href="/Content/style.css"
type="text/css" />
</head>
<body>
<section>
<h1>Events</h1>
<p>
The event listings are only available when
you are connected to the internet.
</p>
<div id="version">Version 1</div>
</section>
</body>
</html>
Try to create file site.maifest in the root folder of your site. And reference it in your html.
Like this
<html manifest="site.manifest">
Looks that it will be better to create your _Layout.cshtml logic and place common markup there.
I create an example where everything works good. Here it is on GitHub
I am using Google maps API v3, and this is my HTML file (mylocation.html) :
<!DOCTYPE html>
<html>
<head>
<title>Mylocation</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
<script>
var map;
function initialize() {
var mapOptions = {zoom: 6};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions)n);
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: 'Location found using HTML5.'
});
map.setCenter(pos);
}, function () {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
}
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}
var options = {
map: map,
position: new google.maps.LatLng(60, 105),
content: content
};
var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
When I open it on the Google Chrome, it works fine, and shows me my location.
In my project, I using WebVew to show this HTML file on Android. But when I run it, in LogCat, I get the following error:
"Uncaught TypeError: Cannot call method 'lat' of null at file:///mnt/sdcard/myloction.html:12"
(I have saved mylocation.html in the SDCard).
I'm not sure how to fix this? Could someone guide me with this?
To access Geolocation in the WebView, you need to do a bit of setup first.
You first must enable the feature in WebSettings: http://developer.android.com/reference/android/webkit/WebSettings.html#setGeolocationEnabled(boolean)
And you must also implement the WebChromeClient.onGeolocationPermissionsShowPrompt:
http://developer.android.com/reference/android/webkit/WebChromeClient.html#onGeolocationPermissionsShowPrompt(java.lang.String, android.webkit.GeolocationPermissions.Callback)
And please also ensure that your application has the appropriate Android permissions to access location.
First of all I apologize for my poor English but I can not find the answer to my question on all French forums.
I am developing an application that is to make real-time tracking of a fleet of vehicles.
I'm at the end of this application but I have a problem. I can not update my markers without reloading my web page.
I tried with settimeout() but it still charging my map
here is my code thank you for your help.
ps: when completed this application will be available in open source
<html lang="fr">
<head>
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="theme.css"/>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta charset="UTF-8" />
<title>Geonano V1</title>
<style type="text/css">
html{height: 100%}
body{height: 100%; margin: 0px; padding: 0px}
#EmplacementDeMaCarte{height: 100%}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialisation() {
var tableauLieux = [
//here I have a loop in php to get my markers in my database
["Paris", 48.86110, 2.34459],
["Versailles", 48.78199, 2.11045]
];
var optionsCarte = {
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < tableauLieux.length; i++) {
var Lieu = tableauLieux[i];
var pointLieu = new google.maps.LatLng(Lieu[1], Lieu[2]);
bounds.extend(pointLieu);
var marqueurLieu = new google.maps.Marker({
position: pointLieu,
map: maCarte,
title: Lieu[0],
icon : Lieu[3],
clickable: true
});
//création de l'info-bulle
var infoBulle = new google.maps.InfoWindow({
content: Lieu[0]//ici on peut mettre des balises HTML
});
google.maps.event.addListener(marqueurLieu, 'click', function() {
infowindow.setContent(Lieu[i][0]);
infoBulle .open(maCarte,marqueurLieu);
});
}
maCarte.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', initialisation);
setInterval("initialisation()", 5000);
</script>
</head>
<body>
<div id="EmplacementDeMaCarte"></div>
</body>
<META HTTP-EQUIV="Refresh" CONTENT="120; URL=http://localhost/geonano.php">
</html>
You'll have to request a ressource(may be a PHP-script) which returns the data for the markers(tableauLieux) using AJAX.
Once you got the response, remove the current markers and create the new markers.
If I understand it correctly, you're redrawing the map each 5 second with all the markers.
Bascily what you want to do is store your marker in an array that you can loop through at a later time to change their lat and lng. Clear them from the map, change the information and then put them back on the map. Changing the information is going to need some ajax.
marker.setMap(null);
a good way to do that is using something like
refreshIntervalId = setInterval("requestPoints()", 4000);
function requestPoints() {
$.ajax({
url:'{% url 'gpstracking.ajax.request_tracks' %}',
type: 'get',
dataType: 'json',
data: {
vehicles: vehicles
},
success: function (positions) {
updatePoints (positions);
}
});
}
function updatePoints (positions) {
console.debug('updating markers');
var lttd;
var lgtd;
for (var i=0; i < positions.length; i++) {
lttd = positions[i].latitude;
lgtd = positions[i].longitude;
position = map.createPosition({
lat: lttd,
lng: lgtd,
});
markers[positions[i].registration].setPosition(position);
};
if (positions.length > 1) {
//map.fitZoom();
} else {
map.setCenter (lttd, lgtd);
}
}
I am able to run the google maps api to get the geo locations only on the firefox browser. It does not find the geo location on safari and Google crome. It fails stating geolocation service failed. Can some one tell me how I could make this geollocation example run on safari and google crome. I have got this example from google maps api V3
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<link href="http://code.google.com//apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css">
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
var map;
function initialize() {
var myOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
// Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: 'Location found using HTML5.'
});
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
}
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}
var options = {
map: map,
position: new google.maps.LatLng(60, 105),
content: content
};
var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
Can some one tell me how I could make this geollocation example run on safari and google crome.
without knowing the versions, perhaps informing the browser to interpret the markup as html5 with
<!DOCTYPE html>
<html>
<head>
....