react-mad-map - npm Package Compare versions

Comparing version 0.0.7 to 0.0.8

lib/index.js

@@ -10,2 +10,3 @@ 'use strict';
 var PropTypes = _interopDefault(require('prop-types'));
+var reactRouterDom = require('react-router-dom');
 
@@ -1500,3 +1501,4 @@ function parentPosition(element) {
         top = _props4.top,
-        onClick = _props4.onClick;
+        onClick = _props4.onClick,
+        link = _props4.link;
 
@@ -1519,7 +1521,21 @@
       },
-      this.props.icon && React__default.createElement('img', { src: this.props.icon, width: width || this.state.width, height: height || this.props.height, alt: 'Marker' }),
-      !this.props.icon && React__default.createElement(
-        'svg',
-        { width: width || this.state.width, height: height || this.props.height, viewBox: '0 0 13 18', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
-        React__default.createElement('path', { d: 'M6.5 0C2.91014 0 0 2.90163 0 6.48098C0 10.1529 4.08943 15.5729 5.78129 17.657C6.15271 18.1143 6.84729 18.1143 7.21871 17.657C8.91057 15.5729 13 10.1529 13 6.48098C13 2.90163 10.0899 0 6.5 0ZM6.5 8.79562C5.21764 8.79562 4.17857 7.75959 4.17857 6.48098C4.17857 5.20238 5.21764 4.16635 6.5 4.16635C7.78236 4.16635 8.82143 5.20238 8.82143 6.48098C8.82143 7.75959 7.78236 8.79562 6.5 8.79562Z', fill: '#CA2227' })
+      link && React__default.createElement(
+        reactRouterDom.Link,
+        { to: link },
+        this.props.icon && React__default.createElement('img', { src: this.props.icon, width: width || this.state.width, height: height || this.props.height, alt: 'Marker' }),
+        !this.props.icon && React__default.createElement(
+          'svg',
+          { width: width || this.state.width, height: height || this.props.height, viewBox: '0 0 13 18', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
+          React__default.createElement('path', { d: 'M6.5 0C2.91014 0 0 2.90163 0 6.48098C0 10.1529 4.08943 15.5729 5.78129 17.657C6.15271 18.1143 6.84729 18.1143 7.21871 17.657C8.91057 15.5729 13 10.1529 13 6.48098C13 2.90163 10.0899 0 6.5 0ZM6.5 8.79562C5.21764 8.79562 4.17857 7.75959 4.17857 6.48098C4.17857 5.20238 5.21764 4.16635 6.5 4.16635C7.78236 4.16635 8.82143 5.20238 8.82143 6.48098C8.82143 7.75959 7.78236 8.79562 6.5 8.79562Z', fill: '#CA2227' })
+        )
+      ),
+      !link && React__default.createElement(
+        React__default.Fragment,
+        null,
+        this.props.icon && React__default.createElement('img', { src: this.props.icon, width: width || this.state.width, height: height || this.props.height, alt: 'Marker' }),
+        !this.props.icon && React__default.createElement(
+          'svg',
+          { width: width || this.state.width, height: height || this.props.height, viewBox: '0 0 13 18', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
+          React__default.createElement('path', { d: 'M6.5 0C2.91014 0 0 2.90163 0 6.48098C0 10.1529 4.08943 15.5729 5.78129 17.657C6.15271 18.1143 6.84729 18.1143 7.21871 17.657C8.91057 15.5729 13 10.1529 13 6.48098C13 2.90163 10.0899 0 6.5 0ZM6.5 8.79562C5.21764 8.79562 4.17857 7.75959 4.17857 6.48098C4.17857 5.20238 5.21764 4.16635 6.5 4.16635C7.78236 4.16635 8.82143 5.20238 8.82143 6.48098C8.82143 7.75959 7.78236 8.79562 6.5 8.79562Z', fill: '#CA2227' })
+        )
       )
@@ -1557,3 +1573,5 @@ );
 
-  icon: PropTypes.string
+  icon: PropTypes.string,
+
+  link: PropTypes.string
 } : void 0;
@@ -1560,0 +1578,0 @@

package.json

 {
   "name": "react-mad-map",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "React Mad Map",
@@ -46,3 +46,4 @@ "author": "Denisoed",
     "react": "^16.0.0",
-    "react-dom": "^16.0.0"
+    "react-dom": "^16.0.0",
+    "react-router-dom": "^5.0.1"
   },
@@ -49,0 +50,0 @@ "peerDependencies": {

README.md

@@ -6,3 +6,3 @@ # React Map
 
-![](MadMap.jpg)
+![React Map](MadMap.jpg)
 
@@ -136,22 +136,2 @@ > Demo: [https://9r9qc.csb.app](https://9r9qc.csb.app)
 
-### Overlays
-
-`<Map />` takes random React components as its children. The children may have these special props:
-
-**anchor** - At which coordinates `[lat, lng]` to anchor the overlay with the map.
-
-**offset** - Offset in pixels relative to the anchor.
-
-The children get passed these special props:
-
-**left** - Pixels from the left of the map, calculated from `anchor` and `offset`
-
-**top** - Pixels from the top of the map, calculated from `anchor` and `offset`
-
-**mapState** - An object `{ center, zoom, bounds, width, height }` that gets updated at every animation frame.
-
-**latLngToPixel** - A helper `function (latLng, center, zoom)` that returns the position in pixels `[x, y]` for any `[lat, lng]`. The last 2 arguments are optional.
-
-**pixelToLatLng** - A helper `function (pixel, center, zoom)` that converts any pixel coordinates `[x, y]` to `[lat, lng]`. The last 2 arguments are optional.
-
 ### Markers
@@ -167,2 +147,4 @@
 
-**height** - Height custom marker. Default `29`
+**height** - Height custom marker. Default `29`
+
+**link** - Link to the page. Default `null`

src/index.js

 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import { Link } from 'react-router-dom'
 
@@ -1331,3 +1332,5 @@ import parentPosition from './utils/parent-position'
 
-    icon: PropTypes.string
+    icon: PropTypes.string,
+
+    link: PropTypes.string
   }
@@ -1384,3 +1387,3 @@
   render () {
-    const { width, height, left, top, onClick } = this.props
+    const { width, height, left, top, onClick, link } = this.props
 
@@ -1401,8 +1404,22 @@ const style = {
       >
-        {this.props.icon && <img src={this.props.icon} width={width || this.state.width} height={height || this.props.height} alt='Marker' />}
-        {!this.props.icon &&
-          <svg width={width || this.state.width} height={height || this.props.height} viewBox="0 0 13 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M6.5 0C2.91014 0 0 2.90163 0 6.48098C0 10.1529 4.08943 15.5729 5.78129 17.657C6.15271 18.1143 6.84729 18.1143 7.21871 17.657C8.91057 15.5729 13 10.1529 13 6.48098C13 2.90163 10.0899 0 6.5 0ZM6.5 8.79562C5.21764 8.79562 4.17857 7.75959 4.17857 6.48098C4.17857 5.20238 5.21764 4.16635 6.5 4.16635C7.78236 4.16635 8.82143 5.20238 8.82143 6.48098C8.82143 7.75959 7.78236 8.79562 6.5 8.79562Z" fill="#CA2227"/>
-          </svg>
+        {link &&
+          <Link to={link}>
+            {this.props.icon && <img src={this.props.icon} width={width || this.state.width} height={height || this.props.height} alt='Marker' />}
+            {!this.props.icon &&
+              <svg width={width || this.state.width} height={height || this.props.height} viewBox="0 0 13 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M6.5 0C2.91014 0 0 2.90163 0 6.48098C0 10.1529 4.08943 15.5729 5.78129 17.657C6.15271 18.1143 6.84729 18.1143 7.21871 17.657C8.91057 15.5729 13 10.1529 13 6.48098C13 2.90163 10.0899 0 6.5 0ZM6.5 8.79562C5.21764 8.79562 4.17857 7.75959 4.17857 6.48098C4.17857 5.20238 5.21764 4.16635 6.5 4.16635C7.78236 4.16635 8.82143 5.20238 8.82143 6.48098C8.82143 7.75959 7.78236 8.79562 6.5 8.79562Z" fill="#CA2227"/>
+              </svg>
+            }
+          </Link>
         }
+        {!link &&
+          <React.Fragment>
+            {this.props.icon && <img src={this.props.icon} width={width || this.state.width} height={height || this.props.height} alt='Marker' />}
+            {!this.props.icon &&
+              <svg width={width || this.state.width} height={height || this.props.height} viewBox="0 0 13 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M6.5 0C2.91014 0 0 2.90163 0 6.48098C0 10.1529 4.08943 15.5729 5.78129 17.657C6.15271 18.1143 6.84729 18.1143 7.21871 17.657C8.91057 15.5729 13 10.1529 13 6.48098C13 2.90163 10.0899 0 6.5 0ZM6.5 8.79562C5.21764 8.79562 4.17857 7.75959 4.17857 6.48098C4.17857 5.20238 5.21764 4.16635 6.5 4.16635C7.78236 4.16635 8.82143 5.20238 8.82143 6.48098C8.82143 7.75959 7.78236 8.79562 6.5 8.79562Z" fill="#CA2227"/>
+              </svg>
+            }
+          </React.Fragment>
+        }
       </div>
@@ -1409,0 +1426,0 @@ )

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

116879

increased by1.25%

Lines of code

2706

increased by1.31%

Worsened metrics

Dependency count

5

increased by25%

Number of lines in readme file

147

decreased by-10.91%

Dependency changes

• + Addedreact-router-dom@^5.0.1

• + Added@babel/runtime@7.26.0(transitive)

• + Addedhistory@4.10.1(transitive)

• + Addedhoist-non-react-statics@3.3.2(transitive)

• + Addedisarray@0.0.1(transitive)

• + Addedpath-to-regexp@1.9.0(transitive)

• + Addedreact-router@5.3.4(transitive)

• + Addedreact-router-dom@5.3.4(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)

• + Addedresolve-pathname@3.0.0(transitive)

• + Addedtiny-invariant@1.3.3(transitive)

• + Addedtiny-warning@1.0.3(transitive)

• + Addedvalue-equal@1.0.1(transitive)