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.
Related
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'm trying to build a leaflet JS map 0.7.7 with leaflet.shapefile plugin, this allows me to use zip files containing the shape files from esri and project these onto the map.
I'm having great difficulties ordering the various layers Z-indexes.
Here is my my test version (see updated info below) and code.
I have tried the following, but i cant get it to work:
Layer1.setZIndex(1); // Area Action Plan
Layer2.setZIndex(2); // Enterprise Zone
Layer3.setZIndex(3); // Local Development Order
Layer4.setZIndex(4); // Properties
I also tried
Layer1.bringToBack(); // Area Action Plan
Layer2.bringToBack(); // Enterprise Zone
Layer3.bringToBack(); // Local Development Order
Layer4.bringToFront(); // Properties
and even tried
m.on("overlayadd", function (event) {
Layer1.bringToBack(); // Area Action Plan
Layer2.bringToBack(); // Enterprise Zone
Layer3.bringToBack(); // Local Development Order
Layer4.bringToFront(); // Properties
});
Currently it's at random, not all polygons are clickable or seem to be behind a layer. When I manually turn Layer4 (properties) off and on again via the layer switch control (top right corner), it brings Layer4 to the top and i'm able to click on these areas (yellow), however when loading or reloading the map (pageload) it seem like it has a mind of it's own
My ideal solution would be that layer4 (properties) is always on top, over any of the other layers and able to click on these.
Here is a screenshot:
Could someone please help me or advice me on, what i'm doing wrong and how to resolve this issue. thank you.
** updated info: **
I have followed the recommendations made in the comments, no luck yet
Upgraded to version: 1.0.2
Created a pane for each layer and added it to their style like so:
m.createPane('Layer1');
m.getPane('Layer1').style.zIndex = 399;
// Added this to the layer style.
pane: 'Layer1'
Saved it as a new test page.
However the code is not displaying any layers anymore, they seem to appear for a split second and then disappeared again.
So I have a Ruby on Rails app that uses Leaflet JS to display a rather large map file overlaid with various layers of boxes, markers, paths, etc. However, if I load the map through IE 11, once I change zoom levels from the initial value everything is removed, the map stops loading, and I can no longer change zoom levels. I do not believe it is a problem with my code for several reasons, mainly the facts that:
Everything works in Firefox and Chrome
Map works on IE version 9
Code produces no error messages in console or anywhere else
So I have to admit I'm at a near-complete loss as to the cause of this error. I've pulled the latest stable leaflet release but it didn't change anything. I'm hoping someone has a suggestion that might help out.
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();
})
});