[GIS] Showing popup image on hover and click

geojsonleafletleaflet-draw

I want to to show an image when the mouse hovers on a marker or polygon, and on click show a popup with property attributes information from GeoJSON.

I can manage to show attributes on click but I am not able to show image on hover.
However, the image can be viewed in console.log but it's not appearing on the screen.

Below is what I want it to look like.

Best Answer

I found a solution. Hope this will help someone who is searching for a similar question.

The code is:

    popupContent = document.createElement("img");
    popupContent.onload = function () {
      layer.openPopup();
    };
    popupContent.src = "path/to/image";
    layer.bindPopup(popupContent, {
      maxWidth: "auto"

});

Copied content from http://jsfiddle.net/3v7hd2vx/32/

var map = L.map("map");
L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png").addTo(map);

map.setView([48.85, 2.35], 12);

var marker, popupContent;

for (var i = 0; i < 1; i += 1) {
    marker = L.marker([48.85, 2.35]).addTo(map);
  popupContent = document.createElement("img");
  popupContent.onload = function () {
    marker.openPopup();
  };
  popupContent.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Stack_Exchange_logo_and_wordmark.svg/375px-Stack_Exchange_logo_and_wordmark.svg.png";
  //popupContent = '<img src="http://c4.staticflickr.com/1/691/21131215939_49601d06ef_b.jpg" />';
  marker.bindPopup(popupContent, {
    maxWidth: "auto"
  });
}

marker.openPopup();

For reference : https://stackoverflow.com/questions/38170366/leaflet-adjust-popup-to-picture-size

Related Solutions

Leaflet – How to Submit a Form from Within a Leaflet Popup?

I figured it out! - the problem is that my function or wherever I hold my line of code to "preventDefault()" was outside of the function that created the form in the first place. I need to place the code like such:

//Custom functions upon 'edit'
      map.on('draw:created', function(e) {
          var coords = e.layer._latlng;
          console.log(coords);
          var tempMarker = featureGroup.addLayer(e.layer);
          var popupContent = '<form role="form" id="form" enctype="multipart/form-data" class = "form-horizontal" onsubmit="addMarker()">'+
          '<div class="form-group">'+
              '<label class="control-label col-sm-5"><strong>Date: </strong></label>'+
              '<input type="date" placeholder="Required" id="date" name="date" class="form-control"/>'+ 
          '</div>'+
          '<div class="form-group">'+
              '<label class="control-label col-sm-5"><strong>Gender: </strong></label>'+
              '<select class="form-control" id="gender" name="gender">'+
                '<option value="Male">Male</option>'+
                '<option value="Female">Female</option>'+
                '<option value="Other">Other</option>'+
              '</select>'+ 
          '</div>'+
          '<div class="form-group">'+
              '<label class="control-label col-sm-5"><strong>Age: </strong></label>'+
              '<input type="number" min="0" class="form-control" id="age" name="age">'+ 
          '</div>'+
          //...
          '<div class="form-group">'+
              '<label class="control-label col-sm-5"><strong>Description: </strong></label>'+
              '<textarea class="form-control" rows="6" id="descrip" name="descript">...</textarea>'+
          '</div>'+
          '<input style="display: none;" type="text" id="lat" name="lat" value="'+coords.lat.toFixed(6)+'" />'+
          '<input style="display: none;" type="text" id="lng" name="lng" value="'+coords.lng.toFixed(6)+'" />'+
          '<div class="form-group">'+
            '<div style="text-align:center;" class="col-xs-4 col-xs-offset-2"><button type="button" class="btn">Cancel</button></div>'+
            '<div style="text-align:center;" class="col-xs-4"><button type="submit" value="submit" class="btn btn-primary trigger-submit">Submit</button></div>'+
          '</div>'+
          '</form>';
          tempMarker.bindPopup(popupContent,{
            keepInView: true,
            closeButton: false
            }).openPopup();

        $("#form").submit(function(e){
            e.preventDefault();
            console.log("didnt submit");
            var date =$("#date").val();
            console.log(date);

        });
      });

This enables me to work on the form element before it essentially creates a new one.

[GIS] How to make both hover and click popup work

As @ghybs said, attach events to the circle markers themselves inside pointToLayer, like so:

pointToLayer: function (feature, latlng) {
    var popupOptions = {maxWidth: 500};
    var popupContent = '<a target="_blank" class="popup" href="' +
            feature.properties.post + '">' +
            feature.properties.soundcloud +
            '<h3>' + "Post & tracklist" + '</h3>' + '</a>';
    var circle = L.circleMarker(latlng, geojsonMarkerOptions).bindPopup(popupContent,popupOptions);

    // Highlight the marker on hover
    circle.on('mouseover', function(){
        circle.setStyle({ color: 'red' });
    });

    // Un-highlight the marker on hover out
    circle.on('mouseout', function(){
        circle.setStyle(geojsonMarkerOptions);
    });

    // Open the popup on click. Actually optional, as popup automatically adds a click listener.
    circle.bindPopup(popupContent, popupOptions);
    circle.on('click', function(){
        circle.openPopup(latlng);
    });

    return circle;
}

Best Answer

Related Solutions

Leaflet – How to Submit a Form from Within a Leaflet Popup?

[GIS] How to make both hover and click popup work

Related Question