[GIS] Adding image links in GeoJSON object to get images in popup using OpenLayers 3

geojsonimageopenlayerspopup

I have added a geojson file on my map. By clicking on a geojson feature I am getting a pop up which is displaying geometry and coordinate values. Now I want to display image in a pop up also.

How to add it?

This is the geojson code:

{
  'type': 'FeatureCollection',
    'crs': {
      'type': 'name',
        'properties': {
          'name': 'EPSG:4326'
        }
    },
      'features': [{
        'type': 'Featurejson',


        'geometry': {
          'type': 'Point',
          'coordinates': [92.460416718365195, 10.845240354970281],
          //'imgurl': 'http://www.w3schools.com/html/default.asp'
          //'name':"file:///C:/Documents%20and%20Settings/sonal/Desktop/html/point.PNG"
        },
        "properties": {
          //"image": "http://www.w3schools.com/html/default.asp",
          //"href": "http://www.w3schools.com/html/html5.gif",
          "name": "file:///C:/Documents%20and%20Settings/sonal/Desktop/html/point.PNG",
          //"1":"point.png",
          "description": "43.732, -83.9387"

        }
      },

Best Answer

For instance how about using the ol3-popup plugin? Here you can define the html content of your popup.

var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        })
    ],
    view: new ol.View({
        center: ol.proj.transform([-0.92, 52.96], 'EPSG:4326', 'EPSG:3857'),
        zoom: 6
    })
});

var popup = new ol.Overlay.Popup();
map.addOverlay(popup);

map.on('singleclick', function(evt) {
    var content = '<p>If the popup content is quite long then by default it will scroll vertically.</p>';
    content += '<p>This behaviour together with the minimum width and maximum height can be changed by overriding the rules for the CSS class <code>.ol-popup-content</code> defined in <code>src/ol3-popup.css</code>.</p>';
    content += '<hr />';
    content += '<p><em>This text is here to demonstrate the content scrolling due to there being too much content to display :-)</em></p>';
    content += '<img src="path/to/image.png" alt="my_img">'
    popup.show(evt.coordinate, content);
});
Related Question