# Highlight Countries when hovering

**URL:** <https://community.cesium.com/t/highlight-countries-when-hovering/8397>\
**Category:** CesiumJS\
**Created:** [June 25, 2019, 5:03am UTC](https://community.cesium.com/t/highlight-countries-when-hovering/8397 "2019-06-25T05:03:53Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Megha\_Prajapati](https://avatars.discourse-cdn.com/v4/letter/m/67e7ee/32.png) [@Megha\_Prajapati](https://community.cesium.com/u/Megha_Prajapati)\
**Post date:** [June 25, 2019, 5:03am UTC](https://community.cesium.com/t/highlight-countries-when-hovering/8397/1 "2019-06-25T05:03:53Z")

</div>

Hi,

I am new to using cesium plugin.

I want to highlight the countries when hovering over it.

It would really appreciate if anyone guides me on how to achieve this in cesium plugin.

Thank You.

---

<div class="post-metadata">

**Author:** ![11119](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/11119/32/3476_2.png) [@11119](https://community.cesium.com/u/11119)\
**Post date:** [June 25, 2019, 7:01am UTC](https://community.cesium.com/t/highlight-countries-when-hovering/8397/2 "2019-06-25T07:01:39Z")

</div>

var viewer = new Cesium.Viewer(‘cesiumContainer’);

var geoJsonDatasource;

viewer.dataSources.add(Cesium.GeoJsonDataSource.load(’…/…/…/…/Apps/SampleData/ne\_10m\_us\_states.topojson’, {

stroke: Cesium.Color.HOTPINK,

fill: Cesium.Color.PINK.withAlpha(0.5),

strokeWidth: 3

})).then(function(dataSource){

viewer.zoomTo(dataSource);

geoJsonDatasource = dataSource;

console.log(viewer.dataSources);

});

var entityColorARR = {

entityid: undefined,

color: undefined

};

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

handler.setInputAction(function(movement) {

if (entityColorARR.entityid !== undefined) {

if (geoJsonDatasource.entities.getById(entityColorARR.entityid)) {

var entt =geoJsonDatasource.entities.getById(entityColorARR.entityid);

entt.polygon.material = entityColorARR.color;

}

}var pickedObject = viewer.scene.pick(movement.endPosition);

if (Cesium.defined(pickedObject)) {

var id = pickedObject.id.id;

if (geoJsonDatasource.entities.getById(id)) {

var ent = geoJsonDatasource.entities.getById(id);

entityColorARR.entityid = id;

entityColorARR.color = ent.polygon.material;

ent.polygon.material = Cesium.Color.WHITE;

}

} else{

entityColorARR.entityid = undefined;

entityColorARR.color = undefined;

}

}, Cesium.ScreenSpaceEventType.MOUSE\_MOVE);

See this link [https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/?src=Picking.html](https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/?src=Picking.html)

---

<div class="post-metadata">

**Author:** ![Megha\_Prajapati](https://avatars.discourse-cdn.com/v4/letter/m/67e7ee/32.png) [@Megha\_Prajapati](https://community.cesium.com/u/Megha_Prajapati)\
**Post date:** [June 25, 2019, 9:38am UTC](https://community.cesium.com/t/highlight-countries-when-hovering/8397/3 "2019-06-25T09:38:48Z")

</div>

Hi,  
Thanks for the solution.

I have achieved the same output using below code.

---

<div class="post-metadata">

**Author:** ![11119](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/11119/32/3476_2.png) [@11119](https://community.cesium.com/u/11119)\
**Post date:** [June 26, 2019, 4:50am UTC](https://community.cesium.com/t/highlight-countries-when-hovering/8397/4 "2019-06-26T04:50:47Z")

</div>

Hi, For highlighting all countries, it requires all countries geojson data. I have a data, but it will show countries outline in Cesium Viewer because it has MultiPolygon geometry in it. You can remove the MultiPolygon geometry and use that in Cesium (If you remove MultiPolygon geometry, some countries wiil be removed).

[countries.geojson](https://community.cesium.com/uploads/short-url/gg8Ksm9O1e5u6WgrQrsP9GrzThc.geojson) (250 KB)

---

<div class="post-metadata">

**Author:** ![JohnRDOrazio](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/johnrdorazio/32/4800_2.png) [@JohnRDOrazio](https://community.cesium.com/u/JohnRDOrazio)\
**Post date:** [May 22, 2021, 7:33am UTC](https://community.cesium.com/t/highlight-countries-when-hovering/8397/5 "2021-05-22T07:33:35Z")

</div>

I have succeeded in implementing a country highlight on hover using this attachment **countries.geojson**. I had to edit it a little bit to set height values to “0” and add a “tessellate” parameter to allow for terrain clamping.

However I see that it is not very detailed. It works fine when the globe is zoomed out enough, but when you start zooming in on any country (I’m using satellite imagery), you can see the borders of the countries don’t align with the satellite imagery layer.

Being new to all this, I’m experimenting ways of getting better results. I’m trying to use the files offered by [topojson/world-atlas](https://github.com/topojson/world-atlas), for example [countries-10m.json](https://cdn.jsdelivr.net/npm/world-atlas@2/countries-10m.json) .

I tried to convert the topojson file to a geojson file in order to switch it out with the **countries.geojson** (I believe I used [this online converter](https://mygeodata.cloud/converter/topojson-to-geojson)), I’m not getting results so far (I’m thinking maybe it’s too heavy and the application is crashing internally or something? or there’s some small error somewhere in the **countries-10m.geojson** file that I’ve produced, but if that’s the case then finding it will be fun, seeing how heavy the file is). Any chance anyone has a better detailed **countries.geojson**?