nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

How to Keep Circles the Same Size and Not Warped No Matter Where they Appear on the Map

AJThomas

I have json data and I want to use the radius of a circle to display a quantitative/proportional value.

What I am seeing is that even though every circle I am displaying has the 'same' radius, the size of the circle changes depending on where the circle appears on the map. Is there a different type of 'radius unit' or a property other than 'geodesic' I can use to keep my circles consistent no matter where they appear on the map?

Thanks for your help, ~AJ

var circle = new Circle(point, {

radius: 500,

radiusUnit: esri.Units.MILES,

geodesic: true

});

StormCenter-Circle-Problem.png

feranmi-ypn-blog-headshot-800px.jpg

Find more posts tagged with

Accepted answers

Tim_McGinnes

Well you asked for circles of radius 500 miles, and that's exactly what it did. The problem is that the web mercator projection (used as the default by pretty much everyone) distorts areas the further away from the equator. In reality Greenland is not the bigger than the USA:

What you need to do is change the projection or basemap ito an equal area projection, that means the countries will be distorted, but polygons of equal area will be accurate.

There are demonstrations of how to solve this issue via the Javascript API in this YouTube video: Use Anything Other than Web Mercator!

John Nelson has also published some equal area basemaps, here's a global one: Equal Earth Global Vector Basemap

See this blog post for info on how they were created: Here Are Some Equal Area Projected Maps for ArcGIS Online (and how to make them)

All comments

Tim_McGinnes

If you make your features and layer use the Web Mercator coordinate system, then do planar proportionate symbols in metres then it should work. So project your points to Web Mercator first.

Blue is WGS84 (in latitude & longitude) with buffer of 800,000 metres (approx 500 miles) and red is WGS 1984 Web Mercator (auxiliary sphere) (in metres) with same buffer.

But just be aware that if you are using actual values to size the points differently to each other, this map will not be accurate away from the equator.

AJThomas

Hi Tim, Thanks for the response. I was hoping there was a radius unit of
pixels or something. I'm not sure how easy it will be to change the base
map in our app. I'm just adding a layer.

I thought maybe a Feature layer would work with Proportional symbols but it
is not as straightforward as making a circle with my data. Any thoughts?

Thanks again for your help.
~AJ

Tim_McGinnes

What you need to do is change the projection or basemap ito an equal area projection, that means the countries will be distorted, but polygons of equal area will be accurate.

There are demonstrations of how to solve this issue via the Javascript API in this YouTube video: Use Anything Other than Web Mercator!

John Nelson has also published some equal area basemaps, here's a global one: Equal Earth Global Vector Basemap

See this blog post for info on how they were created: Here Are Some Equal Area Projected Maps for ArcGIS Online (and how to make them)

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.