# Image as material in polygon entity **URL:** \ **Category:** CesiumJS\ **Created:** [July 14, 2015, 6:53pm UTC](https://community.cesium.com/t/image-as-material-in-polygon-entity/2784 "2015-07-14T18:53:59Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![Jerrold\_Siegel](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/jerrold_siegel/32/3077_2.png) [@Jerrold\_Siegel](https://community.cesium.com/u/Jerrold_Siegel)\ **Post date:** [July 14, 2015, 6:53pm UTC](https://community.cesium.com/t/image-as-material-in-polygon-entity/2784/1 "2015-07-14T18:53:59Z")
I am trying to fill a polygon with an image. The following code runs without error but fills the polygon with white rather than the image. ---
**Author:** ![Matt\_Amato](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/matt_amato/32/1993_2.png) [@Matt\_Amato](https://community.cesium.com/u/Matt_Amato)\ **Post date:** [July 14, 2015, 7:01pm UTC](https://community.cesium.com/t/image-as-material-in-polygon-entity/2784/2 "2015-07-14T19:01:29Z")
You can just assign an entity material via a url directly: thebox.material = ‘…/…/SampleData/models1125/eastwestalley.jpg’; Or better yet, just add “material: thebox.material =’…/…/SampleData/models1125/eastwestalley.jpg’” as a constructor option like you have for the other parameters. I would recommend you check out the [Visualizing Spatial Data](https://cesiumjs.org/2015/02/02/Visualizing-Spatial-Data/) tutorial which covers this and a lot of other standard features of the Entity API. ---
**Author:** ![Jerrold\_Siegel](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/jerrold_siegel/32/3077_2.png) [@Jerrold\_Siegel](https://community.cesium.com/u/Jerrold_Siegel)\ **Post date:** [July 14, 2015, 7:52pm UTC](https://community.cesium.com/t/image-as-material-in-polygon-entity/2784/3 "2015-07-14T19:52:27Z")
> > That was easy That was easy. Much Thanks. I will definitely go though the tutorial as you suggest. ---
**Author:** ![Jerrold\_Siegel](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/jerrold_siegel/32/3077_2.png) [@Jerrold\_Siegel](https://community.cesium.com/u/Jerrold_Siegel)\ **Post date:** [July 15, 2015, 2:26pm UTC](https://community.cesium.com/t/image-as-material-in-polygon-entity/2784/4 "2015-07-15T14:26:31Z")
Hi, Another minor issue, It seems that the image is being drawn horizontally. Is there some way to draw it with bottom along the first side of the polygon? Thanks, ---
**Author:** ![Matt\_Amato](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/matt_amato/32/1993_2.png) [@Matt\_Amato](https://community.cesium.com/u/Matt_Amato)\ **Post date:** [July 15, 2015, 2:57pm UTC](https://community.cesium.com/t/image-as-material-in-polygon-entity/2784/5 "2015-07-15T14:57:46Z")
You can rotate the polygon using the stRotation property on PolygonGraphics. This rotation is counter-clockwise from north. If you want it to align with a specific edge, you should just be able to compute the angle of rotation based on the two points making up the edge you want to align with. I through together this quick and dirty example but the math is not completely correct (I’m still not completely awake :). Also keep in mind that at some point the curvature of the earth will probably come into play. var viewer = new Cesium.Viewer(‘cesiumContainer’); var entity = viewer.entities.add({ name : ‘Blue polygon with holes and outline’, polygon : { hierarchy : { positions : Cesium.Cartesian3.fromDegreesArray([-99.0, 39.0, -98.95, 38.95, -98.95, 39.0, -99.0, 39.0]) }, material : ‘…/images/checkerboard.png’ } }); var cartographicStart = Cesium.Cartographic.fromDegrees(-99.0, 39.0); var cartographicEnd = Cesium.Cartographic.fromDegrees(-98.95, 38.95); var deltaY = cartographicEnd.latitude - cartographicStart.latitude; var deltaX = cartographicEnd.longitude - cartographicStart.longitude; entity.polygon.stRotation = -Math.atan2(deltaY, deltaX); viewer.zoomTo(viewer.entities); Hope that helps. ---
**Author:** ![Jerrold\_Siegel](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/jerrold_siegel/32/3077_2.png) [@Jerrold\_Siegel](https://community.cesium.com/u/Jerrold_Siegel)\ **Post date:** [July 15, 2015, 5:24pm UTC](https://community.cesium.com/t/image-as-material-in-polygon-entity/2784/6 "2015-07-15T17:24:10Z")
Thanks again, I think the problem is sort of the reverse. We are porting some Google Earth stuff and are getting down to the last elements. The polygons in question are city blocks and in this case the specific image is the underlying street with an ally running down the middle. I attached an image of a GE view. We need the alley to run down the middle of the block. The geography of the block is fixed. I can rotate the street image on a block by block basis, but being able to align the street image with a side would make life much easier. ![analley.jpg](https://global.discourse-cdn.com/cesium/original/2X/2/25552e5fb71ee35efdda14f3860a947e32725c2f.jpeg) ---
**Author:** ![swapnil.k00](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/swapnil.k00/32/2920_2.png) [@swapnil.k00](https://community.cesium.com/u/swapnil.k00)\ **Post date:** [February 23, 2017, 12:32pm UTC](https://community.cesium.com/t/image-as-material-in-polygon-entity/2784/7 "2017-02-23T12:32:44Z")
I have the same issue, when I try to add image to polygon I see white, but not image. Below is simple code which I'm trying. Did I miss any syntax or do I've to set Repeat property somewhere? var greenPolygon = viewer.entities.add({     name : 'Green extruded polygon',     polygon : {         hierarchy : Cesium.Cartesian3.fromDegreesArray([-108.0, 42.0,                                                         -100.0, 42.0,                                                         -104.0, 40.0]),         extrudedHeight: 500000.0,         /\*material : Cesium.Color.GREEN,\*/     material : "[https://cesiumjs.org/Cesium/Build/Documentation/images/CesiumLogo.png](https://cesiumjs.org/Cesium/Build/Documentation/images/CesiumLogo.png)",         closeTop : false,         closeBottom : false     } }); ---
**Author:** ![hannah](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/hannah/32/4509_2.png) [@hannah](https://community.cesium.com/u/hannah)\ **Post date:** [February 23, 2017, 2:30pm UTC](https://community.cesium.com/t/image-as-material-in-polygon-entity/2784/8 "2017-02-23T14:30:41Z")
Hello, The image material is working properly for me with the code example you provided. For polygons, we extrude the texture down the wall of the polygon, so it may look differently than you expect. If you’re going to have both closeTop and closeBottom = false, you may want to consider using a wall instead: [http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Wall.html&label=Geometries](http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Wall.html&label=Geometries) The image will wrap around the sides of a wall. Best, Hannah ---
**Author:** ![swapnil.k00](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/swapnil.k00/32/2920_2.png) [@swapnil.k00](https://community.cesium.com/u/swapnil.k00)\ **Post date:** [February 23, 2017, 2:54pm UTC](https://community.cesium.com/t/image-as-material-in-polygon-entity/2784/9 "2017-02-23T14:54:52Z")
Thanks, I see screenshot as : [https://snag.gy/KJ6yqp.jpg](https://snag.gy/KJ6yqp.jpg) Is there anything by which we resize image on that polygon? I want to see that image on side of the polygon. I want to use polygon only. Any suggestions? ---
**Author:** ![hannah](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/hannah/32/4509_2.png) [@hannah](https://community.cesium.com/u/hannah)\ **Post date:** [February 23, 2017, 3:30pm UTC](https://community.cesium.com/t/image-as-material-in-polygon-entity/2784/10 "2017-02-23T15:30:32Z")
In order to achieve this for a polygon you will have to change the way the texture coordinates are computed. Using a Wall instead is the best solution here. -Hannah ---
**Author:** ![swapnil.k00](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/swapnil.k00/32/2920_2.png) [@swapnil.k00](https://community.cesium.com/u/swapnil.k00)\ **Post date:** [February 24, 2017, 8:12pm UTC](https://community.cesium.com/t/image-as-material-in-polygon-entity/2784/11 "2017-02-24T20:12:24Z")
Wall works well for Image material. Can we use youtube URL as material? ---
**Author:** ![hannah](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/hannah/32/4509_2.png) [@hannah](https://community.cesium.com/u/hannah)\ **Post date:** [February 27, 2017, 2:32pm UTC](https://community.cesium.com/t/image-as-material-in-polygon-entity/2784/12 "2017-02-27T14:32:12Z")
We do have support for video materials. See this example: [http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Video.html&label=Showcases](http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Video.html&label=Showcases) -Hannah ---
**Author:** ![Erik\_Hansen](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/erik_hansen/32/8710_2.png) [@Erik\_Hansen](https://community.cesium.com/u/Erik_Hansen)\ **Post date:** [June 15, 2022, 12:21pm UTC](https://community.cesium.com/t/image-as-material-in-polygon-entity/2784/13 "2022-06-15T12:21:57Z")
Hello, is there a way to do this but with GeoJsonDataSource polygon?