Hi i have sorted how to have my current location mapped in bing
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></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;
function GetMap()
{
// Set the map options
var mapOptions = {credentials:"xxxxxxx"};
// Initialize the map
map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), mapOptions);
// Initialize the location provider
var geoLocationProvider = new Microsoft.Maps.GeoLocationProvider(map);
// Get the user's current location
geoLocationProvider.getCurrentPosition({successCallback:displayCenter});
}
function displayCenter(args)
{
// Display the user location when the geo location request returns
alert("The user's location is " + args.center);
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
</body>
</html>
I also have sorted how to have the Calculate a Route to work when i specify start / end co ordinates
<cfhttp timeout="10000" url="http://dev.virtualearth.net/REST/V1/Routes/Walking?wp.0=-27.491030,153.095764&wp.1=-27.476757,153.040493&o=xml&key=xxxxxxxxxxxxxx">
What i want to do is be able to combine the above 2 so that i run the current location first and then have the resulting co ordinates passed to the Calculate Route so that wp.0=#current location co ordinates#
You can easily use the Bing Maps REST services in JavaScript: http://msdn.microsoft.com/en-us/library/gg427607.aspx. Although it's not needed as the Bing Maps V7 control has a directions module that wraps the services for you: http://msdn.microsoft.com/en-us/library/hh312802.aspx
To make a route call to your application, simply update the displayCenter function to make use of the Routing service using either REST or the directions manager. You can also find examples of using the directions module for Bing Maps in the interactive SDK here: http://www.bingmapsportal.com/ISDK/AjaxV7#DirectionsModule4
Related
I wonder to use SC.oEmbed to play sound from SoundCloud.But when I use it, I always get ERR_FILE_NOT_FOUND error.
I put my Source Code in Jsfiddle: http://jsfiddle.net/n2sVk/, it works OK. But when I save it to a HTML file and open it with Chrome, the error would be observed.
The Source Code is shown as below:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="UTF-8">
</head>
<body>
<script src="http://connect.soundcloud.com/sdk.js"></script>
<div id="wrap"></div>
<script type="text/javascript">
SC.initialize({
client_id: "c202b469a633a7a5b15c9e10b5272b78",
redirect_uri: "http://connect.soundcloud.com/examples/callback.html"
});
SC.connect(function(){
console.log("connect " + "return");
SC.get("/me", function(me){
console.log("me.username:" + me.username);
console.log("me.description:" + me.description);
SC.get("/tracks", {limit: 1}, function(tracks){
console.log("get track return");
track = tracks[0];
console.log("track.uri: " + track.uri);
console.log("track.title: " + track.title);
SC.oEmbed(track.permalink_url,
{auto_play: true},
document.getElementById("wrap"));
});
});
});
</script>
</body>
Here is the error from Chrome:
GET file://soundcloud.com/oembed.json?auto_play=true&url=http%3A%2F%2Fsoundcloud.com%2Fyung-crusty-beats%2Fmystic-juice net::ERR_FILE_NOT_FOUND sdk.js:1
oEmbed response: null
This happens because when you are testing it locally, you are on "file:///" protocol.
The library's source code is using // in place of the protocol – this lets the library work on both http and https. However, when you access your code from a file as opposed to a webserver, the oembed function will probably not work.
The solution will be to run a local web server, such as Python simple server, which you'd run from the root folder of your project:
python -m SimpleHTTPServer
I'm following a beginner's tutorial at http://www.tutorialspoint.com/gwt/gwt_style_with_css.htm.
The code for the HelloWorld.html file is:
<html>
<head>
<title>Hello World</title>
<link rel="stylesheet" href="HelloWorld.css"/>
<script language="javascript" src="helloworld/helloworld.nocache.js">
</script>
</head>
<body>
<div id="mytext"><h1>Hello, World!</h1></div>
<div id="gwtGreenButton"></div>
<div id="gwtRedButton"></div>
</body>
</html>
In the HelloWorld.java (extending EntryPoint), I have:
RootPanel.get("gwtGreenButton").add(Btn1);
RootPanel.get("gwtRedButton").add(Btn2);
The 2 lines: RootPanel.get() always result in null. I don't know what happen, what to check? (too bad the site doesn't have a comment/discussion section)
Thanks.
Docs says
RootPanel.get(java.lang.String id)
Gets the root panel associated with a given browser element.
DOM.getElementById(java.lang.String)
Gets the element associated with the given unique id within the entire document.
Try with
com.google.gwt.user.client.DOM.getElementById("gwtGreenButton");
com.google.gwt.user.client.DOM.getElementById("gwtRedButton");
I've recently started experimenting with AngularJS. I am building a simple html5 application that updates a MySQL database.
[index.html]
<!DOCTYPE html>
<html ng-app="MyProject">
<head>
<title>My Project</title>
<link rel="stylesheet" href="css/main.css" type="text/css">
<script src="lib/angular-1.0.1.js"></script>
<script src="lib/angular-resource-1.0.1.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body>
<div id="main-content" ng-view>
</body>
</html>
I used the Slim framework to create a Rest Interface. My database has currently one table named location_types with two columns id and title. I have tested the Rest service in the browser so under api/locationtypes I get the following JSON:
[{"id":"1","title":"Airport"},{"id":"2","title":"Bus Station"}]
I create the service in AngularJS using the following code:
[services.js]
angular.module('myDB', ['ngResource']).
factory('LocationTypes', function($resource) {
var LocationTypes = $resource('http://localhost/project/api/locationtypes', {}, { query: {method: 'GET', isArray: true}});
return LocationTypes;
});
I also use the following code to create the app module:
[controllers.js]
angular.module('MyProject', ['myDB']).
config(function($routeProvider) {
$routeProvider.
when('/locationtypes', {controller: LocationTypesCtrl, templateUrl:'forms/locationtypes.html'}).
otherwise({redirectTo:'/locationtypes'});
});
function LocationTypesCtrl($scope, LocationTypes)
{
$scope.locationTypes = LocationTypes.query();
}
The problem is that I get no results after querying the service. The locationTypes array is of zero length when I debug. I am using the latest AngularJS release [1.0.1]. What do I miss?
Is your URL really 'http://localhost/project/api/locationtypes' or is it an external server?
If its external, then you have a CORS (cross origin) issue. Unless I'm missing something it looks correct to me.
Probably a CORS issue like Dan said.
You can bypass this by adding the following to your module config.
.config(function($httpProvider){
delete $httpProvider.defaults.headers.common['X-Requested-With'];
})
Deleting the headers set by Angular should resolve the CORS issue.
You should also add a .htaccess file in your api folder. And add this:
Header set Access-Control-Allow-Origin "*"
I don't understand how to use XUI tween. On the xui website, they give the following example code:
x$('#box').tween([{left:'100px', backgroundColor:'green', duration:.2 }, { right:'100px' }]);
What is that supposed to do? I created a <div id="box"></div>, ran the line of js code above, but nothing happened. Here's my complete code:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="xui.min.js"></script>
<script type="text/javascript">
x$('#box').tween([{left:'100px', backgroundColor:'green', duration:.2 }, { right:'100px' }]);
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
Nothing happens...
So, XUI's tween seems to be a work in process. In fact, in the master branch code on GitHub you find:
// queued animations
/* wtf is this?
if (props instanceof Array) {
// animate each passing the next to the last callback to enqueue
props.forEach(function(a){
});
}
*/
So, in short, the array-based tween properties appear busted at the moment. In addition, XUI's tween seems to be a little flakey when dealing with properties that are not currently set on the DOM element. (For example, setting the background-color on a transparent element turns it black...rather than the intended color.)
That said, the single tween and callback work well on previously set properties. So take a look at the following (and excuse the inline css):
<html>
<head>
<script type="text/javascript" src="http://xuijs.com/downloads/xui-2.3.2.min.js"></script>
<script type="text/javascript">
x$.ready(function(){
setTimeout(function(){
x$('#box').tween({'left':'100px', 'background-color':'#339900', duration:2000}, function(){
x$('#box').tween({'left':'500px', duration:2000});
});
}, 500);
});
</script>
</head>
<body style="position:relative;">
<div id="box" style="position:absolute;top:50px;left:500px;width:100px;height:100px;background-color:#fff;border:1px solid #000;">the box</div>
</body>
</html>
Because #box now has a css background-property and left position explicitly set, it is relatively easy to produce an effect similar to the one desired.
One-half second after the page loads, #box should spend 2 seconds moving from left:500px to left:100px while turning the background color from white to green. Then, using the callback, #box moves back to its original position at left:500px--taking another 2 seconds to get back.
Obviously, this does not answer your exact question but for those (like me) who stumble upon this, it provides a workaround for the time being.
Is it possible to dynamically switch the title of a page that is served by Lift without having to write an extra snippet for that particular case?
One option is of course <lift:mySnippet><title>Default Title</title></lift:mySnippet> but I thought there might be an option along the lines of <head_merge><title>New Title</title></head_merge> (which inserts a second title node).
I do not like the first approach since I do not want to stick all the title generation logic into a single snippet and ask what kind of page I am on etc.
Have you tried to use templates?
You can define template in templates-hidden/default.html like this:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:lift="http://liftweb.net/">
<head>
<title>
<lift:bind name="title" />
</title>
...
</head>
<body>
<lift:bind name="content" />
</body>
</html>
And use it in index.html for example:
<lift:surround with="default">
<lift:bind-at name="title">Home</lift:bind-at>
<lift:bind-at name="content">
my content
</lift:bind-at>
</lift:surround>
You can find more information about templates here:
http://www.assembla.com/spaces/liftweb/wiki?id=liftweb&wiki_id=Templates_and_Binding
One way is to use the Menu.title snippet.
In bootstrap/liftweb/Boot.scala you define the sitemap with page names:
class Boot {
def boot {
// ...
def sitemap = SiteMap(
Menu.i("Home") / "index",
Menu.i("About") / "about")
// ...
}
}
In templates-hidden/default.html you use the snippet:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:lift="http://liftweb.net/">
<head>
...
<title class="lift:Menu.title">AppName:</title>
...
Then page titles will be: "AppName: Home" and "AppName: About". This is nice if you use
<span class="lift:Menu.builder"></span>
to build the menu, because page titles will be the same used in the menu.
Another approach is to use head merge and define the title in the page's html. For this to work, you have to remove the <title> tag from templates-hidden/default.html and put an <head> or <head_merge> tag in your content block:
<!DOCTYPE html>
<html>
<body class="lift:content_id=main">
<div id="main" class="lift:surround?with=default;at=content">
<head_merge>
<title>TITLE OF THIS PAGE HERE</title>
</head_merge>
...