I have an array item and all I want to do is add a link in the infowindow to click on, which then would simply zoom to marker (as well as center on). No matter what I try to do it doesn't work here is my sample - thanks.
['loc1', 48.21, -102.18, 3, '<h3>Location 1</h3><p>some text<BR><BR>As of Date: 07/29/2013<BR><BR>more and more text<br><a onclick="map.setZoom((48.21, -102.18), 10)"><u>Zoom to Location 1</u></a>'],
map.setZoom takes one parameter, an integer for zoom level. You're passing it (48.21, -102.18), 10, which makes no sense. You're probably trying to do both setCenter and setZoom at the same time, e.g. (no idea if this would work from the context of a link within an infowindow):
<a onclick="map.setCenter(new google.maps.LatLng(48.21, -102.18)); map.setZoom(10); return false">
Related
I'm trying to get a clone of a raycasted object, and move the clone of the selected object in a <div>. The raycaster works just fine, but the CSS3DObject instance (the cloned 3d Object) is not shown in the scene. I have made another renderer (namely a CSS3DRenderer), in addition to the current WebGLRenderer, and basically my css3d code consists of this:
cssRenderer = new CSS3DRenderer();
cssRenderer.setSize(window.innerWidth, window.innerHeight);
cssRenderer.domElement.style.position = 'absolute';
cssRenderer.domElement.style.top = 0;
cssScene = new THREE.Scene();
document.body.appendChild(cssRenderer.domElement);
...
thumbnail = document.querySelector('.thumbnail');
thumbObject = new CSS3DObject(thumbnail);
....
targetClone = target.clone();
thumbObject.position.copy(targetClone.position);
cssScene.add(thumbObject);
and my render loop code, pertaining to this, is:
requestAnimationFrame(update);
renderer.render(scene, camera); // WebGLRenderer
cssRenderer.render(cssScene, camera); //CSS3DRenderer
My intention is to embed the cloned object (targetClone) in the CSS3DObject (thumbObject, which in actuality is an HTML element). The console shows no error, and I cannot see any reaction to this code whatsoever (except that the div travels to the center of model!) No matter if I select the div through traversing the DOM or making a fresh element by means of createElement, nothing is being embedded in the div. I suspect that everything is behind the scene(s). Any ideas how can I achieve this, and where I'm doing it wrong?
I'm using ArcRotateCamera, when I click on mesh, I have to focus camera on
var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 2, Math.PI / 2, 300, BABYLON.Vector3.Zero(), scene);
camera.setTarget(BABYLON.Vector3.Zero());
// on mesh click, focus in
var i = 2;
var pickInfo = scene.pick(scene.pointerX, scene.pointerY);
if (pickInfo.hit) {
pickInfo.pickedMesh.actionManager = new BABYLON.ActionManager(scene);
pickInfo.pickedMesh.actionManager.registerAction(
new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger,
function (event) {
camera.position = (new BABYLON.Vector3(pickInfo.pickedPoint.x, pickInfo.pickedPoint.y, camera.position.z + i));
i += 2;
})
);
}
this code changes mesh's z position but don't makes it in the center of screen
There are a few things that can be changed in your code.
1st - what you are doing is executing a code action after a click, instead of simply running the code in the callback after a pick has occurred. You are registering a pick action (technically user click) on right on the first frame, but only if the mouse was found in the right location at the right moment. My guess is that it didn't work every time (unless you scene is covered with meshes :-) )
2nd - you are changing the camera's position, instead of change the position to which it is looking. Changing the camera's position won't result in what you want (to see the selected mesh), it will move the camera to a new position while still focusing on the old position.
There are a few ways to solve this. The first is this:
scene.onPointerDown = function(evt, pickInfo) {
if(pickInfo.hit) {
camera.focusOn([pickInfo.pickedMesh], true);
}
}
The ArcRotate camera provides focusOn function that focuses on a group of meshes, while fixing the orientation of the camera. this is very helpful. You can see a demo here:
https://playground.babylonjs.com/#A1210C#51
Another solution would be to use the setTarget function:
https://playground.babylonjs.com/#A1210C#52
Which works a bit differently (notice the orientation change of the camera).
Another thing - use the pointer events integrated in Babylon, as they are saving you the extra call for a scene pick. pointer down is executed with the pickinfo integrated in the function, so you can get the picking info of the current pointer down / up / move each frame.
**** EDIT ****
After a new comment - since you want to animate the values, all you need to do is store the current values, calculate the new ones, and animate the values using the internal animation system (documentation here - https://doc.babylonjs.com/babylon101/animations#basic-animation) . There are many ways to achieve this, I took an old function and modernized it :-)
Here is the demo - https://playground.babylonjs.com/#A1210C#53
I use openlayers3 to build an application
I would like to change the zoomlevel icons are visible at
https://bestofosm.org/?lon=4.0798&lat=50.9136&zoom=15#interesting-het-loo-garden
for example
if you go to London you see airports are visible at zoomlevel 10
lets say I want all touristic icons visible at zoomlevel 10
and airport icons at zoomlevel 15
is this possible?
The most simple solution is to put your markers in different layers and give each layer a minResolution and maxResolution. When the map zooms outside these resolutions the layers will automatically become hidden. Something like:
var touristicIcons = new ol.layer.Vector({
source: touristicIconsSource,
minResolution: xx
maxResolution: xx
});
// Repeat for airports layer, with different resolutions
Writing down a zoom level as a resolution will not work. You will need to find out what resolution belongs to your desired zoom level. The easiest way to do this is with this little hack, that logs the zoom level and resolution every time you scroll through the map:
map.getView().on('change:resolution', function (event) {
var view = event.currentTarget;
console.log('Zoom: ' + view.getZoom() +
', resolution: ' + view.getResolution());
});
In a given instance of google maps...
Is there a way to turn off the other instances of the maps which tile to the right and left of the initial central map?
I've seen ways to restrict the pan ability of the map ... but it uses lat + lng to determine when to re-center the map ... and thus the usage falls apart at different zoom levels.
For example: https://google-developers.appspot.com/maps/documentation/javascript/examples/map-simple
If on zooms all the way out, you can see how the map of the globe is tiled along the x-axis.
I would like a single instance of the map.
You could add an observer to the zoom_changed event, and set the minZoom if more than 90 degrees of map is shown. The second statement recursively reduces the zoom to an acceptable limit before the limit is known.
var zoomObserver = function () {
width = Math.abs(map.getBounds().getNorthEast().lat() -
map.getBounds().getSouthWest().lat());
if (width > 90){
var opt = { minZoom: map.getZoom()};
map.setOptions(opt);
}
if (width > 179){
map.setZoom(map.getZoom() + 1);
}
};
google.maps.event.addListener(map,'zoom_changed', zoomObserver );
This simple solution works for most use cases, doesn't take into account doubling the width of the map through resizing the browser window, so you may need to add the observer to another event in that case.
I've been having trouble creating a mechanism to allow the user to select a span of time from a timeline. Basically i want them to be able to click and drag horizontally, and retrieve the start and end positions of that event.
I especially need to include the case where the event goes off the edge of the screen (even if the end position is snapped to the edge of the screen that's fine).
While doing all of this, I want to be able to draw a box that goes from the start of the event to the current position of the mouse, so that it's obvious which area if being selected.
Basically, it doesn't seem to me that you're dragging something. You just have a sequence of press, move and release. You will have to click on something, I bet you could consider the press event on the timeline itself. So it'll be something like:
timeline.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
timeline.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
// the next line just considers that leaving the object surface is the same as depressing the mouse button
timeline.addEventListener(MouseEvent.MOUSE_OUT, onMouseUp);
function onMouseDown(evt:MouseEvent):void {
// add the event listener for the mouse move action
timeline.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
// create the movie clip for the box
// you get the mouse coordinates from evt.localX and evt.localY (relative to the origin of the timeline movieclip) or evt.stageX and evt.stageY (as global values)
}
function onMouseMove(evt:MouseEvent):void {
// adjust the selection width and height
// you get the mouse coordinates from evt.localX and evt.localY (relative to the origin of the timeline movieclip) or evt.stageX and evt.stageY (as global values)
}
function onMouseUp(evt:MouseEvent):void {
// remove the event listener for the mouse move, that means that the function onMouseMove will no longer be called
timeline.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
// brush up and send the final coordinates of the selection to the next function
}
For the selection graphics itself, you can either use an instance of a movie clip from your library, or you could simply create an empty movie clip, make it semitransparent and draw a rectangle in it, like so:
var selection:MovieClip = new MovieClip();
selection.alpha = 0.5;
selection.graphics.beginFill(0x000000);
selection.graphics.drawRect(x,y,width,height);
selection.graphics.endFill();
this.addChild(selection);