Solved

How to set the size of a circle in the map component?

  • 16 September 2022
  • 5 replies
  • 76 views
J. de Lange
Rank
Userlevel 3
Badge +4

I’m trying to display a circle on the map component in the universal GUI (2022.2.13 b2.0) But nothing I do seems to alter the size of the circle. I’ve tried giving it two coordinates hoping that this would set the size but the circle remains the same.

 

{

        "CoordSets": [

               [

                       {

                               "Lon": "10.865400",

                               "Lat": "55.565922"

                       },

                       {

                               "Lon": "10.865400",

                               "Lat": "56.0150816223465"

                       }

               ]

        ]

}


The docs don’t ever seem to mention the circle geometric type for the map component. How is this supposed to work?

icon

Best answer by Erik Brink 16 September 2022, 17:24

View original
This topic has been closed for comments

5 replies

Erik Brink
Rank
Userlevel 5
Badge +5

Hi Jitse,

The radius of a circle is currently hard-coded set to 200. The coordinates are used for the center of the circle.

Maybe use some custom css to tweak it for now?

Kind regards, Erik

Erik Brink
Rank
Userlevel 5
Badge +5

Eventually the GUI should listen to something like this:

{
    "CoordSets": [
        [
            {
               "Lon": "10.865400",
               "Lat": "55.565922"
            }
        ]
    ],
    "Radius": 120
}

We will put this on our backlog.

Erik Brink
Rank
Userlevel 5
Badge +5

This will be possible in the upcoming Universal GUI release (2022.2.15)

J. de Lange
Rank
Userlevel 3
Badge +4

Just for future reference: what does the number set for radius represent? Pixels? Meters? Degrees longitude?

Erik Brink
Rank
Userlevel 5
Badge +5

Great question! 

The maps component uses leaflet as the maps-marker provider and due to their documentation it’s in Pixels.


https://leafletjs.com/reference.html#circlemarker-option

Terms & ConditionsCookie settings