Adding marker using OpenLayers 3

Question

I want to add a simple marker on on any longitude and latitude (location). I have Googled it a lot but didn't found any sensible answer or help from there. Some code I have tried but they were not working fine for me. I am not good in programming and reading the existing code.

Please go here http://openlayers.org/en/latest/examples/icon.html and see this is good example and showing the icon but behind that there is an image not any map. I have tried to show any map there and show marker with longitude and latitude but its not working from my end.

I just want to show a simple map with marker on any particular location. On click the popup should open and should contain information about that location

Eg This is a xyz restaurant, xyz hotel, xyz temple etc.

Answer 1

if you want to display a custom content in your popup when clicking on your marker :

 $(element).popover({
        'placement': 'top',
        'html': true,
        'content': "this is a "+feature.get('type')+" in location : "+feature.getGeometry().getCoordinates().toString()
      });

if the example in the link you shared isn't working for you can you show the errors it is returning in the console

Answer 2

The background map in the example you linked was designed to look like an image. It is pulled in with the following code:

  var rasterLayer = new ol.layer.Tile({
    source: new ol.source.TileJSON({
      url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.json',
      crossOrigin: ''
    })
  });

If you want a different map, you can replace the tile layer source with any of the sources available in OpenLayers, or with your custom one. Maybe OpenStreetMap would be an option? Just replace the above snippet with the following:

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

The code that positions the popup and sets its content in that example is

      var coordinates = feature.getGeometry().getCoordinates();
      popup.setPosition(coordinates);
      $(element).popover({
        'placement': 'top',
        'html': true,
        'content': feature.get('name')
      });

To also display latitude and longitude, change that code to

      var coordinates = feature.getGeometry().getCoordinates();
      popup.setPosition(coordinates);
      $(element).popover({
        'placement': 'top',
        'html': true,
        'content': feature.get('name') + ' ' + ol.coordinate.toStringHDMS(coordinates, 1)
      });