Dots (coordinates) on a static map-CodePudding

I would like to display a dots on the static map ( taken from database ) result would look something like:

there are latitude and longtitude data in my database for each object that i would like to display.

The question is: is this only possible by using some kind of google API? or this could be done in some other way? Maybe somebody seen something similar and would give me a hint where to start?

Update:

I've gone so far that the only thing is to convert html object to js array. Any idea how to? Html::

{% for c in object_list %}

JS::

var flights = {% for c in object_list %} <<--- convert to js..

CodePudding user response：

It can helps you : https://leafletjs.com/

var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(map);

L.marker([51.5, -0.09]).addTo(map) .bindPopup('A pretty CSS3 popup.
Easily customizable.') .openPopup();

CodePudding user response：

With JavaScript you can do something like this :

var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(map);

for(let obj of object_list) {
    L.marker([obj .coordinates.x, obj .coordinates.y]).addTo(map) 
.bindPopup('A pretty CSS3 popup. Easily customizable.') .openPopup();
}