I need to show some Sprites when the camera gets close to a building and when the camera zoom out, remove the Sprites.
Is there any event that triggered when zoom changes? Also, How can we get the current zoom value?
There is an event trigerred when Camera changes (included zoom) :
viewer.addEventListener(Autodesk.Viewing.CAMERA_CHANGE_EVENT, (e) => {
console.log(e)
})
There is a zoom property in the event received. You will additionally find a lot of informations
Related
I have created an Ionic 2 / Angular 2 App. I have integrated Google Maps and it works fine. However the second time the Google Maps appears completely gray. I have searched the internet and tried different solutions to solve it. However, none of the solutions below work:
- google.maps.event.trigger(this.map, 'resize');
- google.maps.event.clearInstanceListeners / this.map.detach(); / this.marker.setMap(null);
When I resize the view in chrome then the maps which appeared in gray is suddenly shown. So how can I trigger this resize manually. I hope you can help.
My code can be found here https://github.com/marinusgeuze/metjekindnaarbuiten.
Best regards,
Marinus Geuze
===========================================
Issue is solved by adding next line of code:
setTimeout(() => google.maps.event.trigger(this.map, 'resize'), 600);
I didn't have exactly the same issue, but something similar happen when using LeafletJS in my Ionic 2 app, and a call to their invalidateSize function on a small timeout fixed the issue for my app. Here's an example:
ionViewLoaded() {
console.log('ObservationDetails.ionViewLoaded');
// Leaflet setup calls here
...
// invalidateSize must be called because the page hasn't been drawn, only loaded,
// and the map div will get resized causing the "gray block/unloaded map tile"
// problem. Invalidating the map will fix that, but the call needs a slight
// delay before firing...
setTimeout(() => this.map.invalidateSize(), 600);
}
Solution for map, Use Below code of line to resolve the issue :
// you must use "map" variable name, or you can use your defined variable name
// Example : var map = (new google.maps.Map(...));
setTimeout(function() { google.maps.event.trigger(map, 'resize') }, 600);
Recently on a project I was displaying an Info Window on the click of a map marker where the content was loaded with an XHR request. There was a noticeable delay from the time of the click event to when the AJAX callback triggered the opening of the Info Window and I wanted to change the mouse cursor to a 'wait' icon so the user knew their click had triggered something.
I first tried setting a cursor style on body, html but found the styles used by the map superseded this.
So, how to set a wait cursor regardless of the mouse pointer being positioned over the marker, map, or elsewhere on the page?
This is the first time I've posted a question I have an answer ready for. I found some posts talking about setting either a map cursor or a marker cursor buy nothing concisely explaining how to accomplish what I am asking here. Hope this saves someone a little time.
I ended up with the following code to accomplish this:
/**
* Event handler for marker click event
*/
function markerClickHandler(marker, event) {
$('html, body').css("cursor", "wait");
auctionMap.setOptions({draggableCursor: 'wait'});
marker.setCursor('wait');
$.ajax({
type: 'GET',
url: '/get-marker-info/' + marker.some_id,
dataType: 'html',
}).done(function(response) {
infoWindow.setContent(response);
infoWindow.open(map, marker);
}).fail(function() {
alert('An unknown error occurred.');
}).always(function() {
$('html, body').css("cursor", "auto");
auctionMap.setOptions({draggableCursor: null});
marker.setCursor(null);
});
}
This gets a wait cursor to display when the mouse is anywhere on the page, in or out of the map, and while over the marker.
The draggableCursor by default uses an image of an open hand (http://maps.gstatic.com/mapfiles/openhand_8_8.cur), not a standard CSS cursor property value.
This is why we use null when reverting the cursor after the call is completed, rather than say using the cursor auto.
It works well enough though is a little wonky in its interactions with mouse movement to trigger the transition. Curious if anyone could improve the code in that regard.
See an example: http://jsfiddle.net/0ere5tju/
I am using Openlayer version 3 for some mapping process. My map source is static image for this reason I used ol.source.ImageStatic datasource type.
My problem is zoom level. How can find zoom level to show image actual size? When load high definition image, OpenLayer show it smaller.
Thanks.
Map resolution/zoom can be listen with:
map.getView().on('change:resolution', function(evt){
var resolution = evt.target.get(evt.key);
console.info(resolution);
});
You can also monitor your ol.layer.Image
your_image_layer.on('change:maxResolution', function(evt){
});
your_image_layer.on('change:minResolution', function(evt){
});
I am working with the GoogleMaps API and I'm trying to distinguish between a rectangle object being resized or moved.
I am using the listener like so:
google.maps.event.addListener(newShape, 'bounds_changed', function() {
// do stuff
});
However, this will fire when the rectangle is resized AND when it is moved completely. Is there some way to distinguish between these two distinct events?
I tried the way #Darwin has suggested. When we just begin to drag the coordinates still remain the same and so the event is fired for drag as well as bounds_changed
An easier and more reliable way, I did is to have a global variable called isBeingDragged and set it to true in dragstart event handler. In the bounds_changed event handler, I checked if this variable is true. If it is not, its a resize event, else it is a drag event.
I again set the isBeingDragged variable to false in drag_end event handler.
Store the bounds of the rectangle initially, when the event fires check if both(soutWest and NorthEast) have been changed. When It does , the rectangle has been moved, otherwise it has been resized.
After the check update the stored bounds.
I have a problem with google maps v3 zoom_change, as it doesn't solve my need perfectly.
I have 2 unmet requirements:
I need to get the bounds and show points that are inside the bounds after the user clicked in zoom control and zoom has been reajusted in the map. The method zoom_change do it before reajusting zoom, and the bounds aren't the ones I need.
The method zoom_change is called every time, for example, whenever I execute fitBounds or setZoom. I only need it when when zoomcontrol is clicked or when mousewheel is moved.
Is there a solution available in the v3 API for those issues?
Listen for the idle event.
From Google Maps Javascript API V3 Reference:
idle: This event is fired when the map becomes idle after panning or
zooming.
The event is called zoom_changed (NOTzoom_change). The event handler of this event is called AFTER the zoom has changed. It is indeed not straightforward to distnguish the zoom change caused by the user from that one caused by the program. A possible solution is to maintain a "global" variable say userZoom which denotes whether the user triggered the zoom.
var userZoom = true; // initial value: be prepared for user action
// Install listener
google.maps.event.addListener(Map.self, 'zoom_changed', function() {
if (userZoom) {
// the user changed zoom: do what should be done
}
else {
// zoom change caused by a program action: ignore
}
userZoom = true; // be prepared for the user zoom action
});
Before you call any of the program actions that change the zoom, set userZoom = false, e.g.
userZoom = false;
map.setZoom(9);
The only real way I have found is to create a custom zoom control on the map,
https://developers.google.com/maps/documentation/javascript/controls?utm_source=welovemaspdevelopers&utm_campaign=stackoverflow#CustomEvents
and then set an event listener on the control,
https://developers.google.com/maps/documentation/javascript/controls?utm_source=welovemaspdevelopers&utm_campaign=stackoverflow#ControlModification.
Clearly not elegant, but an option.