how to detect zoom change in Microsoft Bing Maps - maps

I'm trying to detect when zoom is changed in my map, I tried using these:
Microsoft.Maps.Events.addHandler(map, "targetviewchanged", console.log('targetviewchanged'));
Microsoft.Maps.Events.addHandler(map, "viewchangestart", console.log('viewchangestart'));
but is triggered only once when the map changes
How can I detect the zoom change only?
Thank you in advance


Try the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Event view change start</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
var map, lastZoomLevel = 0;
function getMap()
{
map = new Microsoft.Maps.Map(document.getElementById('myMap'), {credentials: 'Your Bing Maps Key'});
lastZoomLevel = map.getZoom();
Microsoft.Maps.Events.addHandler(map, 'viewchangeend', viewChanged);
}
function viewChanged(e)
{
if(lastZoomLevel != map.getZoom()){
lastZoomLevel = map.getZoom();
alert("Map Zoomed");
}
}
</script>
</head>
<body onload="getMap();">
<div id='myMap' style="; width:400px; height:400px;"></div>
</body>
</html>

Related

AngularJS does not represent the controller variables in the view, they are empty

I have this javascript code in a script called index.js and the html in an index.html, the problem is that the "message" variable is not painting it on the screen.
Does anyone know what I'm doing wrong? I am very used to Angular but I have just started with AngularJS since I have a project to deliver to the client and they want it in this technology.
A greeting.
angular.module('holamundo', [])
.controller('miControlador', miControlador);
function miControlador(){
var scope = this;
scope.mensaje = "Hola, ¿Como estas?";
console.log(scope);
init();
function init(){
}
}
<!DOCTYPE html>
<html lang="en" ng-app="holamundo" ng-controller="miControlador">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Angular JS - Hola Mundo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="./index.js"></script>
</head>
<body>
<div>
{{mensaje}}
</div>
</body>
</html>

Use $scope instead of this.
Only the variables declared in $scope are accessible in HTML view.
More here: 'this' vs $scope in AngularJS controllers
angular.module('holamundo', [])
.controller('miControlador', miControlador);
function miControlador($scope){
var scope = $scope;
scope.mensaje = "Hola, ¿Como estas?";
init();
function init(){
}
}
<!DOCTYPE html>
<html lang="en" ng-app="holamundo" ng-controller="miControlador">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Angular JS - Hola Mundo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="./index.js"></script>
</head>
<body>
<div>
{{mensaje}}
</div>
</body>
</html>

You can directly use
$scope.mensaje = "//your text here";

