I am trying to build an offline web application using openlayers as shown in the sample code below. However the map does not load with the error (as shown in the firebug):
Error: "https://c.tile.openstreetmap.org/4/6/6.png"
I read through other Q/As on this and found that I need to download some of the map layers (image/tile/vector) and refer it locally. But I guess there are other sub steps to it. Anyone who has already tried doing this and know exactly the steps to be done for it?
I came across this question in SO Offline Geographical Maps in Web Application after converting .osm to .map but it doen't have a detailed answer to how to set the offline map repository.
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="myOfflineWebAppWebContent/css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="myOfflineWebAppWebContent/js/ol.js" type="text/javascript"></script>
<title>Hello Open Layers</title>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
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([37.41, 8.82]),
zoom: 4
})
});
</script>
</body>
</html>
Related
I have a requirement to integrate azure media player in an android app.
All I can see in the documentation is sample and information on how to add this in an HTML file.
I have a "...mainfest" file, and I need to play it from the android app.
I need to know if there is any SDK available for android, or do i need to host a page on server, which can play these videos?
Edited
I checked sample player here, when I pass my video URL to it, it loads video fine with or without "(format=m3u8-aapl-v3)"
But I am still unable to play it from android app.
I also tried to create an HTML page, but its also not playing the video.
This is what I did in HTML file.
<head>
</head>
<body>
<video id="vid1" autoplay controls width="640" height="400" >
<source src=".....ism/manifest(format=m3u8-aapl-v3)" />
</video>
</body>
UPDATE
If you want play it in HTML, I recommend you use official sample code, like below.
For more details, you can refer to the code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Azure Media Player</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--*****START OF Azure Media Player Scripts*****-->
<!--Note: DO NOT USE the "latest" folder in production. Replace "latest" with a version number like "1.0.0"-->
<!--EX:<script src="//amp.azure.net/libs/amp/1.0.0/azuremediaplayer.min.js"></script>-->
<!--Azure Media Player versions can be queried from //amp.azure.net/libs/amp/latest/docs/changelog.html-->
<script src="https://amp.azure.net/libs/amp/latest/azuremediaplayer.min.js"></script>
<link href="https://amp.azure.net/libs/amp/latest/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
<!--*****END OF Azure Media Player Scripts*****-->
<!--Add Plugins-->
<!-- <script src="hotkeys.js"></script> -->
</head>
<body>
<h1>Plugin - Hot Keys</h1>
<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" tabindex="0"> </video>
<script>
var myOptions = {
autoplay: true,
controls: true,
width: "640",
height: "400",
poster: ""//,
// plugins: {
// hotkeys: {
// //optional settings
// "volumeStep": 0.1,
// "seekStep": 5,
// "enableMute": true,
// "enableFullscreen": true,
// "enableNumbers": true,
// "enableJogStyle": false
// }
// }
};
var myPlayer = amp("azuremediaplayer", myOptions);
myPlayer.src([{ src: "https://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest", type: "application/vnd.ms-sstr+xml" }, ]);
</script>
<footer>
<br />
<p>© Microsoft Corporation 2016</p>
</footer>
</body>
</html>
PRIVIOUS
You can concatenate (format=m3u8-aapl-v3) at the end of the URL, can play this url with any video player.
For more details, you can refer to this post.
I have a very simple react program that imports react using a script command and a cdn.
How do I covert it to preact while keeping the same structure?
I tried to follow these instruction, but they weren't very clear
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://unpkg.com/react#15/dist/react.js"> </script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.js"></script>
</head>
<style type="text/css">
</style>
<body>
<div id='root'></div>
<script type="text/babel">
function T(props){
return <h1>{props.title}</h1>
}
ReactDOM.render(<T title='welcome'/>,document.getElementById('root'))
</script>
</body>
</html>
As per this github issue you have a couple of different options for using Preact with a script tag. You can directly call h- Preact's version of React.createElement or you can use babel standalone to transform your JSX as you were in your original React example. Here is a Preact conversion of your original example.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/preact/7.2.0/preact.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.js"></script>
</head>
<body>
<div id='root'></div>
<!-- option 1: alias it -->
<script>window.React = { createElement: preact.h }</script>
<script type="text/babel">
function T(props){
return <h1>{props.title}</h1>
}
preact.render(<T title="Welcome" />, document.getElementById('root'));
</script>
</body>
</html>
We are using below code to feed multiple images on website but no feed is displaying on website. So what is missing in below code? Please let me know. It is personal website and not a wordpress website.
Thank you,
<!DOCTYPE html >
<html lang="en">
<head>
<style type="text/css">
#insta-wrap
{
width:1280px;
height:600px;
margin:35px auto 0 auto;
}
</style>
<script src="./includes/instafeed.min.js" type="text/javascript"></script>
<script type="text/javascript">
var feed = new Instafeed({
get: "user",
userId: 'bharatahir70',
accessToken: '1557013702.1677ed0.b84d103aa57f42a0ae6be066bb0d58f4'
target: 'instafeed',
clientId: "521f60894abf4e1b8d73f5a260ae6079"
});
feed.run();
</script>
</head>
<body>
<div id="wrapper">
<div id="insta-wrap">
<h1>INSTAGRAM FEED</h1>
<div id="Instafeed"></div>
</div>
</div>
</body>
</html>
I have debug your access token. Your clientId isn't approved by instagram to access user information.
{"meta": {"error_message": "This client has not been approved to
access this resource.", "error_type": "OAuthPermissionsException",
"code": 400}}
Also when you visit the page where this widget is installed, you should see error message in your browser console.
I'm trying to build chrome extension, which adds it's own panel into developer tools. Here is the code, responsible for that (coffeescript):
devtools.js:
chrome.devtools.panels.create 'Panel',
null,
'panel.html',
(panel) ->
panel.onShown.addListener (win) ->
container = document.createElement 'div'
win.document.body.appendChild container
Here is manifest.json line, responsible for devtools:
"devtools_page": "devtools.html"
And this is what I have in devtools.html:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="devtools.css"/>
</head>
<body>
<script src="devtools.js"></script>
</body>
</html>
devtools.css:
div {
width: 50px;
height: 50px;
background: #000;
}
But the problem is I can't make that styles from devtools.css apply to my devtools.html page.
So, the question is how can I apply styling to my devtools panel?
TL; DR: why is the location of the image different?
There seems to be some difference in the coordinate system between 1.3.0 and 1.3.12. Here are the HTML file test.html, working with the newly cloned and built fabric.js by myself ():
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="./fabric.js/dist/all.min.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<canvas id="c"></canvas>
</body>
</html>
and the JavaScript file test.js:
$(function(){
var canvas = new fabric.Canvas('c');
canvas.setWidth(window.innerWidth);
canvas.setHeight(window.innerHeight);
fabric.Image.fromURL('test.png', function(img) {
var group = new fabric.Group([img],
{
hasBorders: false,
hasControls: false,
selectable: true,
evented: true,
})
canvas.add(group);
});
});
The web page looks like
But if I change fabric.js to the version on the CDN, which is 1.3.0:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.3.0/fabric.min.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<canvas id="c"></canvas>
</body>
</html>
The web page will look like
The second case makes more sense for me. It puts the center of the image to (0,0). But in the first case it seems to put the image center to (image_width, image_height). So is this a bug? Or a feature of coordinate system for groups?
UPDATE: if simply using
$(function(){
var canvas = new fabric.Canvas('c');
canvas.setWidth(window.innerWidth);
canvas.setHeight(window.innerHeight);
fabric.Image.fromURL('test.png', function(img) {
canvas.add(img);
});
});
, the top left corner of the image will be attached to (0,0).
UPDATE 2: OK, I need to manually set {left: 0, top:0} for the group. But why?
What you're seeing is that originX/originY default values were changed to "left"/"top" from "center"/"center".
This was a very confusing behavior to almost anyone starting with Fabric and we finally got rid of it. You can see this breaking change in a changelog (between unreleased edge/dev version and latest stable 1.3.0)
https://github.com/kangax/fabric.js/blob/master/CHANGELOG.md
originX/originY represent what left/top values of an object are relative to. All objects' left/top used to be relative to their centers; now we're using more common system of left/top corner.