# picking problems between 3dTiles and GeoJson

**URL:** <https://community.cesium.com/t/picking-problems-between-3dtiles-and-geojson/6979>\
**Category:** CesiumJS\
**Created:** [June 4, 2018, 11:37am UTC](https://community.cesium.com/t/picking-problems-between-3dtiles-and-geojson/6979 "2018-06-04T11:37:09Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![pol\_carrera\_balsells](https://avatars.discourse-cdn.com/v4/letter/p/b38774/32.png) [@pol\_carrera\_balsells](https://community.cesium.com/u/pol_carrera_balsells)\
**Post date:** [June 4, 2018, 11:37am UTC](https://community.cesium.com/t/picking-problems-between-3dtiles-and-geojson/6979/1 "2018-06-04T11:37:09Z")

</div>

**1. A concise explanation of the problem you’re experiencing.**

Hello everyone. I have a couple of problems with geoJson. The first is that once charged, depending on the zoom level they look bad. I use the ellipsoid WGS84, without elevations. (PHOTO 1)  
The other problem I have is the issue of picking. I have the option to click on the 3d tiles (buildings) and Infobox opens with the information. When I step over the buildings with the mouse without clicking, I get the cadastral reference. The problem comes when (through buttons) I load everything, geoJson and 3dTiles. The error console sends me the following message i the cadastral reference -REFCAD- appears on the geoJson, when it would only have to appear when hovering over the buildings. Here is the code:

**2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.**

var extent = Cesium.Rectangle.fromDegrees(2.200423178619758, 41.427599, 2.210423178619758, 41.417599); Cesium.Camera.DEFAULT\_VIEW\_RECTANGLE = extent; Cesium.Camera.DEFAULT\_VIEW\_FACTOR = 0; //var terrain = Cesium.createDefaultTerrainProviderViewModels(); var viewer = new Cesium.Viewer('cesiumContainer', { mapProjection : new Cesium.WebMercatorProjection(), timeline: false, animation: false, baseLayerPicker: true, scene3DOnly: true, //terrainProviderViewModels: terrain, //selectedTerrainProviderViewModel: terrain[1] //shadows:true }); var edificis = new Cesium.Cesium3DTileset({ url: '../SampleData/model\_bo/tileset.json' }); tileset = viewer.scene.primitives.add(edificis); edificis.show=false; var initialPosition = Cesium.Cartesian3.fromDegrees (2.200423178619758, 41.417599, 1000); var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(21.27879878293835, -21.34390550872461, 0.0716951918898415); viewer.scene.camera.setView({ destination: initialPosition, orientation: initialOrientation, endTransform: Cesium.Matrix4.IDENTITY }); var projectes = new Cesium.GeoJsonDataSource(); projectes.load('../SampleData/projectes/treballs.geojson',{ stroke: Cesium.Color.BLACK, strokeWidth: 50, markerSymbol: '?', allowPicking: false }); var ambit = new Cesium.GeoJsonDataSource(); ambit.load('../SampleData/ambit5.json',{ stroke: Cesium.Color.BLUE, fill:Cesium.Color.GREEN.withAlpha(0.1), strokeWidth: 50, markerSymbol: '?', allowPicking: false }); Cesium.GeoJsonDataSource.clampToGround = true; viewer.scene.globe.depthTestAgainstTerrain = true; viewer.scene.enableCollisionDetection = false; var botoambit = document.getElementById('showCheckbox'); botoambit.addEventListener('change', function() { if (botoambit.checked) { // Show if not shown. if (!viewer.dataSources.contains(ambit)) { viewer.dataSources.add(ambit); } } else { if (viewer.dataSources.contains(ambit)) { viewer.dataSources.remove(ambit); } } }, false); var botoedificis = document.getElementById('showCheckbox1'); botoedificis.addEventListener('change', function() { if (botoedificis.checked) { // Show if not shown. if (!viewer.dataSources.contains(edificis)) { edificis.show=true; } } else { edificis.show=false; } }, false); var botoprojectes = document.getElementById('showCheckbox2'); botoprojectes.addEventListener('change', function() { if (botoprojectes.checked) { // Show if not shown. if (!viewer.dataSources.contains(projectes)) { viewer.dataSources.add(projectes); } } else { if (viewer.dataSources.contains(projectes)) { viewer.dataSources.remove(projectes); } } }, false); var nameOverlay = document.createElement('div'); viewer.container.appendChild(nameOverlay); nameOverlay.className = 'backdrop'; nameOverlay.style.display = 'none'; nameOverlay.style.position = 'absolute'; nameOverlay.style.bottom = '0'; nameOverlay.style.left = '0'; nameOverlay.style['pointer-events'] = 'none'; nameOverlay.style.padding = '4px'; nameOverlay.style.backgroundColor = 'white'; // Information about the currently selected feature var selected = { feature: undefined, originalColor: new Cesium.Color() }; // Information about the currently highlighted feature var highlighted = { feature: undefined, originalColor: new Cesium.Color() }; // An entity object which will hold info about the currently selected feature for infobox display var selectedEntity = new Cesium.Entity(); // Color a feature yellow on hover. viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) { // If a feature was previously highlighted, undo the highlight if (Cesium.defined(highlighted.feature)) { highlighted.feature.color = highlighted.originalColor; highlighted.feature = undefined; } // Pick a new feature var pickedFeature = viewer.scene.pick(movement.endPosition); if (!Cesium.defined(pickedFeature)) { nameOverlay.style.display = 'none'; return; } // A feature was picked, so show it's overlay content nameOverlay.style.display = 'block'; nameOverlay.style.bottom = viewer.canvas.clientHeight - movement.endPosition.y + 'px'; nameOverlay.style.left = movement.endPosition.x + 'px'; var name = pickedFeature.getProperty('REFCAT'); if (!Cesium.defined(name)) { name = pickedFeature.getProperty('id'); } nameOverlay.textContent = name; // Highlight the feature if it's not already selected. if (pickedFeature !== selected.feature) { highlighted.feature = pickedFeature; Cesium.Color.clone(pickedFeature.color, highlighted.originalColor); pickedFeature.color = Cesium.Color.YELLOW; } }, Cesium.ScreenSpaceEventType.MOUSE\_MOVE); // Color a feature on selection and show metadata in the InfoBox. var clickHandler = viewer.screenSpaceEventHandler.getInputAction(Cesium.ScreenSpaceEventType.LEFT\_CLICK); viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) { // If a feature was previously selected, undo the highlight if (Cesium.defined(selected.feature)) { selected.feature.color = selected.originalColor; selected.feature = undefined; } // Pick a new feature var pickedFeature = viewer.scene.pick(movement.position); if (!Cesium.defined(pickedFeature)) { clickHandler(movement); return; } // Select the feature if it's not already selected if (selected.feature === pickedFeature) { return; } selected.feature = pickedFeature; // Save the selected feature's original color if (pickedFeature === highlighted.feature) { Cesium.Color.clone(highlighted.originalColor, selected.originalColor); highlighted.feature = undefined; } else { Cesium.Color.clone(pickedFeature.color, selected.originalColor); } // Highlight newly selected feature pickedFeature.color = Cesium.Color.LIME; // Set feature infobox description var featureName = pickedFeature.getProperty('REFCAT'); selectedEntity.name = featureName; selectedEntity.description = 'Loading 

'; viewer.selectedEntity = selectedEntity; selectedEntity.description = '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '

| PLAN | ' + pickedFeature.getProperty('PLAN\_') + ' |
| DESCRIPCIO | ' + pickedFeature.getProperty('DESCRIP\_12') + ' |
| PARCELA | ' + pickedFeature.getProperty('PARCELA') + ' |
| AREA | ' + pickedFeature.getProperty('AREA') + ' |
| CODI INE | ' + pickedFeature.getProperty('CODI\_INE') + ' |
| COORX | ' + pickedFeature.getProperty('COORX') + ' |
| COORY | ' + pickedFeature.getProperty('COORY') + ' |
| DELEGACIO | ' + pickedFeature.getProperty('DELEGACIO') + ' |
| DATAALTA | ' + pickedFeature.getProperty('FECHAALTA') + ' |
| MASSA | ' + pickedFeature.getProperty('MASA') + ' |
| NOM\_MUNICIPI | ' + pickedFeature.getProperty('NOMMUNI\_1') + ' |
| NORMATIVA | ' + pickedFeature.getProperty('NORMATIV') + ' |
| NUMERO | ' + pickedFeature.getProperty('NUMERO') + ' |
| PGM | ' + pickedFeature.getProperty('PGM') + ' |
| VIA | ' + pickedFeature.getProperty('VIA') + ' |
| ZMAX | ' + pickedFeature.getProperty('Z\_Max') + ' |
| ZMIN | ' + pickedFeature.getProperty('Z\_Min') + ' |

'; }, Cesium.ScreenSpaceEventType.LEFT\_CLICK); tileset.style = new Cesium.Cesium3DTileStyle({ color : { conditions : [["(${DESCRIP\_12}) === 'Zona industrial'","rgb(250,0,0)"] , ["String(${DESCRIP\_12}) === 'Densificacio Urbana Semiintensiva'","rgb(250, 100, 0)"] , ["String(${DESCRIP\_12}) === 'Equipaments comunitaris i dotacions'","rgb(66, 8, 181)"] , ["String(${DESCRIP\_12}) === 'Equipaments en Ordenacio en volumetria especifica'","rgb(66, 135, 181)"] , ["String(${DESCRIP\_12}) === 'Ordenacio'","rgb(155, 135, 181)"] , ["String(${DESCRIP\_12}) === 'Ordenacio en volumetria especifica'","rgb(155, 100, 118)"] , ["String(${DESCRIP\_12}) === 'Ordenacio en volumetria especifica en centre direccional'","rgb(155, 100, 75)"] , ["String(${DESCRIP\_12}) === 'Ordenaciol en filera'","rgb(155, 109, 9)"] , ["String(${DESCRIP\_12}) === 'Parcs i jardins urbans'","rgb(156, 204, 43)"] , ["String(${DESCRIP\_12}) === 'Proteccia de sistemes generals'","rgb(110, 129, 140)"] , ["String(${DESCRIP\_12}) === 'Renovacia urbana: transformacio'","rgb(188, 251, 41)"] , ["String(${DESCRIP\_12}) === 'Sistema de serveis tecnics'","rgb(15, 75, 41)"] , ["String(${DESCRIP\_12}) === 'Sistema ferroviari'","rgb(222, 75, 181)"] , ["String(${DESCRIP\_12}) === 'Sistema portuari'","rgb(15, 75, 181)"] , ["String(${DESCRIP\_12}) === 'Sistema portuari - Zona maritimo-terrestre'","rgb(1, 216, 255)"] , ["String(${DESCRIP\_12}) === 'Sistema viari basic'","rgb(189, 216, 255)"] , ["true", 'color("white")'] ] } /\*color : { conditions : [["Number(${MUNICIPIO}) = 245", "rgb(250,0,0)"] ] }\*/ });

---

<div class="post-metadata">

**Author:** ![pol\_carrera\_balsells](https://avatars.discourse-cdn.com/v4/letter/p/b38774/32.png) [@pol\_carrera\_balsells](https://community.cesium.com/u/pol_carrera_balsells)\
**Post date:** [June 4, 2018, 11:43am UTC](https://community.cesium.com/t/picking-problems-between-3dtiles-and-geojson/6979/2 "2018-06-04T11:43:00Z")

</div>

> ```auto
> Ouch! I forgot to attach photos!
> 
> ```

 ![mouse_over_buildings.jpg](https://global.discourse-cdn.com/cesium/original/2X/5/5e90595c31516c392a7bfdc518bc10217a270799.jpeg)

 ![error.jpg](https://global.discourse-cdn.com/cesium/original/2X/4/44da6eb60ec387b7222bce12a09762f1a61c1dd7.jpeg)

---

<div class="post-metadata">

**Author:** ![pol\_carrera\_balsells](https://avatars.discourse-cdn.com/v4/letter/p/b38774/32.png) [@pol\_carrera\_balsells](https://community.cesium.com/u/pol_carrera_balsells)\
**Post date:** [June 4, 2018, 12:01pm UTC](https://community.cesium.com/t/picking-problems-between-3dtiles-and-geojson/6979/3 "2018-06-04T12:01:34Z")

</div>

the first 2 photos show the picking problem and the next two show the bad  
visualization of the geoJson

 ![badview.jpg](https://global.discourse-cdn.com/cesium/original/2X/1/15ce9fc1a72dee1780d99eec6275ebd47a450b69.jpeg)

 ![goodview.jpg](https://global.discourse-cdn.com/cesium/original/2X/b/bb58c088733674e5579066d1186d1ac96e1a31fe.jpeg)

---

<div class="post-metadata">

**Author:** ![Gabby\_Getz](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/gabby_getz/32/7838_2.png) [@Gabby\_Getz](https://community.cesium.com/u/Gabby_Getz)\
**Post date:** [June 6, 2018, 2:16pm UTC](https://community.cesium.com/t/picking-problems-between-3dtiles-and-geojson/6979/4 "2018-06-06T14:16:22Z")

</div>

Hey Pol,

Careful- [**scene.pick**](https://cesiumjs.org/Cesium/Build/Documentation/Scene.html?classFilter=scene#pick) returns an object that is not necessarily an entity that you can use the **getProperty** method on.

For your GeoJSON, try passing the clampToGround : true option when you load it into Cesium. That should resolve the issues with terrain showing through.

Thanks,

Gabby