I'm trying to understand how and why does the webview scales the content of the loaded page. For example, the element in the loaded page that is in 400x300px webview that shares 100% width and height with "margin: 0 auto" on all crossing elements becomes 320x240 and expected is 400x300. With this behavior, I get quite unpleasant results, in case of Bing maps the result is mediocre, it's not just the tiles, but also pushpins on the maps that gets scaled (not included in the samples)
In the screenshot below, the webview content is placed on the top, iframe at the bottom.
.
IFrame doesn't seem to suffer from this and the size is as expected, 400x300. I'd prefer to use webview as it's slihtly easier in regards to communication between the two pages.
To reproduce:
create a new project in visual studio community with a template Windows Phone 8, blank app
in default.html, place the following code
<body class="phone">
<p>Content goes here</p>
<x-ms-webview id="mapFrame2" src="ms-appx-web:///pages/map/bing.html" style="-ms-content-zooming: none;width: 100%; height:300px; position: absolute; top: 0px; left: 0px; z-index:999;"></x-ms-webview>
<iframe id="mapFrame2" src="ms-appx-web:///pages/map/bing.html" style="-ms-content-zooming: none;width: 100%; height:300px; position: absolute; top: 310px; left: 0px; z-index:999;"></iframe>
and in the referencing page place the following:
Meta tags:
http-equiv="Content-Type" content="text/html; charset=utf-8"
name="viewport" content="width=device-width, user-scalable=no"
function initialize() {
Microsoft.Maps.loadModule('Microsoft.Maps.Overlays.Style', {
callback: function () {
map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), {
mapTypeId: "r",
center: new Microsoft.Maps.Location(-32.377200, 148.626183),
zoom: 5,
enableClickableLogo: false,
enableSearchLogo: false,
customizeOverlays: false,
showBreadcrumb: false,
credentials: "",
disableBirdseye: true,
showScalebar: false,
showDashboard: false,
enableHighDpi: true
});
}
});
}
and the body element has the
style="margin:0px;padding:0px;"
and within it is a div with id="mapDiv" with
style="position: absolute; width:100%; height:100%; overflow:hidden;
margin:0px;padding:0px;"
(it'snearly impossible to place the whole html here so it's truncated by stackoverflow)
Related
I would like to visualise the data I am getting via API output as particles using three.js / particles.js .
I am receiving Integers between 2 and 42.
So, if my data equals 2 I would like to have two particles, if it equals 32, I would like to have 32 particles floating about without refreshing the page.
I'm trying to figure how I can "dynamically" add or delete particles based on the data I am receiving from the API call.
I've searched for all kinds of things but I think I am missing the right terminology for this to get valuable results.
I basically want to able to update "maxParticles" (line 29) every 5 seconds with the API data and have particles appear and disappear without refreshing the page.
From tutorials my demo code currently looks like this (far from it):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
.background {
position: absolute;
display: block;
top: 0;
left: 0;
z-index: 0;
height: 100%;
}
</style>
</head>
<body>
<canvas class="background"></canvas>
<script src="https://unpkg.com/#codegewerk/particle-cloud#1.x/dist/particles.min.js"></script>
<script>
const instance = new ParticleCloud({
selector: ".background",
maxParticles: 32,
color: "#ff0000",
connectParticles: true,
sizeVariations: 5,
});
instance.start();
</script>
</body>
</html>
As always, any ideas or input very much appreciated.
I need a direction, 'cause I don't know how to look for it, or basically how to do that.
Every time a user presses a locate button it will locate his position (already done this part)
And then, I want to give certain details about his city (in my case, I want to give corona details of people amount that are infected in the city area)
for example: so lets say the user lives in new york, and then he clicks on locate position, it gives him the amount of sick people in his area.
i used this website for my code:
https://developers.arcgis.com/javascript/3/jssamples/widget_locate.html
my code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>OpenStreetMap</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.35/esri/css/esri.css">
<style>
html, body, #esri-map-container {
padding: 0px;
margin: 0px;
height: 100%;
width: 800px;
height: 500px;
}
#LocateButton {
position: absolute;
top: 95px;
left: 20px;
z-index: 50;
}
</style>
<script src="https://js.arcgis.com/3.35/"></script>
<script>
var map;
require([
"esri/map",
"esri/dijit/LocateButton",
"dojo/domReady!"
], function(Map, LocateButton)
{
map = new Map("map", {
center: [-56.049, 38.485],
zoom: 3,
basemap: "streets"
});
geoLocate = new LocateButton({
map: map
}, "LocateButton");
geoLocate.startup();
});
</script>
</head>
<body>
<div id="map" class="map">
<div id="LocateButton"></div>
</body>
</html>
So yeah, I don't know where to search really, if you can direct me or help me out figuring how am I supposed to do that.
You can get some information data about the location detected by using the 'locate' event.
In there you will find the coordinates of the location and much more. I personally tried to convert coordinates to address but there is not much ArcGIS support right now. If you find a way through Google's API maybe you will be able to finally get the city through the coordinates ArcGIS gives you.
geoLocate.on('locate', (data) => {
console.log(data);
});
You will find a working example of the event I mentioned above here.
I want to display a polyline underground in cesium.js. But I have no idea about this.
It seems that cesium has not provided official underground function for the reason that cesium cameral can not be placed undergroud,but the underground effect can be gained by an alternative way--translucent terrain.
According How to display underground entity? in Cesium-dev google group,I have achieved a barely satisfactory approach to showing the entity(including gltf models) underground.The displaying effect is as what the GIF file shows.This appoach contains mainly 3 steps.
For gif, see here.
1.change only one line code in cesium source code;get the cesium source code,then find the file named GlobeSurfaceTileProvider.js,change
command.pass = Pass.GLOBE;
to
command.pass = Pass.TRANSLUCENT;
2.generate the cesium release code with gulp tool;use your CLI to execute gulp release. PS： You may need set your node environment and install the dependency node modules and install gulp tool.
3.Implemention code.PS: note the following snippet can run only if you have changed the cesium source code which is illustrated in step one.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Use correct character set. -->
<meta charset="utf-8">
<!-- Tell IE to use the latest, best version. -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Hello World!</title>
<script src="../Build/Cesium/Cesium.js"></script>
<style>
#import url(../Build/Cesium/Widgets/widgets.css);
html,
body,
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
position: relative;
}
.tools {
position: absolute;
top: 20px;
left: 20px;
width: 100px;
}
</style>
</head>
<body>
<div class="container">
<div id="cesiumContainer">
</div>
<div class="tools">
Opacity: <input id="btnImageryAlpha" type="range" min="0" max="10" value="10" oninput="change()" />
</div>
</div>
<script>
function change() {
var value = document.getElementById("btnImageryAlpha").value;
if (viewer.imageryLayers) {
for (var i = 0; i < viewer.imageryLayers.length; i++) {
viewer.imageryLayers.get(i).alpha = value / 10;
}
}
console.log(value);
}
var terrainProvider = new Cesium.CesiumTerrainProvider({
url: 'https://assets.agi.com/stk-terrain/v1/tilesets/world/tiles',
requestVertexNormals: true
});
var viewer = new Cesium.Viewer('cesiumContainer', {
//skyAtmosphere: false,
//orderIndependentTranslucency: false,
baseLayerPicker: false,
terrainProvider: terrainProvider
});
//viewer.scene.globe.depthTestAgainstTerrain = false;
//change the ugly blue color to black
viewer.scene.globe.baseColor = new Cesium.Color(0, 0, 0, 0);
//default is 1
//viewer.scene.globe.imageryLayers.get(0).alpha = 0.5;
var blueBox = viewer.entities.add({
name: 'Blue box',
position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 5),
box: {
dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
material: Cesium.Color.BLUE
}
});
viewer.zoomTo(blueBox);
</script>
</body>
</html>
Yes, this is supported in cesium. It can be hard to see sometimes since the camera cannot go bellow the ellipsoid.
var viewer = new Cesium.Viewer('cesiumContainer');
var purpleArrow = viewer.entities.add({
name : 'Purple straight arrow at height',
polyline : {
positions : Cesium.Cartesian3.fromDegreesArrayHeights([-75, 43, -200000,
-90, 43, -200000]),
width : 10,
followSurface : false,
material : new Cesium.PolylineArrowMaterialProperty(Cesium.Color.PURPLE)
}
});
viewer.zoomTo(viewer.entities);
Live
I am new to Javacript (very, very new) and I need to place a loading spinner on a site. We currently have a screensaver and once you tap the screen it takes a awhile to get to the necessary url. So, we wanted to place a spinner to make sure users would not continue to tap the screen.
I am using spin.js abd I am pretty sure I am doing something wrong as it is not showing up when I do a test.
Here is the code I am using:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, width=device-width" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>THE TITLE</title>
<style type="text/css">
body {
background-color: #000;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
width: 1024px;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
-webkit-user-select: none;
-webkit-text-size-adjust: none;
}
a,img,map,area {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
</style>
<script type="text/javascript" src="spin.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var opts = {
lines: 13, // The number of lines to draw
length: 20, // The length of each line
width: 10, // The line thickness
radius: 30, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 0, // The rotation offset
direction: 1, // 1: clockwise, -1: counterclockwise
color: '#000', // #rgb or #rrggbb or array of colors
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: '50%', // Top position relative to parent
left: '50%' // Left position relative to parent
};
var target = document.getElementById('foo');
var spinner = new Spinner(opts).spin(target);
</script>
</script>
</head>
<body onLoad="timeout(7,goto,'screen3.html');">
<img src="screen2.jpg" width="1024" height="768" border="0">
<div id="spinner">
</div>
</body>
</html>
Any advice will be appreciated.
A few things are wrong with your code:
you have 2 closing <script/> tags after eachother (right before ), so that's a syntax error.
you have another syntax error. You're not closing jqueries document.ready function properly.
You're using a jQuery method but you're not including the jQuery library in your code.
You say color:'#000' in the spinner options, which means the spinner will be black (same as your background color so you will never see it).
The spinner works in its most simple form. See working example:
http://jsfiddle.net/wLkganhm/
If you're very new to javascript I suggest reading up on how to use the debugger so you can find the syntax errors for yourself :)
You have a few issues with your code as already pointed out.
I've put up a cleaned up version here http://jsbin.com/payuzeyopa.
Things to improve on/fix:
Try using a site like JSFiddle or JSBin to share/prototype your code with others
Keep your HTML, CSS and JavaScript files separate
Spot errors early by using tools built into the browser. For example, see http://discover-devtools.codeschool.com/ for an excellent starter.
Finally, read up on JavaScript and HTML :)
Good luck!
I'm inserting a very basic Google map into my page and the zoom control and streetmap icon are not visible, however if I place my mouse over where they should be I can zoom the map and enter streetview.
So the controls are there just not visible.
<script type="text/javascript"
src="//maps.googleapis.com/maps/api/js?key=<apikey>&sensor=false®ion=IT">
</script>
var myOptions = {
zoom: 17,
center: latlng,
panControl: true,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
},
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
Any ideas what the problem could be?
That is definitely a CSS issue that you have with your code. Look for CSS that is applying to all images like:
img {
max-width: 100%;
}
I had this problem, the fix was to include this CSS ...
.gmnoprint img { max-width: none; }
The CSS selector .gmnoprint img gets to all images [img] on the Google Map [gm] controls that are non printing [noprint]. In my case max-width had been set globally to 100%. Unsetting this fixed the issue.
Best solution to reach only for google map
.gmnoprint img {
max-width: none;
}
I had a very similar issue and it turned out in my case NOT to be a CSS issue. In my case, the Content-Security-Policy header on our site was blocking certain images from being rendered. In this case it was blocking the street view images (loaded from a *.ggpht.com uri) and the button icons which use inline svg data specified using the data: scheme. To fix this, I added the following to the Content-Security-Policy header:
img-src data: 'self' https://*.googleapis.com https://*.google.com https://*.gstatic.com https://*.ggpht.com
Note that on the moment it's not even possible to show the full size zoom slider on touch devices (ipad etc). Here's the documentation:
http://code.google.com/apis/maps/documentation/javascript/controls.html
google.maps.ZoomControlStyle.SMALL displays a mini-zoom control, consisting of only + and - buttons. This style is appropriate for small maps. On touch devices, this control displays as + and - buttons that are responsive to touch events.
google.maps.ZoomControlStyle.LARGE displays the standard zoom slider control. On touch devices, this control displays as + and - buttons that are responsive to touch events.
I ran into a variant, with the offending css looking like:
img {
max-width: 100%;
max-height: 100%;
}
So, an additional line is needed:
#map_div img {
max-width: none !important;
max-height: none !important;
}
I'm thinking this might be a problem with the browser or the code within the page that you're embedding this map.
If I look at this simple hello world code, the maps controls show up fine. I geocoded this map to the same location as your sample, so its not anything to do with the location.
What happens when you use this sample?
<!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=true®ion=it">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(45.38686, 8.91927);
var myOptions = {
zoom: 17,
center: latlng,
panControl: true,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
},
scaleControl: true,
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>