Facing Issue to display multiple markers using Open Layers MAP API

Question

I'm trying to add multiple markers on map using openlayers. And than I would like to display a simple pop-up to show info about every marker I have. Let me create scenario.

Let's suppose this is my html :

  <body>
    <div class="container-fluid">
      <div class="row-fluid">
        <div class="span12">
          <div id="map" class="map">
            <div id="popup"></div>
          </div>
        </div>
      </div>
    </div>

    <div class="single-pop-up">
      <div class="single-pop-up-header">
        <p>test</p>
      </div>
      <div class="single-pop-up-content">
        <img src="http://test/test/test">
      </div>
    </div>
  </body>

And let's suppose this is my js :

  var values = 
  [ 
  {name : "John Doe 1", url : "http://here/is/some/url/I/need", long: 24.806258, lat: -120.334275}, 
  {name : "John Doe 2", url : "http://here/is/some/url/I/need", long: 24.767025, lat: -120.313968}, 
  {name : "John Doe 3", url : "http://here/is/some/url/I/need", long: 24.789318, lat: -120.321595}, 
  {name : "John Doe 4", url : "http://here/is/some/url/I/need", long: 24.791818, lat: -120.322354}
  ];

  //the code to get every marker
  for(i = 0; i<values.length; i++){
    var iconFeature = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.transform([values[i].long, values[i].lat], 'EPSG:4326','EPSG:3857')),
    name: values[i].name,
    url: values[i].url,
    rainfall: 500
    });
  }

  //the code to style the markers
  var iconStyle = new ol.style.Style({
    image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
    anchor: [0.5, 46],
    anchorXUnits: 'fraction',
    anchorYUnits: 'pixels',
    opacity: 0.9,
    src: 'img/telecamera.png'
    }))
  });

  iconFeature.setStyle(iconStyle);


  var vectorSource = new ol.source.Vector({
    features: [iconFeature]
  }); 

  console.log("=====icon feature=====");
  console.log(iconFeature);
  console.log("=====icon feature=====");

  var vectorLayer = new ol.layer.Vector({
    source: vectorSource
  });

  var rasterLayer = new ol.layer.Tile({
    source: new ol.source.OSM()
  });

  //the code to call the map
  var map = new ol.Map({
    layers: [rasterLayer, vectorLayer],
    target: document.getElementById('map'),
    view: new ol.View({
    center: ol.proj.fromLonLat([19.8187, 41.3275]),
    projection : ol.proj.get['EPSG:3857'],
    zoom: 13 
    })
  });

And now I use this code to hide and display my pop-up using jquery-ui

   $(document).ready(function(){
      var test = $( function() {
        $( ".single-pop-up-content" ).dialog({
          autoOpen : false, modal : true, show : "blind", hide : "blind"
          });
      });
  });

  //this is how I track my marker
  /*display popup on click*/
  map.on('click', function(evt) {
    var feature = map.forEachFeatureAtPixel(evt.pixel,
      function(feature, layer) {
        return feature;
      });
    if (feature) {
        //I would like to show the info of markers here 
    } 
    else
    {
      //dont show anything
    }
  });

Answer 1

Note that your example code does not really work, the vector layer does not show anything at all and the style is not set correctly.

Take a look at the OpenLayer examples. One is showing an popup only with OL, an other one shows you how to use jQuery and bootstrap .

The relevant part, without furter ado:

<!-- Overlay, used as positional reference -->
<div id="overlay"></div>
<!-- The actual dialog -->
<div id="popup" title="Welcome to OpenLayers"></div>


// Popup showing the position the user clicked
var overlay = new ol.Overlay({
  element: document.getElementById('overlay')
});
map.addOverlay(overlay);


$(document.getElementById('popup')).dialog({
  position: {
    my: 'center top',
    at: 'center top',
    of: overlay.getElement()
  },
  autoOpen: false
});

map.on('click', function(evt) {
  // var element = overlay.getElement();
  var popup = document.getElementById('popup');
  var coordinate = evt.coordinate;
  var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
      coordinate, 'EPSG:3857', 'EPSG:4326'));

  // this makes the dialog's container place itself
  overlay.setPosition(coordinate);

  popup.innerHTML = '<p>This is ' + hdms + '</p>';
  $(popup).dialog('open')
  $(popup).dialog( "option", "position", {
    my: 'center top',
    at: 'center top',
    of: overlay.getElement()
  });
});

A full codepen is available here .

Facing Issue to display multiple markers using Open Layers MAP API

Question

1 answers

solution1
0 ACCPTED 2018-04-06 17:44:13

Facing Issue to display multiple markers using Open Layers MAP API

Question

1 answers

solution1 0 ACCPTED 2018-04-06 17:44:13

solution1
0 ACCPTED 2018-04-06 17:44:13