Overriding default popup anchor in Leaflet GeoJSON polygon?

Question

By default popups open wherever you click within the boundaries of polygons in Leaflet geojson layers. Here's an example:

JsFiddle

I would like to anchor the popup either:

so it opens in a specific place on the map (setLatLong)

or

at a specific coordinate relative to where the cursor clicks on the polygon. (anchorPopup)

I know from docs that this can be achieved using anchorPopup or openPopup: if this be the case where does one add this to the code?

My code is similar to the jsfiddle:

var outcroppings = L.geoJson(outcroppings,{

 style: function(feature, layer){
    return { 
        color: "black",
        fillColor: "orange", 
        fillOpacity: 6, 
        weight: 2,

    };
},

   onEachFeature: function (feature, layer){
    layer.bindPopup(

                    "<img src='" + feature.properties.image + "'style=  width:100px  >"+
                    "</p>area: "+feature.properties.Shape_Area
                   );      
}

 }).addTo(map);

Answer 1

You could try the setLatLng() method chained onto the popup. If you enter the coordinates where you want the popup to appear, it should stay in that location.

So, I think it should look like this:

onEachFeature: function (feature, layer){
layer.bindPopup(

                "<img src='" + feature.properties.image + "'style=  
width:100px  >"+
                "</p>area: "+feature.properties.Shape_Area
               );      
}

  }).setLatLng(LatLng).addTo(map);

Answer 2

You need to initiate the popup with a layer source (see the Creation section of the popup documentation) and then set its coordinates:

L.popup(popupOptions,layer).setContent(content).setLatLng(lat_lng)