Skip to content

No need for jQuery #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jonatascastro12 wants to merge 2 commits into
base: master
Choose a base branch
from
Open

No need for jQuery #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c710a27
Update leaflet.scalefactor.js
jonatascastro12 Mar 27, 2019
0d149e5
Update README.md
jonatascastro12 Mar 27, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 3 additions & 5 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.

Expand All @@ -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
Expand All @@ -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
<link rel="stylesheet" type="text/css" href="https://rawgit.com/MarcChasse/leaflet.ScaleFactor/master/leaflet.scalefactor.min.css">
<script src="https://npmcdn.com/jquery@3.0.0/dist/jquery.min.js"></script>
<script src="https://rawgit.com/MarcChasse/leaflet.ScaleFactor/master/leaflet.scalefactor.min.js"></script>
```
3. Add the ScaleFactor control:
Expand All @@ -48,7 +47,6 @@ Here is everything you need to get this up and running. Copy and past the follow
</head>
<body>
<div id="map"></div>
<script src="https://npmcdn.com/jquery@3.0.0/dist/jquery.min.js"></script>
<script src="https://npmcdn.com/leaflet@1.0.0-rc.1/dist/leaflet.js"></script>
<script src="https://rawgit.com/MarcChasse/leaflet.ScaleFactor/master/leaflet.scalefactor.min.js"></script>
<script>
Expand Down
6 changes: 3 additions & 3 deletions leaflet.scalefactor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down Expand Up @@ -77,4 +77,4 @@
});

return ScaleFactor;
}, window));
}, window));