We Keep Coding

Maps Api UI elements appear very large (larger then the map itself)

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.

MapBox event when all Tiles are loaded

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');
}
});

In Mapbox how can you toggle layers from a style on iOS?

I'm trying to toggle layers in iOS for MapBox but can't figure out how it's done. I've been looking at this example:
https://www.mapbox.com/mapbox.js/example/v1.0.0/layers/
But I can't figure out how to use this file with the map view in Xcode. Can anyone give me any info on how this is done? Or whether it's possible?
Just a bit of background on the setup, I have a mapview created and running fine. I then have numerous GPX trails which have been exported in to TileSets and added to a style as a layer. I have a layer called 'where_trail' which I want to toggle on and off with a button. Currently all the layers are drawing on the map, I just can't figure out how to access the layers and hide them. Can anyone offer me some guidance on this please?
Thanks

That example is for Mapbox.js and written in JavaScript: it's intended for use with our JavaScript framework, which, if you're in Swift, Objc, and Xcode, is not what you're using.
There isn't yet a full-fledged example of switching styles for the iOS framework, but the property to pay attention to is the styleURL - you can assign the value of that map property to a new NSURL, which you can get from Studio or from a default style. Wire this up to an action and it should do exactly what you're looking for.

Map displaying properly only on window change

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();
})
});

What language to use to create maps dynamically

I want to create a map dynamically and display it on the website. You can call it to be more of a graph than a map. Here I take the source and destination from the database. There can be many sources to a destination or many destinations for a source or both. Also there can be many other locations directed to/from source/destination. Source and Destination will always be there. But other locations are optional. So for example the route could be
L1 --> L2 --> Source --> Destination --> L3 --> L4.
where L1-L4 are locations (optional)
I want to depict this diagrammatically on a website. The user should be able to click on a each location/path (depicted as the arrow line above) and a popup should be opened. In the popup some data editing can take place. Also along the path(arrow line) some data has to be displayed. Basically all HTML,JS functionality should be available for this diagram.
Can someone please suggest me which language I can use for this?
I checked out some of the map APIs. But they expect some kind preloaded image to be present. That is not possible in my case.
The site I'm working on similar to any air fare info site, where we select multi city and get different rates for different airlines. I want to show this graphically with nodes representing locations and lines representing paths and should show rates along paths and stuff like that.
Any pointers will be appreciated.
Thanks

Some of your options are: SVG, HTML Canvas, or HTML+CSS. Given your desire to track events per object, I would rule out HTML Canvas: binding events to objects in a retained drawing system is much easier than manually processing events based on mouse position.
I would recommend using either SVG (if you can limit yourself to browsers that support it) or a drawing API like Raphaël to abstract support over SVG and VML for IE. You will have far more flexibility of drawing and hit detection than using HTML divs plus backgrounds.
Although I haven't used it, Google found the Joint library (that uses Raphaël) for a higher abstraction than the drawing level. Perhaps this meets your needs.

If I understand you correctly, it sounds like the google maps api would work for you:
You can find more info here. here
Additionally, you may find this info useful.