pigeon-maps - npm Package Compare versions

Comparing version 0.12.1 to 0.13.0

CHANGELOG.md

@@ -10,2 +10,31 @@ # Change Log
 
+## 0.13.0 - 2019-05-09
+### Changes
+- Add the `dprs` parameter to `<Map />` and `dpr` as the 4th argument for the `provider` functions.
+
+Previously if you wanted to support HiDPI screens your `provider` function looked something like this:
+
+```js
+function wikimedia (x, y, z) {
+  const retina = typeof window !== 'undefined' && window.devicePixelRatio >= 2
+  return `https://maps.wikimedia.org/osm-intl/${z}/${x}/${y}${retina ? '@2x' : ''}.png`
+}
+```
+
+This works fine and will continue to work in `0.13`. However this had some issues with server rendering. The code on your server would always render the non-retina image and later React would hydrate it with the real retina image. This lead to a bit of flickering and to the loading of an excessive amount of map tiles.
+
+Now you can pass `<Map dprs={[1, 2]} />` and update your provider function to:
+
+```js
+function wikimedia (x, y, z, dpr) {
+  return `https://maps.wikimedia.org/osm-intl/${z}/${x}/${y}${dpr >= 2 ? '@2x' : ''}.png`
+}
+```
+
+... and pigeon-maps will call the provider twice to create a `<img srcset>` for both resolutions.
+
+The value of `dpr` will be `undefined` for the default tile (`<img src>`) which acts as a backup for older browsers.
+
+If you don't need server rendering, then the old approach of having no `dprs` array and figuring out the `dpr` from the `window` inside `provider` will continue to work fine.
+
 ## 0.12.1 - 2019-03-26
@@ -12,0 +41,0 @@ ### Fixes

lib/index.js

@@ -58,4 +58,4 @@ 'use strict';
 
-function wikimedia(x, y, z) {
-  var retina = typeof window !== 'undefined' && window.devicePixelRatio >= 2;
+function wikimedia(x, y, z, dpr) {
+  var retina = typeof dpr !== 'undefined' ? dpr >= 2 : typeof window !== 'undefined' && window.devicePixelRatio >= 2;
   return 'https://maps.wikimedia.org/osm-intl/' + z + '/' + x + '/' + y + (retina ? '@2x' : '') + '.png';
@@ -109,2 +109,11 @@ }
 
+function srcSet(dprs, url, x, y, z) {
+  if (!dprs || dprs.length === 0) {
+    return '';
+  }
+  return dprs.map(function (dpr) {
+    return url(x, y, z, dpr) + (dpr === 1 ? '' : ' ' + dpr + 'x');
+  }).join(', ');
+}
+
 var Map = function (_Component) {
@@ -1040,2 +1049,3 @@ _inherits(Map, _Component);
     var oldTiles = this.state.oldTiles;
+    var dprs = this.props.dprs;
 
@@ -1080,2 +1090,3 @@ var mapUrl = this.props.provider || wikimedia;
             url: mapUrl(x, y, old.roundedZoom),
+            srcSet: srcSet(dprs, mapUrl, x, y, old.roundedZoom),
             left: xDiff + (x - old.tileMinX) * 256 * pow,
@@ -1101,2 +1112,3 @@ top: yDiff + (y - old.tileMinY) * 256 * pow,
           url: mapUrl(_x13, _y, roundedZoom),
+          srcSet: srcSet(dprs, mapUrl, _x13, _y, roundedZoom),
           left: (_x13 - tileMinX) * 256,
@@ -1145,2 +1157,3 @@ top: (_y - tileMinY) * 256,
             src: tile.url,
+            srcSet: tile.srcSet,
             width: tile.width,
@@ -1365,3 +1378,4 @@ height: tile.height,
   maxZoom: 18,
-  limitBounds: 'center'
+  limitBounds: 'center',
+  dprs: []
 };
@@ -1382,2 +1396,3 @@ process.env.NODE_ENV !== "production" ? Map.propTypes = {
   provider: PropTypes.func,
+  dprs: PropTypes.array,
   children: PropTypes.node,
@@ -1384,0 +1399,0 @@

package.json

 {
   "name": "pigeon-maps",
-  "version": "0.12.1",
+  "version": "0.13.0",
   "description": "ReactJS maps without external dependencies",
@@ -5,0 +5,0 @@ "author": "Marius Andra",

README.md

@@ -113,4 +113,6 @@ # Pigeon Maps - ReactJS maps without external dependencies
 
-**provider** - Function that returns a [TMS URL](https://wiki.openstreetmap.org/wiki/TMS): `(x, y, z) => url`.
+**provider** - Function that returns a [TMS URL](https://wiki.openstreetmap.org/wiki/TMS): `(x, y, z, dpr) => url`. The argument `dpr` will be a value from the `dprs` array (see below) or `undefined` when requesting the default tile.
 
+**dprs** - An array of `devicePixelRatio`s that your tile provider supports. Defaults to `[]`. Pass an array like `[1, 2]` and the numbers here will be sent to `provider` as the 4th argument. The responses will be combined into an `<img srcset>` attribute, which modern browsers use to select tiles with [the right resolution](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Resolution_switching_Same_size_different_resolutions).
+
 **animate** - Animations enabled, `true`.
@@ -117,0 +119,0 @@

src/index.js

@@ -20,4 +20,4 @@ import React, { Component } from 'react'
 
-function wikimedia (x, y, z) {
-  const retina = typeof window !== 'undefined' && window.devicePixelRatio >= 2
+function wikimedia (x, y, z, dpr) {
+  const retina = typeof dpr !== 'undefined' ? dpr >= 2 : (typeof window !== 'undefined' && window.devicePixelRatio >= 2)
   return `https://maps.wikimedia.org/osm-intl/${z}/${x}/${y}${retina ? '@2x' : ''}.png`
@@ -68,2 +68,9 @@ }
 
+function srcSet (dprs, url, x, y, z) {
+  if (!dprs || dprs.length === 0) {
+    return ''
+  }
+  return dprs.map(dpr => url(x, y, z, dpr) + (dpr === 1 ? '' : ` ${dpr}x`)).join(', ')
+}
+
 export default class Map extends Component {
@@ -84,2 +91,3 @@ static propTypes = {
     provider: PropTypes.func,
+    dprs: PropTypes.array,
     children: PropTypes.node,
@@ -128,3 +136,4 @@
     maxZoom: 18,
-    limitBounds: 'center'
+    limitBounds: 'center',
+    dprs: []
   }
@@ -1026,2 +1035,3 @@
     const { oldTiles } = this.state
+    const { dprs } = this.props
     const mapUrl = this.props.provider || wikimedia
@@ -1066,2 +1076,3 @@
             url: mapUrl(x, y, old.roundedZoom),
+            srcSet: srcSet(dprs, mapUrl, x, y, old.roundedZoom),
             left: xDiff + (x - old.tileMinX) * 256 * pow,
@@ -1087,2 +1098,3 @@ top: yDiff + (y - old.tileMinY) * 256 * pow,
           url: mapUrl(x, y, roundedZoom),
+          srcSet: srcSet(dprs, mapUrl, x, y, roundedZoom),
           left: (x - tileMinX) * 256,
@@ -1128,2 +1140,3 @@ top: (y - tileMinY) * 256,
               src={tile.url}
+              srcSet={tile.srcSet}
               width={tile.width}
@@ -1130,0 +1143,0 @@ height={tile.height}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

106095

increased by2.85%

Lines of code

2215

increased by1.19%

Number of lines in readme file

194

increased by1.04%

No dependency changes