# colorByDistance use dynamic locations

**URL:** <https://community.cesium.com/t/colorbydistance-use-dynamic-locations/8238>\
**Category:** CesiumJS\
**Created:** [May 5, 2019, 9:57am UTC](https://community.cesium.com/t/colorbydistance-use-dynamic-locations/8238 "2019-05-05T09:57:18Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![cd.monalisa5](https://avatars.discourse-cdn.com/v4/letter/c/898d66/32.png) [@cd.monalisa5](https://community.cesium.com/u/cd.monalisa5)\
**Post date:** [May 5, 2019, 9:57am UTC](https://community.cesium.com/t/colorbydistance-use-dynamic-locations/8238/1 "2019-05-05T09:57:18Z")

</div>

1. A concise explanation of the problem you're experiencing.

I am new with cesium and I am trying to visualize 3D tiles using a location provided by a user but the code measures distance from a fixed latitude longitude (-1.291777521, 0.7105706624).  
I am not able to put a variable in place of these values.

2. A minimal code example. If you've found a bug, this helps us reproduce and repair it.  
// Color buildings by distance from a landmark.  
function colorByDistance() {  
&nbsp;&nbsp;&nbsp;&nbsp;tileset.style = new Cesium.Cesium3DTileStyle({  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;defines : {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;distance : "distance(vec2(\{longitude\}, {latitude}), vec2(-1.291777521, 0.7105706624))"  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color : {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;conditions : [  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;["\{distance\} &gt; 0\.0002&quot;, &quot;color\(&#39;gray&#39;\)&quot;\], &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\[&quot;true&quot;, &quot;mix\(color\(&#39;yellow&#39;\), color\(&#39;green&#39;\), {distance} / 0.0002)"]  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;&nbsp;&nbsp;});  
}

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

I want users to drop a geometry on the map and the map should visualize according to the distance from the central location and the size of the geometry .

4. The Cesium version you're using, your operating system and browser.

Cesium 1.57 with Google Chrome

---

<div class="post-metadata">

**Author:** ![omar](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/omar/32/1999_2.png) [@omar](https://community.cesium.com/u/omar)\
**Post date:** [May 15, 2019, 1:19pm UTC](https://community.cesium.com/t/colorbydistance-use-dynamic-locations/8238/2 "2019-05-15T13:19:59Z")

</div>

You can append your longitude/latitude to that string instead of using this fixed value. So instead of:

distance : “distance(vec2({longitude}, {latitude}), vec2(-1.291777521, 0.7105706624))”

``

You would have:

var longitude = -1.2;  
var latitude = 0.7;

// …

distance : “distance(vec2({longitude}, {latitude}), vec2(” + longitude + ", " + latitude + “))”

``

Let me know if that works for you!