# \[Kibana/Vega\] "inveted" EMS vector maps in Vega

**URL:** <https://discuss.elastic.co/t/kibana-vega-inveted-ems-vector-maps-in-vega/285825>\
**Category:** Kibana\
**Tags:** vega, maps\
**Created:** [October 4, 2021, 2:06pm UTC](https://discuss.elastic.co/t/kibana-vega-inveted-ems-vector-maps-in-vega/285825 "2021-10-04T14:06:44Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kayak007](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/kayak007/32/147597_2.png) [@Kayak007](https://discuss.elastic.co/u/Kayak007)\
**Post date:** [October 4, 2021, 2:06pm UTC](https://discuss.elastic.co/t/kibana-vega-inveted-ems-vector-maps-in-vega/285825/1 "2021-10-04T14:06:44Z")

</div>

Hi,

I'm trying to use EMS vector maps in Vega.  
I manage to retrieve the data and map it with the following bits of code:

```auto
[...]
{name:"franceDept" 
   url:{
      %type%:"emsfile"
      name:"France Departments"
   }
   format:{property:"features",feature:"geometry"}	
}

[...]

marks:[
    {
       type:"shape"
       "from":{"data":"dataDept"}
          "encode":{
             "update":{
                "strokeWidth":{"value":0.5}
                "stroke":{"value":"#000000"}
             }
             "hover":{"strokeWidth": {"value": 100},
                "stroke": {"value": "red"},
                "zindex": {"value": 1}
              }
          }
          "transform":[
             {"type":"geoshape","projection":"projection"}
          ]
   }
]

```

But when I try to fill each individual shape with a color, it seems that it's the outside of the shape that's filled.

Found this post [here](https://github.com/nyurik/kibana-vega-vis/issues/80) which points to a winding order problem.

Is there a way to solve this?  
Tried modifyng the coordinates array of the dataset with the _reverse_ expression, but no luck...

Thanks.

Regards.

---

<div class="post-metadata">

**Author:** ![Nathan\_Reese](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nathan_reese/32/84829_2.png) [@Nathan\_Reese](https://discuss.elastic.co/u/Nathan_Reese)\
**Post date:** [October 5, 2021, 1:43am UTC](https://discuss.elastic.co/t/kibana-vega-inveted-ems-vector-maps-in-vega/285825/2 "2021-10-05T01:43:56Z")

</div>

What version of Kibana are you using? Have you tried using [Maps](https://www.elastic.co/guide/en/kibana/current/maps.html)?

---

<div class="post-metadata">

**Author:** ![Kayak007](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/kayak007/32/147597_2.png) [@Kayak007](https://discuss.elastic.co/u/Kayak007)\
**Post date:** [October 5, 2021, 8:01am UTC](https://discuss.elastic.co/t/kibana-vega-inveted-ems-vector-maps-in-vega/285825/3 "2021-10-05T08:01:31Z")

</div>

Hi,

Sorry forgot that.  
We're using Kibana 7.13.2.

Yes, we're using Maps. But also Vega for more specific visualizations that we couldn't manage with Maps.

I'm trying to find ways in Vega to get around a zoom level bug that I reported previously ([here](https://discuss.elastic.co/t/vega-map-zoom-levels-limited-to-0-10-when-using-base-map-layer/284691/4)).

Would be much easier if I could install a third-party Tile Map Service or have access to topojson files outside of Kibana until the bug is corrected, but our IT is not very responsive for this kind of things.  
And our next Kibana upgrade will be here in quite a long time...

So I'm trying to use vector maps from the EMS and not the base map ( _ **mapStyle: true** _) to have normal zoom levels.

Regards,

---

<div class="post-metadata">

**Author:** ![Nathan\_Reese](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nathan_reese/32/84829_2.png) [@Nathan\_Reese](https://discuss.elastic.co/u/Nathan_Reese)\
**Post date:** [October 6, 2021, 5:56pm UTC](https://discuss.elastic.co/t/kibana-vega-inveted-ems-vector-maps-in-vega/285825/4 "2021-10-06T17:56:18Z")

</div>

> [@Kayak007](#):
>
> But when I try to fill each individual shape with a color, it seems that it's the outside of the shape that's filled.

Try setting `fill` to color the interior of shapes.

---

<div class="post-metadata">

**Author:** ![Kayak007](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/kayak007/32/147597_2.png) [@Kayak007](https://discuss.elastic.co/u/Kayak007)\
**Post date:** [October 6, 2021, 8:00pm UTC](https://discuss.elastic.co/t/kibana-vega-inveted-ems-vector-maps-in-vega/285825/5 "2021-10-06T20:00:53Z")

</div>

That's what I did.  
Thing is it colors the area outside of the shape...

---

<div class="post-metadata">

**Author:** ![nickpeihl](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nickpeihl/32/112622_2.png) [@nickpeihl](https://discuss.elastic.co/u/nickpeihl)\
**Post date:** [October 26, 2021, 12:07am UTC](https://discuss.elastic.co/t/kibana-vega-inveted-ems-vector-maps-in-vega/285825/6 "2021-10-26T00:07:00Z")

</div>

Hi @Kayak007. I've been looking into this and it looks like the winding order of the coordinates in the France Departments layer is incompatible with Vega. [Here's an issue for you to follow](https://github.com/elastic/ems-file-service/issues/231).

---

<div class="post-metadata">

**Author:** ![Kayak007](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/kayak007/32/147597_2.png) [@Kayak007](https://discuss.elastic.co/u/Kayak007)\
**Post date:** [October 26, 2021, 5:54am UTC](https://discuss.elastic.co/t/kibana-vega-inveted-ems-vector-maps-in-vega/285825/7 "2021-10-26T05:54:49Z")

</div>

Hi,

Thanks for the support.

Regards.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [November 23, 2021, 5:55am UTC](https://discuss.elastic.co/t/kibana-vega-inveted-ems-vector-maps-in-vega/285825/8 "2021-11-23T05:55:07Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.