Can anyone tell me an HTML/CSS method of adding a radius to a map embed code that will put a circle around a central point on that map. For example, here is my store and I will deliver in this radius (20km for example) I know this can be done in Google maps, but is there a similar option in OSM?

asked 04 Jul, 17:00

Midrob's gravatar image

accept rate: 0%


There are a variety of tools used to display OpenStreetMap data on websites. If you could indicate which you intend to use this may help people respond to your query.

(04 Jul, 18:42) InsertUser

The intended use is to have the location of a business centred on a panel onsite, say 800px x 400px wide, and to then have a circle around that location, to a scale, say 20km/miles, and to have the circle with an opacity setting so you can see the map under it. This circle would enclose a delivery area. See how Google do something similar.

Can this be done in OSM ? A circle, not a polygon. Google suggestion on this

(05 Jul, 16:51) Midrob

You can use leafletJS to display the map and than use the following leaflet codeline adjusted to your needs:[lat,lng], radius).addTo(map);

See this for more:

permanent link

answered 05 Jul, 18:18

Spiekerooger's gravatar image

accept rate: 12%

edited 05 Jul, 18:22

Your answer
toggle preview

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here



Answers and Comments

Markdown Basics

  • *italic* or _italic_
  • **bold** or __bold__
  • link:[text]( "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported

Question tags:


question asked: 04 Jul, 17:00

question was seen: 237 times

last updated: 05 Jul, 19:37

powered by OSQA