How to display data on openstreetmap?

Question

PHP

Hello.
There is a table in which the coordinates on the map are added, which I get when I click on the map. Now I need to display them on the map, as I understand it, by adding markers to the map, so how do I extract these coordinates and add them to the map using JS?

Answer 1

Write this data in the process of generating the page in the script element .
Either in the form of an array, simply by listing objects with coordinates and so on, or an object in whose keys to write these same objects. The keys in the second option are the id of the objects from the table, for example.
Or get this data on the client by making an AJAX request to the server, and the data in the same form (but in JSON notation) comes to the client. Send a request, for example, by clicking on some element.
When to add them to the map in the first case is up to you. In the second case, it seems obvious - after receiving them.

Answer 2

Specifically, I won’t say anything about Openstreetmap, but about the mechanism as a whole:
1) Store data about markers in the database
2) When you click on the map, pull out information about certain (all or matching your criteria) markers from the database. Pull through an AJAX request from JS to the server, which will return the data you need.
an example of how this might happen:

$('#map').click(function() {
    $.ajax({
        type: 'POST',
        url: 'path_to_your_script',
        success: function(data) {
            markers = $.parseJSON(data);
            // далее делаете с вашим массивом markers всё что хотите
        }
    });
});

At the same time, on the server, you request markers from the database, and pass them to JS:

// в переменную $markers предварительно помещаете массив ваших маркеров
echo json_encode($markers);

Answer 3

this is how i do it

$.ajax({
    type: "post",
    url: "адрес где формируется массив на php, который переводим в формат json json_encode()",
    dataType: 'json',
    data: "передаем нужные параметры по которым делается выборка",
    success: function(html){
        if((html!==0)||(html!=="Error")){
              try{
                    for(j=0;j<html.length;j++){
                           markers[j] =L.marker([parseFloat(html[j].Lat),parseFloat([j].Lon)]).addTo(maps)
                    }                       
              }
               catch(e){}
         }
      }
});