leaflet-map | Leaflet map as web component | Map library

I am developing a mobile application using Ionic and Angular. I have several Mapbox markers rendered on the map, each of it displaying a popop on click with custom content. I would like the button in the popup to redirect the user to the page that contains more details about that specific location. My code is the following:

I have this React code:

I'm learning javascript and trying to make a covid world map with Leaflet map. I followed this article and code below.

Adding data from URL to a leaflet map

I changed the API URL and variable to get the data for countries geojson. I can added colour in most countries but for some reason, for some countries after 230th countries on geojson, it doesn't work.

Could you advise what I should do to put colours for all countries?

I'm using this geo countries JSON below. If I use data with whole countries, the colours are not added on the map, but if I remove countries after Chad to Zimbabwe (it's the last 34 countries on JSON fil), the colour added on the map properly.

https://datahub.io/core/geo-countries

In continuation to my previous post where this was applied on map, I am trying to filter a table in R Shiny using Dropdown input: How to build dynamic Leaflet Map in RShiny?

Code:

Based on this example https://travisknocherstats.com/posts/2020-05-18-linked-dt-datatable-with-leaflet-map-in-r-shiny/ it is possible to link DT and leaflet. Selected rows on DT are ploted on leaflet. I've made some modifications to be able to have a map by default ~markers ploted in red, then when the user select a row on DT, the marker on leaflet is highligted in blue.It works fine so far. 1- However, when the row is unselected on the DT the blue highlight still shows. How to solve this problem. 2 - Using the action button ~ Clear table selections ~ remove all the markers blues and reds. However, I just would like to make the blue highlight disapear still keeping my red markers.

my code below with reproducible example. Thank you

I follow react leaflet installation and got the setup page . They provide me a code snippet to use to see a basic example. However here is what I got. Not sure which steps did I mess up.

I am creating a Leaflet-map, where I would like to move the marker by 1) drag and 2) mouse click. The coordinates of 'dragend' or mouse click are written to 'latitude' and 'longitude'. The drag is all well and good, but I am struggling with onclick.

The overall aim is to make the map more suitable for smart phone users.

Code: https://jsfiddle.net/oskjerv/pjgucx75

Docs: https://leafletjs.com/download.html

I have a problem with dynamic import in Next.js. It would be great if someone could give me an answer or some advice to do this in a different way.

The thing is that I have a component that renders a leaflet-map, this map have a pointer so I could click the map and have longitude and latitude, this is the code:

I am attempting to clear a leaflet map in react when fetching new data to map, and i am unsure how to approach this. I saw this post but not sure how exactly to apply it.

Right now I have a function that fetches 1 of 2 geojsons I have loaded.

App.js