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 '20, 17:00

Midrob's gravatar image

Midrob
11223
accept rate: 0%

2

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 '20, 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 '20, 16:51) Midrob

You can use leafletJS to display the map and than use the following leaflet codeline adjusted to your needs:

L.circle([lat,lng], radius).addTo(map);

See this for more: https://leafletjs.com/reference-1.6.0.html#circle

permanent link

answered 05 Jul '20, 18:18

Spiekerooger's gravatar image

Spiekerooger
1.4k1327
accept rate: 17%

edited 05 Jul '20, 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

By RSS:

Answers

Answers and Comments

Markdown Basics

  • *italic* or _italic_
  • **bold** or __bold__
  • link:[text](http://url.com/ "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:

×478
×13
×10
×1

question asked: 04 Jul '20, 17:00

question was seen: 1,022 times

last updated: 05 Jul '20, 19:37

powered by OSQA