I'm trying to use HERE js sdk.
I'm add a tap-event listener to map. How to get the actual coord of a tap.
I finished with code bellow:
let tapHandler = (evt) => {
console.log(evt.currentTarget.getCenter())
}
but it actually returns an initial center of the Map
You can get coordinates from the map with:
clickCoords = map.screenToGeo(e.viewportX, e.viewportY);
Related
I have a map with many polygons that are loaded from a kml file. I would like when clicking on a polygon to zoom in and center the map on this polygon.
Can you please guide me? I can't find a relative example in google maps api documentaton.
This isn't fully possible, as the KmlLayer does not return the actual geometry of the feature that is clicked, so you won't be able to get the bounding box in order to get the best zoom of the polygon. At best, you can get the lat/lng on the polygon where the mouse click occurred, which you can get with the KmlMouseEvent
https://developers.google.com/maps/documentation/javascript/reference/3/#KmlMouseEvent
Here's some very simple sample code
kmlLayer.addListener('click', function(kmlMouseEvent) {
var ll = kmlMouseEvent.latLng;
map.panTo(ll);
map.setZoom(19);
});
What works so far in my page is:
kmlLayer.addListener('click', function(event) {
toggleKml(map); //change kml file
setTimeout(function(){
map.setZoom(10);
var text = event.featureData.name;
var latitude = event.latLng.lat();
var longitude = event.latLng.lng();
console.log( latitude + ', ' + longitude );
var point = new google.maps.LatLng(latitude, longitude);
map.setCenter(point);
}, 2000);
});
This is a good starting point: https://developers.google.com/maps/documentation/javascript/kml
In order to zoom after click this code did the job:
google.maps.event.addListener(kmlLayer, 'click', function (event) {
map.setZoom(8);
});
Is there any way to get the right click event on a parsed KML layer using geoxml3 on google map.I am getting the right click event of map ie outer region of KML. But i am not able to get the click event on the parsed KML.
I have used like this
var geoXml = new geoXML3.parser({
map: map
});
geoXml.parse('file.kml');
geoxml3 parses the KML to native Google Maps Javascript API v3 objects. To add a right click events to them, you need to either add custom createMarker, createPolyline, createPolygon functions that add the right click listeners as the objects are created or process the results and add the listeners to the output.
The following was helpful and got the latitude and longitude when right clicked on a KML layer in google map
var geoXml = new geoXML3.parser({
map: map,
afterParse: function (doc) {
for (var i = 0; i < doc[0].placemarks.length; i++) {
var p = doc[0].placemarks[i];
clickablePolygon(p);
}
}
});
geoXml.parse(parameter.FileName);
function clickablePolygon(p) {
google.maps.event.addListener(
p.polygon,
"rightclick",
function (event) {
var clickedLocation = event.latLng;
var latlng = {
lat: clickedLocation.lat(),
lng: clickedLocation.lng(),
zlevel: map.getZoom()
};
}
);
}
In my scene I'm using a script to create an entity with a raycaster component. This works great, and the event listeners are working fine colliding with my ground object. But my ground is uneven, and I need to know the height of the ground where the raycaster hits. As far as I know, this isn't possible with just what A-Frame provides. I'd like to call THREE's raycaster.intersectObject, but I'm not able to get a working reference to the THREE raycaster. The A-Frame documentation mentions a member called raycaster, but it's undefined for me. I've tried a few different things, but to no avail. My next plan was to make a new component, but I figured I'd ask here first.
var ray = document.createElement('a-entity');
ray.setAttribute('id', 'raycaster');
ray.setAttribute('raycaster', 'objects: #ground');
ray.setAttribute('position', pos);
ray.setAttribute('rotation', '-90 0 0');
scene.appendChild(ray);
var ground = document.querySelector('#ground');
ray.addEventListener('raycaster-intersection', function() {
console.log(ray.raycaster); //undefined
console.log(ray.intersectedEls); //undefined
console.log(ray.objects); //undefined
console.log(ray.object3D.id); //gives me the THREE id
console.log(ray.object3D.intersectObject(ground.object3D, false)); //intersectObject not a function
});
Any clues? I'm sure I'm doing something stupid.
It's a member of the component, which you'll have to dig for.
ray.components.raycaster.raycaster
ray - entity
.components - the entity's components
.raycaster - the raycaster component
.raycaster - the raycaster object as a member of the raycaster component
Here is a complete component in case anyone is interested. Just add "set-to-ground" to your entity. If you want objects to be standing on the ground, you can add them as children to the entity and set their relative y position to half the object height.
Should still be enhanced with a "target" selector though as currently the ground needs to be with id 'ground'
AFRAME.registerComponent('set-to-ground', {
schema: {
type: 'string'
},
init: function () {
var data = this.data;
var el = this.el;
var scene = document.getElementById('ascene');
var ray = document.createElement('a-entity');
ray.setAttribute('id', 'raycaster');
ray.setAttribute('raycaster', 'objects: #ground');
ray.setAttribute('rotation', '-90 0 0');
el.appendChild(ray);
var ground = document.querySelector('#ground');
ray.addEventListener('raycaster-intersection', function getY() {
console.log(ray.components.raycaster.raycaster.intersectObject(ground.object3D, true)[0].point.y); //groundPos to log
var groundPos = ray.components.raycaster.raycaster.intersectObject(ground.object3D, true)[0].point.y;
ray.removeEventListener('raycaster-intersection', getY);
el.setAttribute('position', {y: groundPos});
});
}
});
I was fiddling a bit with Here Maps and with some some of the examples Here Javascript API Explorer and Here Maps on GitHub.
I tried to see if there's already a way to just add a visual bearing attribute in addition to longitude and latitude and have something like a small tip appear to the marker. This feels like something that many would like to have, so just to check I haven't missed anything obvious...
Is there a way to add visual bearing information to markers?
If not, does anyone know if there's an example of using a custom marker to achieve this I just couldn't locate?
There is no bearing/heading control ready available within the API - you will have to create a custom map component of your own. The usual way of doing this would be to inject some HTML as a new DOM element within the map control.
Firstly define your custom HtmlControl as shown:
function extend(B, A) {
function I() {}
I.prototype = A.prototype;
B.prototype = new I();
B.prototype.constructor = B;
}
function HtmlControl (html, id) {
nokia.maps.map.component.Component.call(this);
this.init(html, id);
}
extend(HtmlControl,
nokia.maps.map.component.Component);
HtmlControl.prototype.init = function (html, id) {
that = this;
that.id = id
that.set("node", document.createElement("div"));
that.node.innerHTML = html;
};
HtmlControl.prototype.getId = function() {
return "HtmlControl." + this.id;
};
HtmlControl.prototype.attach = function(map) {
map.getUIContainer().appendChild(this.node);
};
HtmlControl.prototype.detach = function(display) {
map.getUIContainer().removeChild(this.node);
};
Then set up the map and add the custom component as shown:
htmlControl = new HtmlControl(
"<img id='compass' style='left:4em;top:1em;width:100px;height:100px' src='...'/>", "Compass");
map.components.add(htmlControl);
The source file for the <img> element will need to hold the compass image. This is most likely to be an image with due North pointing upwards since the map control is based on the Normalized Mercator projection
Alternatively look at using the Map Image API and investigate the ra parameter to rotate the map.
I have requirement of displaying an address on a click of a button, for which i got the latitude and longitude of the desired location,
while mapping in URl
https://maps.google.com/?ll=28.64036031970850,77.24250191970849
like this. I don't get the desire pointer on google map Like which we get A in red pointer.
Thanks for any assistance.
Try this. Change the lat/long as per your need.
https://maps.google.com/?q=22.917923,72.773438
You can use custom markers for this. Here is a snippet to get you started:
// Create the map
var map = new google.maps.Map($("#map-result"), mapOptions);
// Create the marker on the map
var marker = new CustomMarker(new google.maps.LatLng(pinLatitude, pinLongitude), map, searchResults[i], markerNumber);
// Add listener to react to click of marker
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
// Call some function to do something
showSelectedMarker();
}
})(marker, i));
A very good example is here:
Google Maps JS API v3 - Simple Multiple Marker Example