I am trying to add markers in a map using mapbox gl. I checked mapbox gl example but they have set of default icons predefined in there style. I want to add my custom markers and their styling. And I would be able add a click or hover event over the marker too.
Or can we add custom markers like we add in leaflet. just with the code and defining everything in the code.
I am integrating mapbox gl with react js (server side rendering). I am being stuck at showing the markers on the map.
Did anyone try this before? Thanks.
Mapbox Custom Marker
I even tried this example but could not work for me.
With Custom Image Marker
Related
I wanted to know if there is any other type of marker that comes with react leaflet apart from the default blue one. Also without uploading any icon image, how can I customize the existing marker icon? I have already tried to refer many online sources but everywhere it consists of uploading your own marker icon which I would not like to do in my project. Any help would be highly appreciated, thanks!
There is also the CircleMarker and... that is it.
The Circle Marker offers some style customization though.
Then you have plenty plugins, not sure how to use them with React Leaflet. But it might be not too difficult given that you just need to specify an icon prop on the Marker.
when I click on the map, map doesn't show the marker.
I couldn't understand why this example of React Leaflet doesn't work?
https://react-leaflet.js.org/docs/example-events/
This I am sure is easy but cannot find a simple example of it anywhere that works with React Leaflet.
Trying to simply have a button external to the map that pans and zooms the map to that point.
Assuming needs to be more React/Leaflet React specific to ones I have tried.
Fine with adding markers popups etc see example.
Hope someone out there has a small example of how to do it.
Thanks in advance.
how I want to add mapbox in <nb-card-body> in new pages i had created ?
I've already add html simple mapbox but nothing show on my mapsla page...
my component to add mapbox is mapsla and this project is based on ngx-admin starter-kit
mapsla.module.ts
mapsla.component.ts
mapsla.component.html
Project structure
screen shot Error in ngx-admin web browser , map not show
You cannot insert html tag into the nb-card-body as html is a container element for other elements. Since ngx-admin is built on top of Angular, try using corresponding library https://github.com/Wykks/ngx-mapbox-gl. Hope this helps.
I am using the ReactJS version of the CanvasJS library.
I have some charts laid out on the screen such that they take up close to 100% height and width on a mobile device.
When I place my fingers on the chart and drag (in order to scroll down the page), I am unable to scroll. This issue doesn't happen on other parts of the page where I don't have the chart.
Is there any way to get scrolling working properly when touching these charts on mobile?
Figured it out.
I had the CanvasJS component wrapped inside a div component.
This div component had the following CSS attributes applied to it:
overflow-y:auto;
overflow:scroll;
overflow-x:auto;
Once I removed those CSS attributes (which didn't need to be there in the first place) I was able to touch-drag on the chart component on mobile.