StreetMap | Import OpenStreetMap data into Unreal Engine | Map library

Looking at the console when I switch to the satellite style, I see this:

Image "information" could not be loaded. Please make sure you have added the image with map.addImage() or a "sprite" property in your style. You can provide missing images by listening for the "styleimagemissing" map event.

This is referring to map.addSource('places', ...) where you set "icon": "information"

Using the styles API, you can check for the different sprites your styles have: https://docs.mapbox.com/api/maps/#retrieve-a-sprite-image-or-json

you can see in the sprites for your first style that you have a sprite called "information".

this is missing from your satellite style

in your JSFiddle, I swapped all references of "information" to "information-15" (a sprite that exists in both styles), and changed the icon-size to 1 in your addLayer and was able to switch between the styles and have the icons appear in both

Just use a different tile provider (check here for Esri.WorldShadedRelief) and use also the example on one of leaflet' s tutorials to change the tile providers using a L.control. Here is how it looks like in vanilla leaflet since I do not know how you have structured your angularjs project but I am pretty sure it can be adjusted easily.

The layers you add to the array bound to [leafletLayers] should get checked/selected in the layers control. The demo code has a more complicated example of this.

Here is a simpler version in which the circle and polygon are initially checked:

You have mixed CRS, so one of your data frames needs to be reprojected to match the other. As you LineString gdf is projected, I would use that CRS.

Leaflet is very sensitive to changes to page layout and sizing. Generally, when the page layout changes you need to call Map.invalidateSize().

ngx-leaflet automatically tracks window resize events and calls invalidateSize() for you, so you don't usually have to worry about it. But, when you're using something like Bootstrap or JQuery to manipulate the page layout independently of resizing the window, you may need to manually call it.

First, grab a reference to the Map using the instructions in the README: https://github.com/Asymmetrik/ngx-leaflet#getting-a-reference-to-the-map

I think the issue comes from trying to change the map view (possibly through openPopup with autoPan, which is on by default) too often, typically in a loop without giving any delay for the map to actually set the view between each call.

IIRC, this is already identified as a limitation in Leaflet, but I could not find the exact thread in the issue tracker unfortunately.

Normally, a very simple fix is simply to remove the map view changes within your loop, and keep only the very last one.

In your case, if you have the default behaviour of only 1 Popup being opened at a time, then that would definitely be a valid solution: just open the popup of your last Marker.

If you did configure your map to keep several Popups open simultaneously, and you do want to open all of them through your loop, then make sure to disable autoPan (at least during your loop).

Got it to work using

You can modify the background-image property of the following css selectors by setting your custom image:

The problem was the .addTo(map) after defining each marker - this should be removed and replaced with map.addLayer(pt1bMaker)