2

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"

        }
      },
1

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);
});
1

The geojson file that you have provided is not correct.

If you go on a page like: http://geojsonlint.com/ or http://jsonlint.com/ you can validate your geojson code.

You can look at the example how geojson file should look like: http://openlayers.org/en/latest/examples/geojson.html.

It is defined as a var geojsonObject. Geometry includes coordinates, and properties are separated from them.

Start by correcting it!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.