I am trying to pass value of latitude to the a-frame component as defined below. I am unable to do so. Please help. It seems trivial, I am new to Javascript.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Component Add</title>
<meta name="description" content="Hello, WebVR! • A-Frame">
<script src="js/aframe.min.js"></script>
<script src="js/three.js"></script>
</head>
<body>
<script>
navigator.geolocation.getCurrentPosition(showPosition);
function showPosition(position){
var Latitude = position.coords.latitude;
var Longitude = position.coords.longitude;
var arr = [Latitude, Longitude];
return arr;
}
// Store returned value in a variable
var all = showPosition(position);
// Displaying individual values
console.log(all[0]);
AFRAME.registerComponent('log', {
schema: {
message: {type: 'number', default: all[0]},
},
init: function () {
console.log(this.data.message);
}
});
</script>
<a-scene inspector="" keyboard-shortcuts="" screenshot="" vr-mode-ui="" device-orientation-permission-ui="" log="">
<!-- <a-sky src="MonValley_A_LookoutPoint_8k.jpg"></a-sky>-->
<a-assets>
<img id="sky" src="img/mon.jpg">
</a-assets>
<a-sky src="#sky" material="" geometry="" ></a-sky>
<div class="a-loader-title" style="display: none;">Hello, WebVR! • A-Frame</div>
</a-scene>
</body>
</html>
In the debugger it shows a message TypeError:position is undefined
Related
When we are initializing the map, we set the baselayer to "reduced.day".
We are currently facing a problem, when the user changes the map type from "map-view" to "satellite" and back to "map-view", the tile changed to the standard and not "reduced.day".
I have looked up the docs, but can´t find any hint on how to prevent that problem.
So my question is, how to set with the UI controls the map-view tiles to reduced day.
Thanks a lot.
I finally could achieve the solution for my problem.
The solution was to pass a custom object with the requested map style for each map type.
See below the complete code for editing the map controls.
<!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>Here Custom Controlls</title>
<script src="http://js.api.here.com/v3/3.0/mapsjs-core.js" type="text/javascript" charset="utf-8"
></script>
<script src="http://js.api.here.com/v3/3.0/mapsjs-service.js" type="text/javascript" charset="utf-8"
></script>
<script src="http://js.api.here.com/v3/3.0/mapsjs-ui.js" type="text/javascript" charset="utf-8"
></script>
<link rel="stylesheet" type="text/css" href="http://js.api.here.com/v3/3.0/mapsjs-ui.css"
/>
</head>
<body>
<div id="map" style="height: 800px; width: 800px;"></div>
<script type="text/javascript" charset="utf-8">
//Initialize the Platform object:
const platform = new H.service.Platform({
app_id: {YOUR_APP_ID},
app_code: {YOUR_APP_CODE}
});
// Get the default map types from the Platform object:
const defaultLayers = platform.createDefaultLayers();
// Instantiate the map:
const map = new H.Map(
document.getElementById("map"),
defaultLayers.normal.map,
{
zoom: 10,
center: { lng: 13.4, lat: 52.51 }
}
);
const mapTileService = platform.getMapTileService({ type: "base" });
var reduce = mapTileService.createTileLayer(
"maptile",
"reduced.day",
256,
"png8"
);
map.setBaseLayer(reduce);
// Create the custom UI:
const ui = H.ui.UI.createDefault(
map,
{
...defaultLayers,
normal: {
map: reduce
}
},
"de-DE"
);
</script>
</body>
</html>
Please see two javascript functions codes.
SatelliteLayer will work with type : 'aerial'.
ReducedLayer will work with type : 'base'.
/**
*
* #param {H.Map}
* #param {H.service.Platform}
*/
function setAerialSatelliteLayer(map, platform){
var mapTileService = platform.getMapTileService({
type: 'aerial'
});
var parameters = {};
var tileLayer = mapTileService.createTileLayer(
'maptile',
'satellite.day',
256,
'png8',
parameters
);
map.setBaseLayer(tileLayer);
}
/**
*
* #param {H.Map}
* #param {H.service.Platform}
*/
function setBaseReducedLayer(map, platform){
var mapTileService = platform.getMapTileService({
type: 'base'
});
var parameters = {};
var tileLayer = mapTileService.createTileLayer(
'maptile',
'reduced.day',
256,
'png8',
parameters
);
map.setBaseLayer(tileLayer);
}
Apologies, I am really new to this - I am following the google tutorials however I am unable to get the map to show in the html. I know the javascript is executing as I can see some manual console logs I put through the script. I also know the location is taken from the user.
I have 2 separate files, googlemaps.js and home.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>Title</title>
<script src="{% static 'js/googlemaps.js' %}"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA9etM9rqnYas63ypURAkvEFn_W_sU0NM4&callback=initMap">
</script>
</head>
<body>
<div id="map">
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</div>
</body>
</html>
And in the js file I have :
var curLat = null; //user location
var curLon = null;
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
window.alert("no location");
}
}
function showPosition(position) {
curLat = position.coords.latitude;
curLon = position.coords.longitude;
}
function initMap(){
getLocation() //finds out user location to fomat the map
if (curLat == null){
curLat = 42.3601; //if the user location cannot be found, set default ones
curLon = -71.0589; // of boston
console.log("random locations");
}
var options = {
zoom:10,
center:{lat:curLat, lng:curLon}
}
var map = new google.maps.Map(document.getElementById("map"),options);
}
If possible, could you please point me to what I am doing wrong in the HTML? Thank you
You have two errors:
1- You have to use if(curLat == null) note that double equal
2- The style property for map is not set correctly.
This two files in same folder work for me:
index.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>Title</title>
<script src="googlemaps.js"></script>
</head>
<body>
<div id="map" style="height: 400px; width: 100%;">
</div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA9etM9rqnYas63ypURAkvEFn_W_sU0NM4&callback=initMap">
</script>
</body>
</html>
And googlemaps.js:
var curLat = null; //user location
var curLon = null;
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
window.alert("no location");
}
}
function showPosition(position) {
curLat = position.coords.latitude;
curLon = position.coords.longitude;
}
function initMap(){
getLocation() //finds out user location to fomat the map
if (curLat == null){
curLat = 42.3601; //if the user location cannot be found, set default ones
curLon = -71.0589; // of boston
console.log("random locations");
}
var options = {
zoom:10,
center:{lat:curLat, lng:curLon}
}
var map = new google.maps.Map(document.getElementById("map"),options);
}
Regards.
There is a few things wrong, firstly you are using which is usually used for templating systems such as twig. To include your js file all you need is
After that where it says if(curLat = null) you are setting the variable to null. I would use if(curLat == null || curLon == null)
Can anyone solve this code?
i have some javascript code geolocation and here map script, i want to put geolocation coordinate in here map script..
here bellow my code..
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="stylesheet" type="text/css" href="http://js.api.here.com/v3/3.0.12.2/mapsjs-ui.css" />
<script src="http://js.api.here.com/v3/3.0.12.2/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="http://js.api.here.com/v3/3.0.12.2/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
<script src="http://js.api.here.com/v3/3.0.12.2/mapsjs-mapevents.js" type="text/javascript" charset="utf-8"></script>
<script src="http://js.api.here.com/v3/3.0.12.2/mapsjs-pano.js" type="text/javascript" charset="utf-8"></script>
<script src="http://js.api.here.com/v3/3.0.12.2/mapsjs-ui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button onclick="getLocation()">My Location</button><br/>
<input type="text" id="latpos" name="latpos">
<input type="text" id="longpos" name="longpos">
<div id="map" style="width: 100%; height: 400px; background: grey" />
<script type="text/javascript" charset="UTF-8" >
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.alert("Geolocation is not supported by this browser.");
}
}
function showPosition(position) {
var origlat= position.coords.latitude ;
var origlong= position.coords.longitude ;
var lat=document.getElementById("latpos");
lat.value=origlat;
var lon=document.getElementById("longpos");
lon.value=origlong;
}
function addMarkerAndSetViewBounds(map) {
var latitu="-6.811408423530006";
var longitu= "110.85068956017494";
var origl= origlat;
var origlo= origlong;
var Isone = new H.map.Marker({lat:latitu, lng:longitu}),
geol = new H.map.Marker({lat:origl, lng:origlo}),
group = new H.map.Group();
group.addObjects([Isone , geol]);
map.addObject(group);
// get geo bounding box for the group and set it to the map
map.setViewBounds(group.getBounds());
}
/Step 1: initialize communication with the platform
var platform = new H.service.Platform({
app_id: 'DemoAppId01082013GAL',
app_code: 'AJKnXv84fjrb0KIHawS0Tg',
useCIT: false,
});
var defaultLayers = platform.createDefaultLayers();
//Step 2: initialize a map - this map is centered over Europe
var map = new H.Map(document.getElementById('map'),
defaultLayers.normal.map,{
center: {lat:50, lng:5},
zoom: 15
});
//Step 3: make the map interactive
// MapEvents enables the event system
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
// Create the default UI components
var ui = H.ui.UI.createDefault(map, defaultLayers);
// Now use the map as required...
addMarkerAndSetViewBounds(map);
</script>
</body>
</html>
but, that code didn't work fine..
how to get value var origlat and var origlong in variable var origl and var origlo?
can anyone help me to fix this code run correctly
You should make origlat, origlong global variables, instead of local variable.
http://www.w3schools.com/js/js_scope.asp
I'm trying to add an image to my canvas but I'm getting the following error:
Uncaught TypeError: Cannot read property 'hasLoaded' of undefined
It says the error is coming from this line:
this.add.image('block',100,255);
index.html:
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Camera Learning</title>
<script src="js/phaser.min.js"></script>
<script src="js/states/boot.js"></script>
</head>
<body>
<script>
(function(){
var game = new Phaser.Game(450, 510, Phaser.AUTO, 'game');
game.state.add('boot', boot);
game.state.start('boot');
})();
</script>
</body>
</html>
boot.js:
boot = function(game){
console.log("%cStarting my awesome game", "color:white; background:red");
};
boot.prototype = {
preload: function(){
this.load.image('block','./res/borderblock.png');
},
create: function(){
console.log('adding');
this.add.image('block',100,255);
console.log('added');
}
};
this.add.image('block',100,255); should be this.add.image(100, 255, 'block'); - arguments order does matter and when the method receives a string instead of a number, things naturally don't work. In this case you have x, y and the image's key.
To add image this.add.image(x,y,'key'); or you can use 'sprite' like this.add.sprite(x,y,'key');
I am using a .svg file for plotting India map. It is displaying India map as desired.
Now I want to display circles on this map using latitude and longitude.
How can I draw circles by using places array? Any source code and web link would be appreciated.
My index.html code is as like below and the svg file I am using is here.
The final output of my script is here.
** Please also guide me, is this the correct way of displaying map?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="d3.v3.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
var places = [
{
name: "GUNA",
location: {
latitude: 24.5429,
longitude: 77.1032
}
},
{
name: "THE DANGS",
location: {
latitude: 20.4633,
longitude: 73.4646
}
}
]
d3.xml("toilet.svg", function(xml) {
var x = document.importNode(xml.documentElement, true);
document.body.appendChild(x)
});
</script>
</body>
</html>