Marker changes its position on zoom about angular-mapboxgl-directive HOT 12 CLOSED

HI @Mushaqdeen-J!

Thank you, can you provide me an example?

from angular-mapboxgl-directive.

http://demo.empower-erp.com:88/sms-screen/index.html#/details/5001
Please check this url and make it zoom in or out

from angular-mapboxgl-directive.

Hi @Mushaqdeen-J!

Well, I think the problem is marker object. In Mapbox GL, the (0, 0) point in a marker is top-left corner, not the center of the image. Then, when you create a marker, you have to do something like:

$scope.markers = [
   {
      coordinates: [lng, lat],
      element: DOMElement, // ex: div with image 30x30px
      options: {
         offset:[-15, -15] // this values are width/2 and height/2 of image dimensions
      }
   }
];

Tell me if it worked and if i can help you with something more!

P.D: Meybe you prefer to use glSources and glLayers directives!

from angular-mapboxgl-directive.

Hi @Mushaqdeen-J!

Did you solve the problem?

from angular-mapboxgl-directive.

Hi
options: { offset:[-15, -15] // this values are width/2 and height/2 of image dimensions }
fixed the problem, Now its working fine. Now I want to fit two markers in a view bound. Is there any directive to do that.

from angular-mapboxgl-directive.

Hi @Mushaqdeen-J!

I think that directive you are looking for is glMaxBounds, but I don't understand what you want to do.

from angular-mapboxgl-directive.

Oh sorry, what I want is I set my zoom as 12 and I placed two markers in my map but the two markers are not in my zoom level anyway I want to change my zoom level to fit the markers in my zoom level

from angular-mapboxgl-directive.

Well, I think if you use glMaxBounds directive, you can do it.

I hope I have helped you.

from angular-mapboxgl-directive.

Where can I have the documentation for this directive?
https://naimikan.github.io/angular-mapboxgl-directive/#/examples/simple_map
This is the link I am using for reference, but in this link there is no directive like gl-max-bounds

from angular-mapboxgl-directive.

Oh, sorry, I'm working on example page.

You can find here my (incomplete) wiki, or here for mapbox-gl example.

from angular-mapboxgl-directive.

No luck check the below link
http://demo.empower-erp.com:88/sms-screen/index.html#/details/5014

from angular-mapboxgl-directive.

Hi @Mushaqdeen-J!

Did you solve the problem? Maybe this example helps you.

from angular-mapboxgl-directive.