From c710a271cff92f4e315033099b0c9a9752345ab4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B4natas=20Castro?= Date: Wed, 27 Mar 2019 10:02:57 -0300 Subject: [PATCH 1/2] Update leaflet.scalefactor.js No need of jQuery to get converted height on _pxTOmm method. --- leaflet.scalefactor.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/leaflet.scalefactor.js b/leaflet.scalefactor.js index f75f02a..fc4f904 100644 --- a/leaflet.scalefactor.js +++ b/leaflet.scalefactor.js @@ -42,12 +42,12 @@ _pxTOmm: (function () { var heightRef = document.createElement('div'); - heightRef.style = 'height:1mm;display:none'; + heightRef.style = 'height:1mm;visibility:hidden'; heightRef.id = 'heightRef'; document.body.appendChild(heightRef); heightRef = document.getElementById('heightRef'); - var pxPermm = $('#heightRef').height(); + var pxPermm = heightRef.offsetHeight; heightRef.parentNode.removeChild(heightRef); @@ -77,4 +77,4 @@ }); return ScaleFactor; -}, window)); \ No newline at end of file +}, window)); From 0d149e5781a55913c380e50eb0adfe2fbeca0e77 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B4natas=20Castro?= Date: Wed, 27 Mar 2019 10:08:43 -0300 Subject: [PATCH 2/2] Update README.md --- README.md | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index bf2c45e..5319485 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # leaflet.ScaleFactor Display a Scale Factor (e.g. 1:50,000) for Leaflet maps, checkout the [Demo](https://marcchasse.github.io/leaflet.ScaleFactor/). -Leaflet.ScaleFactor is based on [Leaflet's Control.Scale](http://leafletjs.com/reference.html#control-scale) and works with the latest version of Leaflet, [1.0.0-rc1](http://leafletjs.com/reference-1.0.0.html) it also likely works with older versions. Jquery 1.0 or higher is required for its [`.height()`](http://api.jquery.com/height/) function. A pure JavaScript alternative would be better but i'm not sure how to go about implementing that. +Leaflet.ScaleFactor is based on [Leaflet's Control.Scale](http://leafletjs.com/reference.html#control-scale) and works with the latest version of Leaflet, [1.0.0-rc1](http://leafletjs.com/reference-1.0.0.html) it also likely works with older versions. The calculation to determine the scale factor is approximate and could likely be improved further, as of right now its calculated as follows. @@ -11,7 +11,7 @@ The calculation to determine the scale factor is approximate and could likely be 4. Get Leaflet to calculate the real world distance in meters between the two points. 5. Get the pixels per physical screen millimeter 1. Add a div with height:1mm; to the page - 2. Get jQuery to return the calculated height in pixels + 2. Get calculated height in pixels by returning browser native `offsetHeight` attribute 6. Multiply 100px by the pixels/mm 7. Convert physical screen size of 100px from milimeters to meters 8. Divide real world meters per 100px by screen meters per 100px @@ -22,11 +22,10 @@ The calculation to determine the scale factor is approximate and could likely be 1. Create a leaflet map. Checkout Leaflets [Quick Start Guide](http://leafletjs.com/examples/quick-start.html) for a basic map example. -2. Include jQuery, Leaflet.ScaleFactor.min.css and Leaflet.ScaleFactor.min.js +2. Include Leaflet.ScaleFactor.min.css and Leaflet.ScaleFactor.min.js ```html - ``` 3. Add the ScaleFactor control: @@ -48,7 +47,6 @@ Here is everything you need to get this up and running. Copy and past the follow
-