Pixelorigin

README.md

@@ -17,11 +17,20 @@ Advantages include:
 
 [Download as zip](https://github.com/publiclab/Leaflet.DistortableImage/releases) or clone the repo to get a local copy.
 
-Also available on NPM as [leaflet-distortableimage](https://www.npmjs.com/package/leaflet-distortableimage).
+Also available on NPM as [leaflet-distortableimage](https://www.npmjs.com/package/leaflet-distortableimage):
+
+```Bash
+npm i leaflet-distortableimage
+```
+
+## Compatibility with Leaflet versions
+
+Compatible with Leaflet 1.0.0 and greater
 
 ## Setup
 
-* From the root directory, run `npm install` or `sudo npm install`
+* From the root directory, run `npm install` and
+`npm install leaflet --no-save`
 
 ## Demo
 
@@ -39,7 +48,7 @@ For the additional features in the [multiple image interface](#Multiple-Image-In
 
 The simplest implementation is to create a map with our recommended `TileLayer`, then create an `L.distortableImageOverlay` instance and add it onto the map.
 
-```JS
+```js
 // set the initial map center and zoom level
 map = L.map('map').setView([51.505, -0.09], 13);
 
@@ -54,7 +63,7 @@ map.whenReady(function() {
 
 <b>Note</b>: <code>map.addGoogleMutant()</code> is just a convenience function for adding our recommended layer to the map. If you want a different baselayer, skip this line and add your preferred layer to the map as you normally would. For ex:
 
-```JS
+```js
 L.tileLayer('https://{s}.tiles.mapbox.com/v3/anishshah101.ipm9j6em/{z}/{x}/{y}.png', {
   maxZoom: 18,
   attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
@@ -82,7 +91,7 @@ If you would like to overrwrite the default toolbar actions available for an ind
 
 For example, to overrwrite the toolbar to only include the `ToggleTransparency` and `Delete` actions, and also add on the additional `ToggleScale` action:
 
-``` JS
+```js
 img = L.distortableImageOverlay('example.jpg', {
   actions: [ToggleTransparency, ToggleScale, Delete],
 }).addTo(map);
@@ -148,7 +157,7 @@ We've added a GPU-accelerated means to generate a full resolution version of the
 
 When instantiating a Distortable Image, pass in a `fullResolutionSrc` option set to the url of the higher resolution image. This image will be used in full-res exporting.
 
-```JS
+```js
 img = L.distortableImageOverlay('example.jpg', {
   fullResolutionSrc: 'large.jpg',
 }).addTo(map);
@@ -172,7 +181,7 @@ Values available to pass to `mode` are:
 
 In the below example, the image will be initialiazed with "rotateScale" handles:
 
-```JS
+```js
 img = L.distortableImageOverlay('example.jpg', {
   mode: 'rotateScale',
 }).addTo(map);
@@ -206,7 +215,7 @@ Although not required, you will probably want to pass `corners` to individual im
 
 here is an example with two images:
 
-```JS
+```js
 // 1. Instantiate map
 // 2. Instantiate images but this time *dont* add them directly to the map
 img = L.distortableImageOverlay('example.jpg', {
@@ -276,7 +285,7 @@ This provides the developer with the flexibility to keep the popup toolbars, the
 
 For ex.
 
-```JS
+```js
 // suppress this images personal toolbar
 img = L.distortableImageOverlay('example.jpg', {
   suppressToolbar: true,
@@ -642,4 +651,3 @@ $ grunt concat:dist
 * Pranshu Srivastava, [@rexagod](https://github.com/rexagod)
 
 Many more at https://github.com/publiclab/Leaflet.DistortableImage/graphs/contributors
-

debug/pixelorigin.html

@@ -7,6 +7,10 @@
   <title>Pixel Origin View For Development</title>
   <script src="../node_modules/leaflet/dist/leaflet-src.js" type="text/javascript" charset="utf-8"></script>
   <link rel="stylesheet" href="../node_modules/leaflet/dist/leaflet.css" media="screen" title="no title">
+  <script src="../node_modules/leaflet-toolbar/dist/leaflet.toolbar.js"></script>
+  <link href="../node_modules/leaflet-toolbar/dist/leaflet.toolbar.css" rel="stylesheet">
+  <link rel="stylesheet" href="../dist/leaflet.distortableimage.css" media="screen" title="no title">
+  <script src="../dist/leaflet.distortableimage.js"></script>
   <style>
     #info {
       position: absolute;
@@ -36,61 +40,57 @@
     (function () {
 
       var trd = [33, 0];
-  
+
       map = L.map('map', {
         center: [33, 0],
         zoom: 2
       });
-  
+
       var positron = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
         attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/attribution">CARTO</a>'
       }).addTo(map);
-
-      var marker = L.marker(trd).addTo(map);
-
-      var pane = map.getPane('markerPane')
-
+
+      img = L.distortableImageOverlay('../examples/example.jpg', {
+        selected: true,
+      }).addTo(map);
+
+      var pane = map.getPane('overlayPane')
+
       var paneCorner = document.createElement('div');
       paneCorner.style.width = '12px';
       paneCorner.style.height = '12px';
       paneCorner.style.borderTop = '2px red solid';
       paneCorner.style.borderLeft = '2px red solid';
-    
+
       pane.appendChild(paneCorner);
-
-      marker._icon.style.border = '1px solid blue';
-
+
       var crsMarker = L.marker(map.unproject([0, 0]), {
         icon: L.divIcon({
           className: 'crsMarker',
           iconAnchor: [0, 0]
         })
       }).addTo(map);
-
-      var markerOffsetLine = L.polyline([[0, 0], [0, 0]], { color: 'skyblue' }).addTo(map);
-      var iconOffsetLine = L.polyline([[0, 0], [0, 0]], { color: 'blue' }).addTo(map);
-
+
+      var imageOffsetLine = L.polyline([[0, 0], [0, 0]], { color: 'skyblue' }).addTo(map);
+
       function info() {
         var pixelOrigin = map.getPixelOrigin();
-        var markerPixelCoords = map.project(trd, map.getZoom());
-        var markerAnchor = marker.options.icon.options.iconAnchor;
-        var markerOffset = marker._icon._leaflet_pos;
-
+        var imagePixelCoords = map.project(trd, map.getZoom());
+        var imageOffset = img._image._leaflet_pos;
+
         document.getElementById('info').innerHTML =
-            '<div style="color: green">CRS origin: 0,0</div>' +
-            '<div style="color: red">px origin: &Delta;' + pixelOrigin.x + ',' + pixelOrigin.y + '</div>' +
-            '<div style="color: blue">marker px coords:' + markerPixelCoords.x.toFixed(2) + ',' + markerPixelCoords.y.toFixed(2) + '</div>' +
-            '<div style="color: blue">marker anchor: &Delta;' + markerAnchor[0] + ',' + markerAnchor[1] + '</div>' +
-            '<div style="color: skyblue">marker pane offset: &Delta;' + markerOffset.x + ',' + markerOffset.y + '</div>';
-
-        markerOffsetLine.setLatLngs([map.unproject(pixelOrigin), map.unproject(pixelOrigin.add(markerOffset))]);
-        iconOffsetLine.setLatLngs([map.unproject(pixelOrigin.add(markerOffset)), map.unproject(pixelOrigin.add(markerOffset).subtract(markerAnchor))]);
+          '<div style="color: green">CRS origin: 0,0</div>' +
+          '<div style="color: red">px origin: &Delta;' + pixelOrigin.x + ',' + pixelOrigin.y + '</div>' +
+          '<div style="color: blue">image px coords:' + imagePixelCoords.x.toFixed(2) + ',' + imagePixelCoords.y.toFixed(2) + '</div>' +
+          '<div style="color: skyblue">image pane offset: &Delta;' + imageOffset.x + ',' + imageOffset.y + '</div>';
+
+        imageOffsetLine.setLatLngs([map.unproject(pixelOrigin), map.unproject(pixelOrigin.add(imageOffset))]);
       }
-  
-      map.on('load move moveend zoomend viewreset', info)
-
-      info();
-
+
+      L.DomEvent.on(img._image, 'load', function() {
+        map.on('load move moveend zoomend viewreset', info)
+        info();
+      });
     })();
   </script>
 </body>