I've created a PHP file named maps.php that contains a simple Google Maps API that works on the iPad's default browser.
But when I call it using Ajax, the page loads itself but not the map. If I open the link in a desktop or mobile browser it works fine.
You can show google maps by accessing google's javascript api.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
</script>
<script type="text/javascript">
function initialize() {
var myOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
Or you can load any php page directly in webView by using window.location="http://www.mourady.me/alhokair/iphone/maps.php" javascript method, as your php page contain google map in canvas tag, you can not load that in div through ajax call, better way used iframe tag to the job.
<html>
<body onload="bodyload()">
<button onclick="bodyload()">Ajax call</button>
<iframe id="mapDiv" height=500px width=700px src="http://www.mourady.me/alhokair/iphone/maps.php"></iframe>
</body>
</html>
Related
Very simple question, can I use functions like await inside paperjs?
I can chain together a lot of .then's and it's going fine, but as soon as I add await in front of it I get the error
SyntaxError: Unexpected token (4:22)
Please tell me they didn't make it so that I have to start wrapping everything in insanely long chains in order to integrate functions like fetch into paperjs. Below my code:
<script type="text/paperscript" canvas="myCanvas">
getCollectionList = async function() {
var collectionlist = [];
collectionlist = await fetch('/api/graph/<%= database %>');
console.log(collectionlist);
}
getCollectionList();
</script>
<canvas id="myCanvas" resize></canvas>
Your are writing your code as PaperScript which implies that Paper.js uses a JavaScript parser to parse it and apply some transformations to it.
The problem is that by default, the JavaScript parser used by Paper.js does not support ES6 features.
You have to load a more recent version of the parser (Acorn) before loading Paper.js to solve your issue.
See my answer to an analog issue here for more details.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Debug</title>
<!-- Load latest acron version first -->
<script type="text/javascript" src="https://unpkg.com/acorn"></script>
<!-- Then load Paper.js -->
<script type="text/javascript" src="https://unpkg.com/paper"></script>
<style>
html,
body {
margin: 0;
overflow: hidden;
height: 100%;
}
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="canvas" resize></canvas>
<script type="text/paperscript" canvas="canvas">
// Here you can now use ES6 syntax.
const myAsyncFunction = async function() {
const response = await fetch('https://yesno.wtf/api/');
const json = await response.json();
console.log(json);
};
myAsyncFunction();
</script>
</body>
</html>
I clone this repo https://github.com/Microsoft/BotFramework-WebChat and I managed to edit css in local.
I would like to know what I need to deploy to use webchat online ?
Thanks you for you help
I clone this repo https://github.com/Microsoft/BotFramework-WebChat and I managed to edit css in local. I would like to know what I need to deploy to use webchat online?
After you customize&build your own web chat, to embed web chat in your website, you should include your built botchat.css and botchat.js file in your project and reference botchat.css and botchat.js in your web page.
I want to add a widget like this to open my chatbot, what I need to do?
It seems that you’d like to display the chat icon in your web page to allow user dynamically open/collapse your web chat, to achieve the requirement, you need not to modify the botchat.js file, the following code sample work for me , you can refer to it.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="BotChat/botchat.css" rel="stylesheet" />
<script src="BotChat/botchat.js"></script>
<style>
#mychat {
margin: 10px;
position: fixed;
bottom: 30px;
right: 10px;
z-index: 1000000;
}
</style>
</head>
<body>
<div id="container">
<h1>Hello World</h1>
<!--other page contents-->
<img id="mychat" src="https://i.stack.imgur.com/RD7i4.png" style="float:right" />
</div>
</body>
</html>
<script>
(function () {
var div = document.createElement("div");
document.getElementsByTagName('body')[0].appendChild(div);
div.outerHTML = "<div id='botDiv' style='width: 400px; height: 0px; margin:10px; position: fixed; bottom: 0; right:0; z-index: 1000;><div id='botTitleBar' style='height: 40px; width: 400px; position:fixed; cursor: pointer;'></div></div>";
BotChat.App({
directLine: { secret: '{directline_secret}' },
user: { id: 'You' },
bot: { id: '{your_botid}' }
}, document.getElementById("botDiv"));
document.getElementsByClassName("wc-header")[0].setAttribute("id", "chatbotheader");
document.querySelector('body').addEventListener('click', function (e) {
e.target.matches = e.target.matches || e.target.msMatchesSelector;
if (e.target.matches('#chatbotheader')) {
var botDiv = document.querySelector('#botDiv');
botDiv.style.height = "0px";
document.getElementById("mychat").style.display = "block";
};
});
document.getElementById("mychat").addEventListener("click", function (e) {
document.getElementById("botDiv").style.height = '500px';
e.target.style.display = "none";
})
}());
</script>
Test result:
If I want to add a widget like this
to open my chatbot, what I need to do ? Is it enough to modify the botchat.js file ?
How to have an application like in this post?
if you want to use iframe then you can't customize the design . for customize design you need to use Direct line by you can change design as well as make bot fully responsive.
Here is the code i am using working fine for me:
<!DOCTYPE html>
<html class="no-js lang-en" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- For Bot Frame -->
<link href="../assets/SCSS/botchat-fullwindow.css" type="text/css" rel="stylesheet" />
<link href="../assets/SCSS/botchat.css" type="text/css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body class="personal-body">
<!-- For Bot Code -->
<div id="BotChatElement">
</div>
<img src="../assets/images/chat-2-icon.png" onclick="openchatbot()" class="open-bot" id="button_chat" />
<script src="../assets/JS/botchat.js"></script>
<script>
var model = {
"userId": "demo1234",
"userName": "You",
"botId": "Chatbot Main Tree",
"botIconUrl": "",
"botName": "Chatbot Main Tree",
"secret": "",
"iconUrl": "",
"directLineUrl": "https://webchat.botframework.com/v3/directline",
"webSocketEnabled": "false"
};[enter image description here][1]
BotChat.App({
directLine: {
secret: model.secret,
token: model.token,
domain: model.directLineUrl,
webSocket: false,
sendTyping: true
},
user: { id: model.userId, name: model.userName },
bot: { id: model.botId, name: model.botName },
sendTyping: true,
resize: 'window'
},
document.getElementById("BotChatElement"));
function openchatbot() {
$(".wc-chatview-panel *").removeClass("maximizebot");
$(".wc-chatview-panel").css({ 'bottom': '0', 'display': 'block' });
}
$(".minimize-icon").on('click',
function () {
$(".wc-chatview-panel").removeClass("minimize-icon");
$(".wc-chatview-panel ").toggleClass("minimizebot");
$(".minimize-icon ").toggleClass("maximizebot");
});
$(".close-icon").on('click',
function () {
$(".wc-chatview-panel ").removeClass("minimizebot");
$(".wc-chatview-panel ").removeClass("maximizebot");
$(".wc-chatview-panel").css({ 'bottom': '-500px', 'display': 'none' });
});
</script>
</body>
</html>
To deploy your bot follow those steps:
Create an Azure account.
You can create free trial Azure subscription from here.
Deploying the a MS Bot framework code to Azure:
You can see this video deploying a MS Bot framework code to Azure
WebChat channel using Visual Studio.
Also you can check this tutorial. (However, this tutorial use old version of Azure portal).
After connecting the bot with WebChat channel, you can use the Embed code in your HTML code.
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />
</head>
<body>
<div id="bot"/>
<script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>
<script>
BotChat.App({
directLine: { secret: direct_line_secret },
user: { id: 'userid' },
bot: { id: 'botid' },
resize: 'detect'
}, document.getElementById("bot"));
</script>
</body>
</html>
I have this code to embed a bot as a live chat using direct Line API instead of the usual iframe but when i put in my directline secrete key, the Bot is occupying the whole web page. I need it to appear by the bottom right of the web page and pop up as a life chat when a user clicks on it. Please someone should guide me in achieving this. Thanks
Your problem is about the way you are displaying your div including the bot: <div id="bot"/>
You can style this div to appear like you want; there are several samples provided on the bot Webchat Github project:
For sidebar display: https://github.com/Microsoft/BotFramework-WebChat/blob/master/samples/sidebar/index.html
For fullwindow : https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/fullwindow
I would highly suggest to take a look at the 1st sample which has a demo of narrow, normal and wide div
As Nicolas R suggested, you can style the container div <div id="bot"/> to position it at bottom right corner of web page. I achieved same requirement in a project, the following sample code works for me, you can refer to it.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>
<style>
.wc-chatview-panel {
width: 350px;
height: 450px;
position: relative;
}
#bot {
position: fixed;
bottom: 0;
right: 0;
}
.closechat {
top: 405px !important;
}
</style>
</head>
<body>
<div id="bot"></div>
</body>
</html>
<script>
BotChat.App({
directLine: { secret: "{your_directline_secret}" },
user: { id: 'You' },
bot: { id: '{Your_BotId}' },
resize: 'detect'
}, document.getElementById("bot"));
$(function () {
$("div.wc-header").prop("isopen", "true");
$("div.wc-header").click(function () {
var isopen = $(this).prop("isopen");
//alert(isopen);
if (isopen == "true") {
$("div.wc-chatview-panel").addClass("closechat");
$("div.wc-header").prop("isopen", "false");
} else {
$("div.wc-chatview-panel.closechat").removeClass("closechat");
$("div.wc-header").prop("isopen", "true");
}
})
})
</script>
Test result:
I am trying to add map into my web page. Shapefiles are uploaded/published in GeoServer. When request is made, not map is displayed in webpage. Following is code.
<html>
<head>
<script type="text/javascript" src="OpenLayers.js"></script>
<script type="text/javascript">
var map;
function init() {
map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS(
"OpenLayers WMS",
"http://localhost:8080/geoserver/New_York_Roads/wms",
{ layers: 'basic' }
);
map.addLayers([wms]);
map.zoomToMaxExtent();
}
</script>
</head>
<body onload="init()">
<div id="map" style="width: 600px; height: 300px">
</div>
</body>
</html>
change this line:
map.addLayers([wms]);
to this:
map.addLayer(wms);
more info here
This code below works fine in Chrome and IE 9. But breaks in IE 8.
The errant line is here. I think it's the bind.
google.maps.event.addListener(this.map, "click", (this.leftClick).bind(this));
Has anyone else had this problem? It's not clear if someone has this on SO.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style>
html, body, #map
{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?libraries=geometry,drawing&sensor=true" type="text/javascript"></script>
<script language="javascript">
var MyPage = function () {
this.map = null; //google map
};
MyPage.prototype.initialize = function () {
this.map = new google.maps.Map(document.getElementById("map"),
{
zoom: 8,
center: new google.maps.LatLng(30, -97),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
google.maps.event.addListener(this.map, "click", (this.leftClick).bind(this));
}
MyPage.prototype.leftClick = function (event) {
alert('hi');
}
$(window).load(function(){
var my = new MyPage();
my.initialize();
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
the bind Method is not supported in IE8 or below see http://msdn.microsoft.com/en-us/library/ff841995(v=vs.94).aspx