6
4

How can I create a multiple markers on openstreetmap? and how can I interact with them with ajax?

asked 12 Dec '10, 11:51

godard59's gravatar image

godard59
91224
accept rate: 0%

edited 28 Nov '20, 10:24


You can't add multiple markers on the OpenStreetMap.org homepage. For point & click solutions you might like uMap,geocommmons, StaticMap, and others, but for more power and flexibility it's worth learning a few javascript tricks:

Check out: this multiple markers example

  • It uses the open source JavaScript library called OpenLayers (There's an equivalent example for leafletJS)
  • The map is initialised with a basemap layer from the default OpenStreetMap tile server (other tileservers and alternative renderings of OpenStreetMap data are available)
  • It adds a 'Vector' layer, where the markers are defined.
  • It needs a marker image file placed in a 'img' folder alongside
  • It adds three markers. If you were adding more, you might want to do this by defining an array first, and then looping through this as in this example
  • As an exampe of event handling, it detects the event of selecting the marker, and calls 'createPopup'
permanent link

answered 15 Dec '10, 14:39

Harry%20Wood's gravatar image

Harry Wood
9.3k2587127
accept rate: 14%

edited 12 Dec '14, 00:19

Thank you all, Harry I saw OpenLayers library I Like the example of the three marker, but i need add more. Can you give me an example how to integrate an array in this code ?, Or there is an example on OpenLayers library?

(16 Dec '10, 09:44) godard59

How about you learn javascript or pay somebody to code it for you? Looping over an array in javascript is not really openstreetmap related.

(24 Feb '11, 18:12) petschge
1

I'm updating my old answer here to link to 'uMap' as a newer point and click approach. Also linking my array looping example to answer godard69's question (4 years late!)

(15 Sep '14, 23:40) Harry Wood

This is not yet possible for the slippy map on the front page. But you can check out OpenLayers which is an open source javascript slippy map that you can deploy on your own site.

permanent link

answered 12 Dec '10, 12:05

Gnonthgol's gravatar image

Gnonthgol ♦
13.7k15101198
accept rate: 16%

edited 15 Dec '10, 13:28

ChrisH's gravatar image

ChrisH
4.1k134262

The short answer is that we don't provide a mechanism to do that directly on the web site, but that doing so isn't hard at all if you have a little web development experience (which it seems you do). All you need to do is use OpenLayers and use OSM as your background layer.

Here's a URL of a talk I prepared for State of the Map US 2010 (but never got to present), which will take you through the basics of web development using OSM:

http://www.emacsen.net/osm/osm-web-tutorial.pdf

If you go through that presentation, you should hopefully have a good foundation on how to use OSM on your site.

permanent link

answered 15 Dec '10, 11:49

emacsen's gravatar image

emacsen
1.2k1623
accept rate: 13%

-1

step 1 : save your coordinates as json or csv in somewhere and get that link

step 2 : use leaflet or some other library to write codes in html file

step 3 : by using ajax js with above link to fetch data

step 4 : use for loop in the data to do marking (marker in map) automatically

permanent link

answered 10 Dec '20, 10:12

kathir_vibes's gravatar image

kathir_vibes
0
accept rate: 0%

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:

×91
×50
×1

question asked: 12 Dec '10, 11:51

question was seen: 75,998 times

last updated: 13 May, 08:42

powered by OSQA