I am working on a project that makes use of a map engine from some private company that I can't mention here.
The system used to be in JQuery, and we recently made some considerable modifications, and the system is now implemented in AngularJS.
On the left side of the screen, we have a slidebar displaying items.
On the right side of the screen, we have the map.
My issue is that when I load the page, the map does not display properly, and the inside overlay is quite small. I have checked their sizes but they are correct.
However, when I resize the window manually, or open the Element Inspector from G. Chrome, the map then gets displayed completely.
I have attempted to redraw the clusterLayer, resize the map, resize the div of the map, but nothing seems to be working.
I found this post Google map does not display properly, it could have solved my problem, but I don't have any power on how the map gets loaded.
Thanks
I had a similar problem with ol3 in conjunction with angular. My workaround was to add:
$(document).ready(function () {map.updateSize()});
With map being my ol3 map object. In this case I did not use the openlayers directive from angular. Which, by the way, when used did not have the displaying problems.
Maybe that helps.
I've had somewhat a similar problem and none of the solutions provided worked for me. So I used timeOut function like this and it worked:
setTimeout(function() {
$scope.$apply(function(){
map.updateSize();
})
});
Related
I'm trying to use the HERE Maps Api in my website.
I'm making a Web Component/custom element for maps but I'm running into issues with the UI.
1.
in my code I have the lines
this.defaultLayers = this.platform.createDefaultLayers();
this.ui = Maps.ui.UI.createDefault(this.map, this.defaultLayers, 'de-DE');
but, no controls show up on the map, nothing
BUT, I do see a large plus for a second that then disappears.
2.I tried adding a bubble
var bubble = new Maps.ui.InfoBubble({ lng: 13.4, lat: 52.51 }, {
content: '<b>Hello World!</b>'
});
this.ui.addBubble(bubble);
well, the bubble made the plus not appear for a second but it also made a GIANT x on the map, an X which is supposed to be about 15x15 pixels.
I even tried doing this example, copied it from their website, it had the same sorts of UI problems.
I thought that maybe the problem is that I'm using the es6 module version instead of the standard version (that you add with script tags)
nope, using the standard version did not change anything.
here is a repo showing what I'm doing
the repo's readme file will tell you everything you need to know.
I'm trying to redraw the Vector Layer in OpenLayers (version 6.1.1, latest is 6.2.1) but any sort of documentation on it is OpenLayers 3. I've tried translating it myself, but either the redraw just isn't working properly or I'm writing the syntax incorrectly. Does anyone have any idea how to go about this?
I haven't been able to get the icons to even flicker to show that they're updating, never mind getting them to update as the database gets filled up. It's really important that I get the icons on my Vector Layer refreshing so anything and everything helps, thank you!
I think that refresh method of the source should do what you want. Give it a try.
OL API - Vector Source refresh
Credits to #viglino-jean-marc, as of ol v6.6.1 using refresh method of the vector source not working as intended, changed method is what do the job.
I am using Mapbox GL JS with a meteor+blaze application. When the user drags the map it starts blinking and sometimes it blinks even without dragging the map.
I have used meteor.autorun to insert the dynamic marker into map based on category selection.
Please guide me, how I can fix it.
It sounds like you may be describing https://github.com/mapbox/mapbox-gl-js/issues/5490, a GPU-specific bug that was patched in the most recent release (v0.42.1). Does your issue persist if you upgrade to that version?
I'm using Mapbox GL JS API to manipulate a Mapbox map. Right before I upload my result (which is a canvas.toDataURL) to the server through HTTP I need to resize my map (bigger resolution) and then use fitbounds to get back to the original points. After fit bounds fires, it takes the map a while to load all new tiles in. Only after this can I actually perform the upload. Right now though, I don't know if there's an event that's capable of telling me if all tiles are loaded.
I've tried all possible load functions and events in the API. There's a few issues on the GITHUB project but they're now at least a year old and there's been no update. Halfway through 2015 they started talking about adding an Idle event, but I can't seem to find any new documentation of it anywhere.
Has anyone found a way to make the code wait for the map to load? Or has any information regarding an update on this feature?
I doubt it matters much, but I'm working in an angular.js app.
We just added a Map#areTilesLoaded check which sounds like what you're looking for. That should go out in the next release (v0.37.0). In the meantime, the following should work.
map.on('sourcedata', (e)=> {
if (map.loaded()) {
// all tiles are loaded
// turn off sourcedata listener if its no longer needed
map.off('sourcedata');
}
});
I have built a simple map application with a single marker over my office. The marker drops in after the map is built. I would like to trigger a mouseover event after the marker is displayed but it never seems to work. To be clear, I want the default behavior of mouseover, which is to display a simple window with the marker title, to occur from code, not from mousing over the marker. This seems to be the opposite of most of the queries here.
I've tried this:
setTimeout("google.maps.event.trigger( marker, 'mouseover');alert(marker.title);",5000);
In this case the alert happens but the mouseover doesn't seem to. Without the alert there are no messages or errors, the trigger just gets swallowed.
Are there parameters for the mouseover event that I am missing? It doesn't seem so from the documentation, but I can imagine a whole bunch of missing info, primarily where the window should display and for how long.
I imagine that my approach is completely wrong, but according to my reading of the documentation it should work. An alternative of course is to create an InfoWindow like this:
iw = new google.maps.InfoWindow({position: LL, content: marker.title});
iw.open(map, marker);
which works, but the window is fairly ugly compared to what pops up during the mouseover.
Maybe another way of wording my question is HOW CAN I DISPLAY AN INFORMATION WINDOW THAT LOOKS JUST LIKE THE MOUSEOVER WINDOW?
thanks
You'll need to make your own overlay or there are a few which can get you close.
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html/
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/examples.html