java script .createelement('''button") issue

I want to take information from another java script data file and when I click on the button "kingdom" another buttons to be created and the information for them to be given from the other data file.
Here is my code but it doesn't work properly:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="Taxonomy.js"></script>
<script type="text/javascript" src="Page.html"></script>
</head>
<body>
<button type="button" id="kingdom" style="position:absolute;left:700px;"
onclick="tree()"></button>
<script type="text/javascript">
var mydata=Taxonomy;
document.getElementById("kingdom").innerHTML=mydata[0][2];
let isitshown;
function tree() {
for(let i=0;i<mydata.length;i++){
if(mydata[i][2]=="phylum"){
let n=document.createElement("button");
n.innerHTML=mydata[i][3];
}
}
}
</script>
</body>
</html>
and here is part of my data file:
var Taxonomy = [
[36064765,0,"kingdom","Plantae"],
[36064766,36064765,"phylum","Tracheophyta"],
[36064767,36064766,"class","Magnoliopsida"],
[36064768,36064767,"order","Fagales"],
[36064769,36064768,"family","Nothofagaceae"],
[36064880,36064767,"order","Ericales"],
[36064881,36064880,"family","Scytopetalaceae"],
[36065385,36064767,"order","Garryales"],
[36065386,36065385,"family","Eucommiaceae"],
[36065387,36064767,"order","Saxifragales"],
[36065388,36065387,"family","Penthoraceae"],
[36065805,36064767,"order","Malpighiales"],
[36065806,36065805,"family","Chrysobalanaceae"],
[36065807,36064767,"order","Myrtales"],
[36065808,36065807,"family","Myrtaceae"],
[36065809,36065805,"family","Irvingiaceae"],
[36066064,36064880,"family","Napoleonaceae"],
[36066187,36064767,"order","Caryophyllales"],
[36066188,36066187,"family","Droseraceae"],
[36066189,36064766,"class","Cycadopsida"],
[36066190,36066189,"order","Cycadales"],
[36066191,36066190,"family","Zamiaceae"],
[36066205,36064767,"order","Fabales"],
[36066206,36066205,"family","Fabaceae"],
[36066219,36066190,"family","Cycadaceae"],
[36066239,36064765,"phylum","Marchantiophyta"],
[36066240,36066239,"class","Marchantiopsida"],
[36066241,36066240,"order","Marchantiales"],

let n = document.createElement("button"); only stores the element in the variable n, it doesn't add it to the page. You also have to add it to the body with document.body.append(n);

$routProvider not working in angular js

i am trying to include the view page in angularjs but it is working.
Here is my code
rootService.js
var viewCustomerModule = angular.module('viewCustomer',['ngRoute','ngResource']);
viewCustomerModule.config(function($routProvider){
$routeProvider
.when('/CustomerList',{
templateUrl: 'resources/view/checker.jsp',
controller: 'checkerController'
})
})
viewCustomer.js
var viewCustomerModule = angular.module('viewCustomer',['ngRoute','ngResource']);
viewCustomerModule.controller('checkerController', function($scope) {
$scope.headingTitle = "List Items";
});
masterPage.jsp
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="viewCustomer">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Add Company</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.8/angular-route.js"></script>
<script src="https://code.angularjs.org/1.4.4/angular-resource.js"></script>
<script src="<c:url value="/resources/js/viewCustomer.js"/>"></script>
<script src="<c:url value="/resources/js/rootService.js"/>"></script>
</head>
<body>
<div >
ViewCustomer
<div ng-view></div>
</div>
</body>
</html>
checker.jsp
<h3 ng-controller="checkerController">{{headingTitle}}</h3>
Above code i used but it is not working in browser console error is
Error: [$injector:modulerr] http://errors.angularjs.org/1.4.4/$injector/modulerr?p0=viewCustomer&p1=%5B%24injector%3Aunpr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.4.4%2F%24injector%2Funpr%3Fp0
can any one help me to fix this

Please change $routProvider to $routeProvider in your rootService.js file. So your rootService.js will look like this:
var viewCustomerModule = angular.module('viewCustomer',['ngRoute','ngResource']);
viewCustomerModule.config(function($routeProvider){
$routeProvider
.when('/CustomerList',{
templateUrl: 'resources/view/checker.jsp',
controller: 'checkerController'
})
})

In viewCustomer.js you dont have to declare the module again, change it as,
// remove this line var viewCustomerModule = angular.module('viewCustomer',['ngRoute','ngResource']);
viewCustomerModule.controller('checkerController', function($scope) {
$scope.headingTitle = "List Items";
});
also change the order as,
<script src="<c:url value="/resources/js/rootService.js"/>"></script>
<script src="<c:url value="/resources/js/viewCustomer.js"/>"></script>

how to put angularjs template tag {{myitem}} in video player javascript

Below is a snippet of code I want to maked work,also it will be interested how to put angular data in a php string like the one below
<!DOCTYPE html>
<html lang="en" ng-app="Api">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div data-ng-controller="detaliivideo">
{{afisare.video}} <!-- this is showing the data in pure html -->
<!-- but in javascript no -->
<script type="text/javascript">
// in a simple variable also not working
var video = {{afisare.video}};
var flashvars = {
'autoplay':1,
'autohide':0,
'skin':'//www.mysite.net/js/clipuri.swf',
'more':'//www.mysite.net/related.php',
'ecode':'',
'video': {{afisare.video}}, // this is not working, '{{afisare.video}}' not working also ,"{{afisare.video}}" not working also
'thumbnail':''
};
</script>
<?php $var = "{{myItem}}"; // echo $var is showing the data ,but in a function name ($var) is showing {{afisare.video}}?>
</div>

How do I add body onload using PrimeFaces Mobile?

I simply want to output this using PrimeFaces Mobile:
<body onload="windowOnLoad();">
This is what the page looks like:
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<f:view xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:pm="http://primefaces.org/mobile" contentType="text/html"
renderKitId="PRIMEFACES_MOBILE">
<pm:page title="Mobile Login">
<pm:header>
<script language="JavaScript" type="text/javascript">
function bodyOnLoad() {
alert("in bodyOnLoad");
}
</script>
</pm:header>
<pm:view id="viewForm">
<pm:content onload="bodyOnLoad();">
Test
</pm:content>
</pm:view>
</pm:page>
</f:view>
I've tried putting it on the pm:page, pm:view, pm:content. None seem to work? I am sure I am missing something easy.
Thank you.

This turned into more of a Javascript solution:
<pm:header>
<script language="JavaScript" type="text/javascript">
function bodyOnLoad() {
alert("in bodyOnLoad");
}
window.onload = bodyOnLoad;
</script>
</pm:header>

Resources