[question] vl-overlay inside a vl-sytle-circle

[empereira]

Hello @ghettovoice,

I'm trying to open a popup when I click inside the circle, but I'm not getting it. Could you help me?

<vl-feature v-for="station in stations" :key="station.stationId">
      <vl-geom-point :coordinates="[station.long, station.lat]"></vl-geom-point>
      <vl-style-box>
        <vl-style-circle :radius="15">
          <vl-style-stroke :width="2" :color="[0, 0, 255]"></vl-style-stroke>
          <vl-style-fill :color="[36, 78, 255, 0.3]"></vl-style-fill>
                  <vl-overlay class="feature-popup" 
            :key="station.stationId"
            :id="station.stationId"
            :position="[station.long, station.lat]"
            :auto-pan="true"
            :auto-pan-animation="{ duration: 300 }">
            <template slot-scope="scope">
                Station station.stationId<br />
                station.stationName<br />
                station.stationUF<br />
                Position: {{ scope.position }}
            </template>
          </vl-overlay>
        </vl-style-circle>
      </vl-style-box>
 </vl-feature>

[become-iron]

Use vl-overlay in the root level of vl-map

[empereira]

@become-iron, thanks for the help!! That part I solve !!

A new question. Before I had a component like this:

<vl-layer-vector ref="featuresLayer">
        <vl-source-vector :features="filteredFeatures"></vl-source-vector>
        <vl-style-box>
          <vl-style-circle :radius="10">
            <vl-style-stroke :width="2" :color="[0, 0, 255]"></vl-style-stroke>
            <vl-style-fill :color="[36, 78, 255, 0.3]"></vl-style-fill>
          </vl-style-circle>
        </vl-style-box>
      </vl-layer-vector>

How can I configure the "radius" of a "vl-style-circle" with the json below?

layers: [
        {
          id: "circles",
          title: "stations",
          cmp: "vl-layer-vector",
          visible: false,
          source: {
            cmp: "vl-source-vector",
            staticFeatures: stations,
          },
          style: [
            {
              cmp: "vl-style-box",
              styles: {
                "vl-style-fill": {
                  color: [36, 78, 255, 0.3],
                },
                "vl-style-stroke": {
                  color: [0, 0, 255],
                  width: 2,
                },
              },
            },
          ],
        },
],

[become-iron]

Assuming that you use the next code (source)

<component v-if="layer.style" v-for="(style, i) in layer.style" :key="i" :is="style.cmp" v-bind="style">
  <component v-if="style.styles" v-for="(st, cmp) in style.styles" :key="cmp" :is="cmp" v-bind="st">
    <vl-style-fill v-if="st.fill" v-bind="st.fill"></vl-style-fill>
    <vl-style-stroke v-if="st.stroke" v-bind="st.stroke"></vl-style-stroke>
  </component>
</component>

It could be something like this:

{
  "style": [
    {
      "cmp": "vl-style-box",
      "styles": {
        "vl-style-circle": {
          "radius": 10,
          "fill": {
            "color": [36, 78, 255, 0.3]
          },
          "stroke": {
            "color": [0, 0, 255],
            "width": 2
          }
        }
      }
    }
  ]
}

[empereira]

Yes, I have the code, but with the changes, don't works.

As it was before, the circles appear, but they were more like dots. Now even that doesn't appear.

The json with the data is as follows:

[
  {
    "geometry": {
      "coordinates": [-54.1, -31.33],
      "type": "Circle"
    },
    "id": 18,
    "properties": {
      "stationId": "83980",
      "stationName": "BAGE - RS (OMM: 83980)",
      "stationUF": "RS",
      "status": 1
    },
    "type": "Feature"
  },
  {
    "geometry": {
      "coordinates": [-51.51, -29.15],
      "type": "Circle"
    },
    "id": 31,
    "properties": {
      "stationId": "83941",
      "stationName": "BENTO GONCALVES - RS (OMM: 83941)",
      "stationUF": "RS",
      "status": 1
    },
    "type": "Feature"
  },
]

[empereira]

Ok, I get it!!

Change the "type": "Circle" by "type": "Point" works!!!

Thansk for the help @become-iron !!!