Latest Contributions by AndyGup

Okay, thanks for the repo. What's going on has to do with CSS precedence and specificity, as well as Angular component life-cycle and encapsulation, so it's a little tricky. The important difference between the Angular component and the Popup is that the ArcGIS API's Popup is not a member of your Angular component when the component is initialized. Popup pulls its CSS from the ArcGIS CDN assets which are loaded after the component's CSS, and by default are pulled from here https://js.arcgis.com/4.22/@arcgis/core/assets/esri/themes/light/main.css.  You can see this request in the developer console's Network tab. There are several ways to address this issue. You identified one of them - use a global CSS to override styles. You can also host the ArcGIS assets locally and create your own custom Sass-based theme. Here are a few links: Working with local assets Custom CSS with Sass Angular life-cycle hooks Angular component styles Did that help? ... View more

@mohammed_raufshaikh here's a snippet the will help you find the new point using latitude, longitude, bearing and radius (distance). That should at least get you started. Once you have the new point you can draw a polyline using the beginning and ending points. Here's a sample that demonstrates the concepts for creating a line (see item number 3 and 4): https://developers.arcgis.com/javascript/latest/sample-code/intro-graphics/.  function bearingDistance(lat, lon, radius, bearing){ let lat1Rads = toRad(lat); let lon1Rads = toRad(lon); const R_KM = 6371; // radius in KM let d = radius/R_KM; //angular distance on earth's surface let bearingRads = toRad(bearing); let lat2Rads = Math.asin( Math.sin(lat1Rads) * Math.cos(d) + Math.cos(lat1Rads) * Math.sin(d) * Math.cos(bearingRads) ); let lon2Rads = lon1Rads + Math.atan2( Math.sin(bearingRads) * Math.sin(d) * Math.cos(lat1Rads), Math.cos(d) - Math.sin(lat1Rads) * Math.sin(lat2Rads) ); return { latitude: toDeg(lat2Rads), longitude: toDeg(lon2Rads) } }   ... View more