waynegm / imgViewer2

Extensible and responsive jQuery plugin to zoom and pan images based on the Leaflet mapping library
MIT License
60 stars 34 forks source link

Set initial zoom area #21

Closed dave7777 closed 6 years ago

dave7777 commented 6 years ago

Hello Wayne, Do you think there is a quick way to set the initial zoom area of a picture to some predefined coordinates in pixels? I have investigated the setview and fitbounds functions but they seem to be related to the maps and not images. Thank you! Dave

waynegm commented 6 years ago

There is a setZoom and a panTo method described in the documentation and demonstrated in an example.

dave7777 commented 6 years ago

thank you Wayne I tried puitting this code and it did not work: trackresize: false, maxBoundsViscosity: 1.0, onReady: function() { this.setZoom(4).panTo(1,3); } });

dave7777 commented 6 years ago

can you please help me with this code? I need it workign asap

dave7777 commented 6 years ago

I selected your script for a large project with thousands of high resolution images - can you please finalise this for me?? I mean where in your scrip should I put this zoom code?

waynegm commented 6 years ago

The panTo method takes relative image coordinates which must be between 0 and 1. Coordinate (0,0) is the top left hand corner and (1,1) is the bottom right hand corner of the image. The location you have, (1,3), is invalid. Try something like (0.5,0.75) instead.

dave7777 commented 6 years ago

I am complete non-programmer - can you help me to place this line inside your code?

onReady: function() {this.setZoom(10).panTo(0.5,0.75)};

self.bounds = L.latLngBounds(L.latLng(0,0), L.latLng(self.img.naturalHeight,self.img.naturalWidth));
                    self.map = L.map($view.attr('id'), {crs:L.CRS.Simple,
                                                        minZoom: -10,
                                                        trackresize: false,
                                                        maxBoundsViscosity: 1.0,
                                                        attributionControl: false,
                                                        inertia: true,
                                                        inertiaDeceleration:1500,
                                                        zoomSnap: 0,
                                                        wheelPxPerZoomLevel: Math.round(36/self.options.zoomStep),
                                                        zoomDelta: self.options.zoomStep
                    });
                    self.zimg = L.imageOverlay(self.img.src, self.bounds).addTo(self.map);
                    self.map.options.minZoom = self.map.getBoundsZoom(self.bounds,false);
                    self.map.fitBounds(self.bounds);
                    self.bounds = self.map.getBounds();
                    self.map.setMaxBounds(self.bounds);
waynegm commented 6 years ago

$(document).ready( function() {
    var $img = $("#image1").imgViewer2({
       onReady: function() {
            this.setZoom(4).panTo(0.5,0.75);
        }
    });
});
dave7777 commented 6 years ago

FANTASTIC - IT WORKS!!!)))