i created buttons to zoom to particular countries. However when i clicked the button,Singapore it navigate to Singapore but i cant see exactly the Singapore country.
So i wanted a better image.
Here is my code below...
<!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>My Work</title>
<script src="../Build/Cesium/Cesium.js">
</script>
<style>
#import url(../Build/Cesium/Widgets/widgets.css);
html, body, #cesiumContainer {
width: 98%; height: 98%; margin: 0; padding: 0; overflow: hidden;
}
</style>
</head>
<body>
<div id="cesiumContainer">
<button type="button" class="cesium-button" onclick = "zoomToSingapore();" data-toggle="tooltip" data-placement="bottom" title="Please click me if you want to zoom to Singapore">Zoom To Singapore</button>
<button type="button" class="cesium-button" onclick = "zoomToMalaysia();" data-toggle="tooltip" data-placement="bottom" title="Please click me if you want to zoom to Malaysia">Zoom To Malaysia</button>
</div>
<div id="cesiumContainer" style="position:absolute;top:24px;right:24px;width:38px;height:38px;"></div>
<script>
viewer = new Cesium.Viewer('cesiumContainer', {
timeline: false,
navigationHelpButton: false,
infoBox: false
});
function zoomToSingapore()
{
var singapore = Cesium.Cartesian3.fromDegrees(103.851959, 1.290270);
viewer.camera.lookAt(singapore, new Cesium.Cartesian3(0.0, 0.0, 4200000.0));
}
function zoomToMalaysia()
{
var malaysia = Cesium.Cartesian3.fromDegrees(101.9758, 4.2105);
viewer.camera.lookAt(malaysia, new Cesium.Cartesian3(0.0, 0.0, 4200000.0));
}
</script>
</body>
</html>
My question, if i click Singapore, it will zoom to Singapore just like the second image which i have attached to this question.. What do i need to zoom just like the last image???Can you please help me?? Thank you
It looks like your height is too high. Try changing 4200000.0 to 42000.0.
Edit: Here's a more complete code example. This one turns on labels, so you can see the borders. Paste this code into Sandcastle and run it with F8.
var imagery = Cesium.createDefaultImageryProviderViewModels();
var viewer = new Cesium.Viewer('cesiumContainer', {
imageryProviderViewModels: imagery,
selectedImageryProviderViewModel: imagery[1]
});
var height = 50000;
var singapore = Cesium.Cartesian3.fromDegrees(103.85, 1.33, height);
viewer.camera.flyTo({
destination: singapore,
duration: 0
});
Above, I get the default list of imagery providers, and pre-select the one with labels turned on. Then I fly to a point 50km above Singapore, using duration: 0 to snap the camera there.
Related
I'm trying to change position and dimensions of the canvas but it's set as inline code with !important added, editing style attribute is instantly changed to original styling.
There is fullscreen option but it doesn't change anything for me: docs.
I've spend a lot of time trying to change it with no luck.
Simple example showing issue:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>tsParticles</title>
<style>
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
body {
background-color: #212121;
}
#tsparticles {
width: 200px;
height: 200px;
position: absolute;
}
</style>
</head>
<body>
<div id="tsparticles"></div>
<script
src="https://cdn.jsdelivr.net/npm/tsparticles-preset-bubbles#2/tsparticles.preset.bubbles.bundle.min.js"></script>
<script>
(async () => {
await loadBubblesPreset(tsParticles); // this is required only if you are not using the bundle script
await tsParticles.load("tsparticles", {
autoPlay: false, //works
// FullScreen: false, //nothing changes
FullScreen: { enable: false, zIndex: 99 }, ////nothing changes
preset: "bubbles",
});
})();
</script>
</body>
</html>
`
I've tried changing inline styling and find a way to set it in config. Version v1 was sized according to its parent. With version v2 I'm stuck and out of ideas.
The property for disabling the full screen options is fullScreen, not FullScreen. The options are case sensitive.
I'm having trouble understanding whats going on with a grid I created. I made some code for a grid via javascript that changes the cell color when the mousepointer passes over it, however whenever I view this grid in a fullscreen window the view of the grid changes to four separate columns. This only happens when I look at the grid in fullscreen however, when viewing the grid in any smaller sized window it looks exactly how you envison a grid; with no spaces in between columns.
gridProblem
This is how the grid looks fullscreen with the spacing issue shown
grid solution
This is how the grid looks in any window sizing outside of maximized, and how I would like the grid to display 100% of the time.
Just in case, here is the code I'm using:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Etch N Sketch</title>
</head>
<body>
<div class="container" id="container"></div>
<script src="script.js"></script>
</body>
</html>
Javascript:
const board = document.getElementById("container");
for (x=0; x <= 15; x++) {
const cell = document.createElement('div');
cell.className = "cells";
cell.setAttribute("style", "height: 200px; width: 200px; color: black;");
cell.style.backgroundColor = "blue";
cell.style.border = "solid 2px";
cell.style.borderColor = "black";
board.style.columnGap = "0px";
board.style.display ="grid";
board.style.gridTemplateColumns = "auto auto auto auto";
board.appendChild(cell);
cell.addEventListener("mouseover", change = () =>
cell.style.backgroundColor = "red")
cell.addEventListener("mouseout", reset = () => cell.style.backgroundColor = "blue")
}
The issue is that you set the width and height to be absolute values here
cell.setAttribute("style", "height: 200px; width: 200px; color: black;");
so at a smaller screen size 200px is fine but once the area that the squares need to cover becomes larger than 200px your limiting them by having these values tied to them.
I'm try to get my current location on Apple Maps using MapKit JS, but I'm not sure how to do that. The following is the code I have to load the coordinates manually. But I need to be able to have the code to automatically recognize my current coordinate and show it on the Apple Map.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js"></script>
<style>
#map {
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
mapkit.init({
authorizationCallback: function(done) {
done("API KEY");
},
language: "en"
});
var map = new mapkit.Map('map', {
showsMapTypeControl: false,
showsCompass: mapkit.FeatureVisibility.Hidden
})
var coordinateRegion = new mapkit.CoordinateRegion(
new mapkit.Coordinate(40.51415196691954, -74.43808765761719),
new mapkit.CoordinateSpan(1.234, 1.23423)
);
map.region = coordinateRegion;
</script>
</body>
</html>
navigator.geolocation.getCurrentPosition(function(position){
mylat=position.coords.latitude;
mylng=position.coords.longitude;
map.setCenterAnimated(new mapkit.Coordinate(mylat, mylng), true);
});
Clarification as requested:
The code above leverages HTML5 Geolocation API. Once the user allows access to their location and it is retrieved, we pass the coordinates to the mapkit element to be set as the center.
I need to create a layout with a "menu" sort of thing on the left, and on the right load a the world map. In the left menu I will have a tree, with checkboxes on the leaves. Each leave is a tile that will be loaded on it's position when the checkbox is selected. Let's say on the tree I have as parents USA and Canada. Under USA I have New York Buildings, New York Streets, Washington Buildings, and under Canada something similar. When I check New York Buildings, I need to load that tile over the map and center the map to that tile. When I click New York Streets I need the other tile to be put over this first one(it will have transparency). And so on. The main idea is that I cannot center the map to the location of the tile. Haven't tried the rest, this is where I am stuck. My code:
#{
ViewBag.Title = "Map";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div id="mainWindow"
data-dojo-type="dijit.layout.BorderContainer"
data-dojo-props="design:'headline', gutters:false"
style="width:100%; height:100%;">
<div id="header"
data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
This is the header section
<div id="subheader">subheader</div>
</div>
<div data-dojo-type="dijit.layout.ContentPane" id="leftPane" data-dojo-props="region:'left'">
<div data-dojo-type="dijit.layout.TabContainer">
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Legend', selected:true">
<div id="legendDiv"></div>
</div>
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Tab 2'" >
Content for the second tab
</div>
</div>
</div>
<div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"></div>
<div id="footer" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
this is the footer section
</div>
</div>
#section Head
{
<script type="text/javascript">
var map;
require(["esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "dojo/domReady!"],
function (Map, Tiled) {
var tiled = new Tiled("http://xx.xxx.xx.xx:xxxx/arcgis/rest/services/USA/NewYork_tiles/MapServer");
map = new Map("map", {
basemap: "topo",
center: [[-79.40, 43.64],
zoom: 12
});
map.addLayer(tiled);
}
);
</script>
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
<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></title>
<link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
<style>
html, body, #map {
height: 100%; width: 100%; margin: 0; padding: 0;
}
</style>
<script src="http://js.arcgis.com/3.8/"></script>
#RenderSection("Head", false)
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body class="claro">
#RenderBody()
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
</body>
</html>
this is how I found that one centers the map. But I would like to center it to the loaded tile. Also, can the folder structure with the tiles (http://xx.xxx.xx.xx:xxxx/arcgis/rest/services) loaded in a tree?
The map object has several methods for displaying a particular view, be it centring on a MapPoint or other geometry. For example, you could use Map.centerAt(mapPoint) if you had a map point. What you want to do is centre on the extent of the tiled map service you've loaded so you can use map.setExtent(extent, fit) passing it the extent of the tiled service and the Boolean fit if you want it to zoom as required to fit the whole extent. You can get the extent of the tiled service using TiledMapServiceLayer.fullExtent property. For example:
map.setExtent(tiled.fullExtent, true);
You can subsequently put this into your check box event function so that every time it's checked it zooms to the extent (if that's how you want it to behave, another option might be to have the checkbox click event just toggle the layers visibility but then have a 'goto' button next to it that zooms to it).
You can check out more documentiontation for the map object and all of the ArcGIS API here: https://developers.arcgis.com/javascript/jsapi/map-amd.html
Hope this helps.
Edit:
As per your comment, trying to access the fullExtent property straight after the call to load the layer doesn't work because addLayer is asynchronous and so execution returns before the layer is loaded. To set the extent straight as soon as the layer is loaded, you need to register a function to run when the layers onLoad event is raised. The following code should achieve this:
var tiled = new Tiled("http://xx.xxx.xx.xx:xxxx/arcgis/rest/services/USA/NewYork_tiles/MapServer");
tiled.on("load", displayLayerExtent);
map.addLayer(tiled);
function displayLayerExtent(evt) {
map.setExtent(evt.layer.fullExtent, true);
}
I have mixed content (images, text) in an overflow:none element. Now, I'd like to automatically scroll that content in x/y axis based on the location of the mouse pointer. Overflow:auto wouldn't be an option, as I wouldn't like to show/use the scrollbars in that element.
I've found a script which does something similar, but only with the background image. Is there a way to have a similar effect but with moving the whole content of the div? Thank you for your answers in advance!
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test jQuery Move Background with Mouse Move</title>
<link rev="made" href="mailto:covertlinks [ at ] gmail [ dot ] com" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="generator" content="NoteTab Pro 5.5" />
<meta name="author" content="Perry Wolf" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="jquery.1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var vH=$('#viewer').height();
var vW=$('#viewer').width();
var vT=$('#viewer').offset().top;
var vL=$('#viewer').offset().left;
$('#viewer').mousemove(function(e){
var ypos=e.pageY-vT;
var xpos=e.pageX-vL;
var y=Math.round(ypos/vW*100);
var x=Math.round(xpos/vH*100);
$('#test').val(x+' , '+y);
$('#viewer').css({backgroundPosition: x+'% '+y+'%'});
});
});
</script>
</head>
<body style="color:#FFFFFF;background:#102030;text-align:center;">
<h1 style="text-align:center;">Test Move Background on Mousemove:</h1>
<div id="viewer" style="border:solid 1px #FFFFFF;margin:50px auto 0px auto;width:400px;height:400px;background:url(ironhide1024x768.jpg) 0% 0% no-repeat;cursor:url(target_cursor.gif), crosshair;text-align:center;line-height:300px;">
</div>
<input type="text" id="test" size="30" style="display:block;margin:10px auto;width:150px;" />
</body>
</html>
This was a fun one! Change it so you move the scrollTop and scrollLeft instead of background position. Since you have a percentage you could calculate the of scrollTop and scrollLeft like so. Check out the fiddle.
$(document).ready(function(){
var viewer = $('#viewer'),
vH = viewer.height(),
vW = viewer.width(),
vT = viewer.offset().top,
vL = viewer.offset().left,
sTop = viewer.find(':first').height() + 18 - vH,
sLeft = viewer.find(':first').width() + 18 - vW;
// the sTop and sLeft could be calculated differently. In this case
// I am assuming that the viewer has a single child that is larger than itself.
// realistically this should check total possible scrollTop and scrollLeft
$('#viewer').mousemove(function(e){
var $this = $(this),
y = (e.pageY-vT)/vH,
x = (e.pageX-vL)/vW;
$this.scrollTop(Math.round(sTop * y))
.scrollLeft(Math.round(sLeft * x));
});
});