I've got a custom tiles overlay setup using Google Maps API v3. But the backend which generates the images for it is not powerfull enough to handle all of the calls when multiple concurrent users are active. So in many way's I've tried to reduce the number of of tiles requested by the map. There's one more optimisation I can't seem to figure out though:
When a user double clicks to zoom, or uses the zoom control, the map retriggers the tiles overlay which requests the new tile images. But if a user triggers the zoom button or double click again before the tiles have even loaded, these are all wasted calls. So what I would like to do is build a delay which waits x seconds before triggering the new tile images.
With the current event listeners (zoom_changed, dbl_click, click) I can't seem to stop google maps from triggering the new image tiles. It looks like by the time the zoom_changed event triggers, the tiles are already being requested. So I'm kind of missing a way to stop the triggering of getTileUrl. I already know how to re-trigger it, I just want to know a way to stop it when a user is using zoom.
Anyone got an idea how to tackle this?
I'm using this implementation as a base:
https://developers.google.com/maps/documentation/javascript/examples/maptype-image-overlay
Someone at Google pointed me to the right direction. And after some research I figured out that:
google.maps.event.addDomListener(map, "zoom_changed", function () {
map.overlayMapTypes.setAt(0, null);
}
solved my problem.
This allows me to stop the overlay trigger, so I can now retrigger it whenever I want to.
Related
I am trying to build a web application that has true multi touch capabilities. For example, I want to be able to drag a container around the screen while also zooming/panning on a google map at the same time. The problem that I am having is that if I am touching somewhere else on the page (not on the map) and then I touch on the map with another finger, the map acts as if both fingers were touching the map. This results in trying to pan on the google map with one finger turning into zooming in/out of the map because I am touching somewhere else on the page.
I am using Hammer.js for my other multi touch events on the page. I have tried putting an overlay over the top of the map and manually calling google maps api functions to move the map, which worked okay, but there are many features of the map that I will be missing if I use an overlay and manually pan and zoom.
I know that there is a list of all the different touch events that occur on the webpage, but I am not sure how to implement that list to solve this issue, if it is even possible.
EDIT: For more reference, you can recreate my problem by going to the google maps documentation. https://developers.google.com/maps/documentation/javascript/examples/map-simple
If you are on a touchscreen device, touch the map to start panning like normal, then touch some white-space on the page with another finger. If you remove your finger that was on the map, you can still control the position with the finger that is not even touching it.
Someone asked for code for reference, this is as close as I got to finding where the issue was. This prints out 'not correct' if I first touch in the map with one finger then off the map with another, but I am not sure where to go from there. Also, it does not print out if I touch outside of the map first, then in the map.
this.map.addListener('mousedown', function(e) {
if(e.va.target.className == 'company-header') {
console.log('not correct')
}
});
I've got google map on my webapp working with the JavaScript API V3. I give my users the ability to create some routes with this features:
the user can create a route.
the user can add waypoints doing click on the map.
the use can modify any waypoint and the markers origin/destination dragging the marker on the map.
the user can save the route.
The problem:
If the user click and dragging some part of the route without use any waypoint, the route change but I can't save it. Because I save the markers origin/destination and the waypoints.
there is any way to lock the route?
Here you can see an example in API documentation
Below I leave an image that you can see how the user drag the black and white circle and change the route (this is that I try to lock).
You need to tap into direction_changed event listener and puckup route points and see which ones you need and which ones you dont.
The other solution is to use non draggable route code and only allow user to click and create a point. Then calculate dustance when you have more than 1 points. Allow user to drag marker only and update route and total distance on drop marker.
If you can create a jsfiddle of what you have done so far it would help us look into it and give you a more accurate answer with working example.
Encountered the same problem today and found out that there's a setting for it. You just need to set the clickable property of polylineOptions to false.
this.directionsRenderer=new google.maps.DirectionsRenderer({draggable:!0,map,panel:this.elements.directionsBody,polylineOptions:{clickable:!1,strokeColor:"#4BAFF8"}})
DirectionsRenderer:
https://developers.google.com/maps/documentation/javascript/reference/directions#DirectionsRendererOptions.polylineOptions
PolylineOptions: https://developers.google.com/maps/documentation/javascript/reference/polygon#PolylineOptions
Okay so this may sound like a crazy question, but I have a Google Map (API v3) on a website, and at times I have a large number of markers on the map. Are there any plugins that exist, or how difficult would it be to write one, (starter code?) that would allow me to let the user say hit contrl + left mouse click and hold and enable them to "select" a portion of the map. After which when they release the left mouse button, I could fire an off a function that could update my google map to reset the zoom and only include the markers within the users selection area.
I'm really really wanting to try this, does anyone have any pointers or ideas that could help me?
UPDATE
Okay, is it even possible? :)
I believe it is possible however I think there is a better way to solve your problem which is to use clustering.
For the cropping you could:
Use event addDomListener to listen for 'mousedown' on the map. Check the event object passed to the handler to see if the ctrl key is pressed (e.ctrlKey).
Convert the x y coordinates for the mouse click into a lat lng (use fromPointToLatLng on the map projection). Create a rectangle at the position.
Add a addDomListener mousemove handler on the map. In the handler resize the rectangle using setBounds.
Add a addDomListener mouseup handler on the map. In the handler grab the bounds of the rectangle, remove the rectangle and call map.fitBounds.
I haven't tried the above but after all that typing I would recommend trying out clustering first to see if it satisfies your needs.
I have an OpenLayers + Bing mapping application that shows hazardous waste sites. A user can click a link to toggle a site's subsites on the map.
When I toggle the subsites off (which are points on a Vector layer) by calling destroyFeatures() on the layer, they disappear as expected. However, if I zoom in or out on the map, certain of the subsites reappear. This doesn't happen when moving the map, just zooming.
The ones that mysteriously reappear are coincident sites, i.e. two sites with exact same coordinates. Both get destroyed, and both reappear.
Why would these get destroyed from the layer, then reappear when zooming?
(OpenLayers version is 2.11)
Try this, it worked for me
layer.removeAllFeatures();
layer.destroyFeatures();//optional
layer.addFeatures([]);
Keep in mind that destroyFeatures() changes index of objects in vector. If you use indexes in your code, this may cause problems.
Are you sure you send ALL features as a parameter to destroyFeatures() method? An easier way to remove everything is just to call removeAllFeatures() method. If you want to hide and show features when user toggles subsite then it's even better to use show() and hide() methods on vector layer.
I create Bing Maps AJAX control and initialize it with always the same values: lat, lng and zoom level. This is a default aerial map type and a maximum zoom level. And every time I get the following image:
http://i50.tinypic.com/acturr.jpg
There is no documented method (or not) to refresh the current area so I should to do zoom out and zoom in using mouse every time, it's annoying. For Google Maps I found a useful trick:
google.maps.event.trigger(this.map, 'resize');
Does Bing Maps AJAX API have something similar?
I have recently encountered a similar issue on Bing maps AJAX V7:
On some browsers (Mostly on Chrome), if the map is not present on the viewport (you have to scroll to reach it), then it initializes improperly.
I have reported the issue to MSDN but didn't get any useful answer: https://social.msdn.microsoft.com/Forums/en-US/439c33bc-a1ed-4e74-a019-f7fecb809030/scroll-issue-on-chrome-with-ajax-v7-control
To fix this issue, I have used two things:
First of all, I had to find a way to force the Bing map to refresh (didn't found any solution on the internet nor object method to do that). After a lot of tests I came out with a solution:
map.setMapType(Microsoft.Maps.MapTypeId.mercator);
setTimeout(function(){map.setMapType(Microsoft.Maps.MapTypeId.auto);}, 1)
Indeed, changing the viewport to "mercator" then back to another forces the map to refresh (the setTimeout makes the action asynchronous)
I then have added a lib that triggers an event when an element is entering the viewport in order to trigger the force refresh every time the map enters the viewport