# GeoJSON layer highlight, mousenter, mousover

**URL:** <https://community.cesium.com/t/geojson-layer-highlight-mousenter-mousover/29237>\
**Category:** CesiumJS\
**Created:** [January 11, 2024, 9:14pm UTC](https://community.cesium.com/t/geojson-layer-highlight-mousenter-mousover/29237 "2024-01-11T21:14:11Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![JB.Data31](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/jb.data31/32/21431_2.png) [@JB.Data31](https://community.cesium.com/u/JB.Data31)\
**Post date:** [January 11, 2024, 9:14pm UTC](https://community.cesium.com/t/geojson-layer-highlight-mousenter-mousover/29237/1 "2024-01-11T21:14:11Z")

</div>

Hi,

I am looking to add a callback to a layer, on my map each colored area is made up of a GeoJSON layer. I would like to display information on each area=layer when the mouse passes over it, and the icing on the cake is that it works in 3D (image 00)…

 ![CS-00](https://global.discourse-cdn.com/cesium/original/3X/e/c/ec9388eb91ad016e8e63d48776ec5a4c45da5e9c.jpeg)

For this I am trying to develop a first test (image 01). I want to reproduce the 2D behavior, selection of each area when the mouse passes over it and display of text information (south sahara desert for example), in 3D.

 ![CS-01](https://global.discourse-cdn.com/cesium/original/3X/4/4/44caf03f02f23402c66eff9cd892f26557102d29.jpeg)

After research I found some things ([https://sandcastle.cesium.com/](https://sandcastle.cesium.com/), Mouse Hover Event, Color change hoover GeoJSON…) but it does not correspond to my GeoJSON layer case…  
Is there an example that matches what I want to do?  
Docs, pointers… are welcome.

---

<div class="post-metadata">

**Author:** ![s3xysteak](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/s3xysteak/32/19939_2.png) [@s3xysteak](https://community.cesium.com/u/s3xysteak)\
**Post date:** [January 16, 2024, 1:13pm UTC](https://community.cesium.com/t/geojson-layer-highlight-mousenter-mousover/29237/2 "2024-01-16T13:13:23Z")

</div>

Try [Cesium.ScreenSpaceEventHandler](https://cesium.com/learn/cesiumjs/ref-doc/ScreenSpaceEventHandler.html?classFilter=handler)

```auto
const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene)
handler.setInputAction( e => {
// ...
},Cesium.ScreenSpaceEventType.MOUSE_MOVE)

```

You can set a unique name for the dataSource, and use `viewer.dataSources.getByName(...)` and `viewer.dataSources.contains(...)` to compare with what you get in the callback.

---

<div class="post-metadata">

**Author:** ![JB.Data31](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/jb.data31/32/21431_2.png) [@JB.Data31](https://community.cesium.com/u/JB.Data31)\
**Post date:** [January 24, 2024, 7:13pm UTC](https://community.cesium.com/t/geojson-layer-highlight-mousenter-mousover/29237/4 "2024-01-24T19:13:44Z")

</div>

Thank you for this feedback

With a _canvas_ parameter the callback works.  
In my test I do not have a _DataSource_. I create my layer with a _Vector_.  
This is confirmed with _view.dataSources_ which is “empty”.  
Is there a way to find and work with a layer created without a DataSource

I’ve attached my test program, I’m still digging…

[test3\_OLCesium.zip](https://community.cesium.com/uploads/short-url/vh3WLpkWiI7IAMtfkcht49HNZZc.zip) (1.3 KB)