This is a static archive of our old OpenStreetMap Help Site. Please post any new questions and answers at community.osm.org.

Marker Pop-up and line between two marker

0

Here is my code:

<html lang="en"> <head> <meta charset="utf-8"> <title>Etü & Proje - Staj</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css"> <script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>

<script> var map; var mapLat = 39.8588; var mapLng = 32.64402; var mapDefaultZoom = 10;

function initialize_map() {
  map = new ol.Map({
    target: "map",
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM({
                  url: "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png"
            })
        })
    ],
    view: new ol.View({
        center: ol.proj.fromLonLat([mapLng, mapLat]),
        zoom: mapDefaultZoom
    })
  });
}

function add_map_point(lat, lng) {
  var vectorLayer = new ol.layer.Vector({
    source:new ol.source.Vector({
      features: [new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.transform([parseFloat(lng), parseFloat(lat)], 'EPSG:4326', 'EPSG:3857')),
        })]
    }),
    style: new ol.style.Style({
      image: new ol.style.Icon({
        anchor: [0.5, 0.5],
        anchorXUnits: "fraction",
        anchorYUnits: "fraction",
        src: "https://upload.wikimedia.org/wikipedia/commons/e/ec/RedDot.svg"
      })
    })
  });

  map.addLayer(vectorLayer);
}
</script>

</head> <body onload="initialize_map(); add_map_point(39.8588, 32.64402);add_map_point(39.921295, 32.852267);">

</body> </html>

My question is how can i add a marker pop up and draw a line between these two markers?

Thanks alot.

asked 01 Jul '20, 10:31

serkan991's gravatar image

serkan991
11112
accept rate: 0%

Source code available on GitHub .