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){
});
Related
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
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);
I'm developing an App in which the map will be shown to user and I need to add around 10-12 images to the map at different GeoPoints each having 1KB of size.
I'm adding those images dynamically as per below:
Image img = new Image();
img.Height = 35;
img.Width = 35;
img.Source = new BitmapImage(new Uri("ms-appx:///Assets/myImage.png"));
img.RenderTransform = new CompositeTransform() { Rotation = item.bearing };
MapControl.SetNormalizedAnchorPoint(img, new Point(0.5, 0.5));
MapControl.SetLocation(img, new Geopoint(new BasicGeoposition() { Latitude = item.latitude, Longitude = item.longitude }));
myMap.Children.Add(img);
My Problem is
After I add those 12 images, my Map control becomes soo Laggy that while moving the map from one location to other, it hangs a lot.
So, is there any efficient way to add images to Map in windows phone 8.1 App.
Edit:
I've tried to add MapIcons to the Map, but in that case MapIcons were disappeared at specific zoom level, but i want to keep those MapIcons visible at any zoom level.
So is there any way I can make MapIcons visible for every zoom level?
You could use the MapIcon class instead, this would be handled better as the map is a native C++ control, so it has to do a lot of work to position XAML elements on the map. The MapIcon class is a native class so it renders much better. You will need to convert your image into a RandomAccessStream and then pass it into the MapIcon image property. This may help: https://blogs.msdn.microsoft.com/going_metro/2012/05/14/working-with-streams-creating-randomaccessstreamreference-from-image-downloaded-from-web/
You can then add the MapIcon's to the maps MapElements property.
I am experiencing the same problem as described here. As the suggestion in the referenced issue did not solve my problem, I'm hoping someone has additional insight that might help me out.
I'm using gwt 2.5.1 and gwt-maps 3.8.0. As shown in the images in the reference, my map is partially displayed in the upper left corner and only fills the panel when I manually re-size the browser. The problem is present in both FF and IE9.
Here is a partial screen shot. The map controls are placed in about the correct locations. Its just the map tiles that are not displayed.
I've tried using Scheduler.scheduleDeferred to defer creation of the map without success. I also used scheduleDeferred to resize the map as shown below without success
private final native void resizeMap(GoogleMap map) /*-{
$wnd.google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );
}-*/;
My html body contains a div (id "map-container") which I pass to GoogleMap.create().
Element mapDiv= DOM.getElementById("map-container");
VerticalPanel mapPanel.add(RootPanel.get("map-container"));
...
GoogleMap.create(mapDiv, mapOptions);
The hierarchy looks like:
DockLayoutPanel (added to the RootLayoutPanel)
DockLayoutPanel
SimplePanel
Caption Panel
DockLayoutPanel
DeckPanel
VerticalPanel (mapPanel)
mapDiv
GoogleMap
Any suggestions are greatly appreciated!
I've created a small javascript game and I tested on my local computer in all major browsers and it works fine . After that I uploaded the game on my hosting server and the game won't display in Chrome , the canvas area is grey but it works fine in firefox , anyone knows why ? Here is the link for the demo
http://djordjepetrovic.rs/igrica/
In your catcher_game.js file I found at least on of this:
draw: function(){
basket_catcherImg = new Image();
basket_catcherImg.src = 'images/basket.png';
ctx.drawImage(basket_catcherImg, this.x, this.y, this.w, this.h);
// ...
This won't work very well. It works locally on your computer as the image is cached from disk.
Loading images is an asynchronous operation so your drawImage needs to wait until the image is loaded - the proper way is:
draw: function(){
var me = this;
basket_catcherImg = document.createElement('img');
basket_catcherImg.onload = function() {
ctx.drawImage(basket_catcherImg, me.x, me.y, me.w, me.h);
}
basket_catcherImg.src = 'images/basket.png';
//...
You need to do this with other such instances of img as well.
The reason you need me here is because this is changed to the image element when called on the onload callback. So you need to keep a reference to the original this context.
Also replace new Image() to createElement('img') as there is currently an issue in Chrome that doesn't handle this correctly.
Nice graphics by the way!