Leaflet Image Issues

You may be realizing why I don’t spend much time on the leaflet-image. I think it requires far more information than a leaflet-map. I believe what’s happening to your zoom stuff is that the image is being fit inside the container, no matter the zoom (so it appears as though the zoom is doing nothing).

The attribution tag might be because it’s in quotes? [leaflet-image attribution="<a href='website'>etc</a>"]. You might be able to get around this if you edit the plain text in the editor.

I did copy/paste your shortcode and swapped the image out and it seemed to work fine for me:

View post on imgur.com

(plaintext) Shortcode here:

[leaflet-image height=500 zoom=11 zoomcontrol scrollwheel attribution="LeafletJS; William Edgar Map 1742 via NLA"]

• This reply was modified 4 years, 8 months ago by bozdoz.

Thanks for your response! Regarding the zoom issue, I seemed to have figured it out through trial and error. My problem now is that I’m unable to set the initial default zoom to show the full map upon load. The full line is here:

[leaflet-image source="https://jdb1745.net/littlerebellions/wp-content/uploads/2020/03/Edgar1742Map.png" width="100%" height="500" zoom="2.5" max_zoom="4" zoomcontrol scrollwheel attribution="<a href=https://leafletjs.com>LeafletJS</a> | William Edgar Map 1742 via NLA"]

Max zoom is working correctly and the ‘zoom’ tag is actually capping the zoom-out to the full size of the map as depicted in the image below. Yet I would think that ‘zoom’ should set its initial display upon load. Instead, the default zoom shows a close-up upon load. Min zoom doesn’t seem to do anything, hence it not being present in the code above.

https://jdb1745.net/littlerebellions/wp-content/uploads/2020/03/leaflettest.png

Your suggestion about removing the quotes around the URL works in the attribution tag. Thanks for that. WP puts them in automatically upon switching to the WSYWIG editor, so the post needs to be published from the text editor to keep them out. Fun stuff!

Separate to this, is there any chance of seeing two specific functions being brought into a future version of this plugin:

1) Mouse-over tooltips rather than click to display
2) An option for a display box to remove all markers, like this:

https://www.meiotic.co.uk/my/research/map-of-gaelic-placenames/

Thanks for your great work on this project and also for your help here in the forum. It’s really awesome to be able to use Leaflet with our WP installations and I’m very appreciative.

Cheers,
Darren

The display box is something I’m considering, but unsure how it should work. See this related issue: https://github.com/bozdoz/wp-plugin-leaflet-map/issues/43. Pretty empty, but I did add a bit of a potential example in this issue: https://github.com/bozdoz/wp-plugin-leaflet-map/issues/54

It ended with me not really sure how it should be designed, and what its potential use-cases were.

Maybe something like:

[leaflet-map base-layer=”base-1″]
[leaflet-group name=”base layers” type=”base”]
[leaflet-wms src=”…” name=”base-1″]
[/leaflet-group]
[leaflet-group name=”markers” type=”layer”]
[leaflet-marker]
[leaflet-marker]
[/leaflet-group]

But yeah, that’s a lot of work, and I really can’t tell if there’s enough interest in this, or if my implementation is too opinionated.

Understood. I’ll be watching closely to see what happens with the plugin going forward. Would love to see those mouseovers at some point, too!

Once again, thanks for all of your work on this.

You should (not sure) be able to add this plugin: https://erictheise.com/rrose/

Looks like the last example on the page is using mouseovers. I’m surprised that the implementation is using an onEachFeature method, but could work.

Here’s some information for adding plugins: https://github.com/bozdoz/wp-plugin-leaflet-map#how-can-i-add-another-leaflet-plugin

Probably what you’d want to do is iterate window.WPLeafletMapPlugin.markers, something like this:

// iterate any of these: <code>maps</code>, <code>markers</code>, <code>markergroups</code>, <code>lines</code>, <code>circles</code>, <code>geojsons</code>
var markers = window.WPLeafletMapPlugin.markers;

for (var i = 0, len = markers.length; i < len; i++) {
  var marker = markers[i];
  marker.on("mouseover mousemove", function(e) {
    new L.Rrose({
      offset: new L.Point(0, -10),
      closeButton: false,
      autoPan: false
    })
      .setContent('get popup from the e variable somehow')
      .setLatLng(e.latlng)
      .openOn(rrose_map);
  });
  layer.on("mouseout", function(e) {
    rrose_map.closePopup();
  });
}

Thanks for dropping this here. We’ll give it a shot in the coming weeks and see how it all works!