We have a legacy website from which the powers-that-be have decided we need to remove all of our Google maps, replacing them with maps provided by MapBox. So I'm in the middle of a crash project to swap out the old for the new.
And here's my problem: the old site is written in ASP.NET, making heavy use of Telerik's controls. In this page we have a RadSplitter, and a Google map being drawn in a RadPane.
Swapping out the Google map with the MapBox map was simple enough, except that the MapBox map isn't rendering correctly. Only the tiles along the left edge of the pane are drawing. But - when I resize the browser window, the rest of the tiles draw.
The div is defined with position: absolute, and top, bottom, right, and left set to 0. Which Google maps worked with.
My guess is that Telerik is doing something that is confusing the MapBox rendering code about the actual size of the div. And that when the window resizes, MapBox re-evaluates things, and gets it right.
I've been playing around with this for a couple of hours now, and getting nowhere:
I've tried triggering a resize event in code, and the tiles didn't draw.
I've tried placing the map in a fixed-size div, inside the pane, and the map drew to the edges, and then the div sat inside the pane with scrollbars, which confirms, to me, that I'm dealing with a sizing issue, but I can't have the scrollbars, so
I've tried setting the width and height of the div to the size of the pane, in code, and that didn't trigger the map to draw the missing panes.
I'm running out of ideas.
Is there some event or function on the MapBox renderer that will cause it to redraw the way it does when the browser resizes?
Turns out the answer was pretty simple:
map.invalidateSize();
Edited - a few days layer
Turns out that only works in IE. In Chrome, invalidateSize() doesn't cause the map to properly resize itself.
so the map is being drawn in a pseudo-frame, which is probably throwing off the calculations for what's "visible"...
do you have a way of sharing the actual output HTML? like jsfiddle?
are there any console errors? maybe it's something as simple as you've met your quota for the map tile server...
try a different tile server?
Related
I'm using Azure Maps S0 in one of my side projects, and I'm trying to get it to render correctly. The example works fine, but I'm embedding the library as a widget in ThingWorx (side project).
Problem: The tile themselves render only in the upper left handside corner of my div, but the zoom control and the Microsoft logo render in the correct positions.
I can fix this if I resize the page: this action results in the tile occupying correctly all the div.
The constructor I'm using is this:
map = new atlas.Map(id, {
center: [-118.270293, 34.039737],
view: 'Auto',
showFeedbackLink: false,
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: redacted
}
});
I made sure that div it bounds to has the correct clientHeight (489) and clientWidth (960) before and after the constructor is initialized.
I have tried calling map.resize after calling the constructor, but I've seen no change.
Looks like a bug, but I am not 100% sure. Any ideas why this is not behaving as I expect?
If the page or map div is small and then grows to a larger size, its possible that the underlying HTML5 canvas/WebGL context isn't noticing the expansion (these generally do not grow automatically). If you know an expansion is going to occur, you can call map.resize() and it should recalculate the available area and modify the size of the canvas. The map does try and monitor this already but there isn't a great way to do this since there is no resize events on DOM elements in HTML/JavaScript.
I'm working on creating custom map tiles (.PNG) which I can show with ImageMapType from the Google Maps API range. In general, the tiles are shown fine and I get the tiles I want with no real problems.
However, an issue which I can not seem to solve at all, is a weird upwards push of the tiles at a single specific zoom level (9). My original tiles do have many gaps for the ocean in them, so I generate blank tiles to fill in the gaps by surrounding my original map tiles with transparent points in a grid.
For testing purposes, and to show you the exact issue, i've made the grid points visible, and quickly taken a snapshot of the upwards push during the transition phase. The top left of the dark region is where the corner was for the previous layer, and after zooming in, the top marked section is where the corner moved it.
After I go past this layer, into layer 10, the corner goes back down a level, to where it would have been if layer 9 wasnt so buggy.
Hope I've provided enough information and I'll be grateful of any advice.
For zoom problem keep one transparent div with z-index and then set map zoom on 9 also hide its zoom control from map By this no one can zoom your map and for tile problem I need its demo page for more information but with this answer i attached a url for your help with full tutorial just check it : https://developers.google.com/maps/documentation/javascript/v2/overlays#Custom_Map_Types
Gud luck
everyone. Recently, we have faced one problem about the speed of loading google map components on different broswer. Regarding to the function , we have added 120 polygons, 360 sector ( also polygon ) and several attributes which attach to components on the map. The verson of JS tool is Google Map Javascript V3.
Now, this module is running fast and smoothly on Chrome and Foxfire broswer. HOWEVER, terreble problem would occur on IE8 or IE9. The process about loading informations into map becomes very slow, also during the period of dragging or zooming the map, which can not be accepted by users.
So, is there any solution about acceleration in this situation ?
Thank you very much for any reply !
In my experience it's just IE being IE.
I would suggest scaling down the number of polygons you need to show at one time by using the map bounds as the criteria to filter by. You'll still end up running into issues if you let the users zoom out to show the whole map so you may want to limit zoom levels as well.
If you take all the points that make up your polygon and push(extend) them to a LatLngBounds you can grab the bounding box and check to see if the center of that bounding box is in the map's current bounds.
Basically what I am trying to do is find a way to load ONLY one image/tile which will fill the viewport and not have any surrounding tiles loaded. It appears this is the methodology the good folks at Weather Underground are doing w/their Wundermap.
I've tried digging through their code but to no avail. I tried simply using larger tiles - larger than the actual viewport - but this has several adverse side effects. There was a similar question asked in WMS as a single tile image in Google Maps v3 but that was more about just using larger tiles than using a single tile.
Thanks in advance.
UPDATE:
Here is a link to a page/map on their site that loads a single tile/image that spans the entire viewport:
http://wxug.us/o4ia
If you have the Net tab open in firebug you can see that there is a single tile request. Also, if you keep it open and pan the map - while keeping the mouse down - the data does not fill in until you release the mouse. For all the tiled maps I have seen, as soon as you pan, it starts filling in new tiles.
They're using a custom overlay. You'll need to set up a server-side way of serving out your own image overlays to display on Google Maps, based on the viewport (presuming you want to serve 1 image that displays over the entire viewport). http://goo.gl/zgEKB
In November 2010 I modified a minecraft-world-map-site for showing huge panorama photos.
My solution for markers worked in November 2010. But now some markers are no more clickable.
Example with JavaScript code inside:
http://dl.dropbox.com/u/6059427/panorama/beispiel/index.html
The markers on the right side of the photo are not clickable.
I have made a test with Firefox 3.6 and Firebug for exploring this map. There are html-canvas-elements with a fix size of 256x256 pixels. Markers on the right outside of this canvas element are not clickable. Markers on the border of this canvas element have the unexpected property, that only the left half of the marker is clickable, but not the right half.
A single tile is not a perfect square: width 337px, height 323px. I use this rectangle size for displaying broad, expanded panorama photos with a quad tree data structure.
I have tried a lot of solutions/improvements - unfortunately without any success.
What is my mistake? How can I resize this html-canvas-element?
Any help would be appreciated. Thank you. - Bye. Georg
since the you claim that the code worked in November, you can try to set an older version (e.g. 3.2) of the maps api. It might fix it. For versioning see: http://code.google.com/apis/maps/documentation/javascript/basics.html#Versioning