feat: remove reverse geocoding on first load and map pointer movement…

… for internal usage (#31) * feat: check lat long * feat: gmap * feat: comment geocoding * feat: cleanup * publish to private registry (#33) * feat(private-registry): private registry for feat/check-lat-long branch * feat(private-registry): private registry for feat/check-lat-long branch * feat(private-registry): private registry for feat/check-lat-long branch * feat(private-registry): private registry change * chore(5.0.0): release 5.0.0 * doc(README): readme.md file update --------- Co-authored-by: Sandeep Rawat <> --------- Co-authored-by: Sandeep Rawat <61680562+sandeep-r-bharatpe@users.noreply.github.com>
bharatpe · May 2, 2024 · ba251de · ba251de
1 parent 8e56078
commit ba251de
Show file tree

Hide file tree

Showing 16 changed files with 330 additions and 49 deletions.
diff --git a/README.md b/README.md
@@ -10,13 +10,13 @@ Flexible react google map with more options of search, pick & select.
 # Getting Started
 
 ```javascript
-yarn add g-mapify
+yarn add @bp/g-mapify
 ```
 
 or
 
 ```javascript
-npm i g-mapify
+npm i @bp/g-mapify
 ```
 
 
@@ -41,8 +41,8 @@ Basic use:
 ## Example with options (Search Map)
 ```javascript
 import  React from  'react';
-import { GMapify } from  'g-mapify';
-import  'g-mapify/dist/index.css';
+import { GMapify } from  '@bp/g-mapify';
+import  '@bp/g-mapify/dist/index.css';
 
 const  App = () => {
     const  onMapSelect = (status, data) => console.warn(status, data);
@@ -60,8 +60,8 @@ const  App = () => {
 ## Example with multiple markers
 ```javascript
 import  React from  'react';
-import { GMapify } from  'g-mapify';
-import  'g-mapify/dist/index.css';
+import { GMapify } from  '@bp/g-mapify';
+import  '@bp/g-mapify/dist/index.css';
 
 const  App = () => {
 
@@ -117,8 +117,8 @@ Support ref to access some functions directly.
 
 ```javascript
     import  React from  'react';
-    import { GMapify } from  'g-mapify';
-    import  'g-mapify/dist/index.css';
+    import { GMapify } from  '@bp/g-mapify';
+    import  '@bp/g-mapify/dist/index.css';
 
     const  App = () => {
         const mapRef = useRef();
@@ -153,7 +153,7 @@ Functions are accessible directly:
 ## Address Formatter
 You can get City, Pincode, State etc. from *address_components* using **addressFormatter** method. This method transfrom *address_components* array data into *object*.
 ```javascript
-import { GMapify, AddressFormatter } from  'g-mapify'
+import { GMapify, AddressFormatter } from  '@bp/g-mapify'
 
 const  onMapSelect = (status, data) => {
     if (status) {

diff --git a/dist/README.md b/dist/README.md
@@ -0,0 +1,188 @@
+# g-mapify [![NPM version](https://img.shields.io/npm/v/g-mapify.svg)](https://www.npmjs.com/package/g-mapify) [![Downloads](http://img.shields.io/npm/dm/g-mapify.svg)](https://npmjs.org/package/g-mapify) [![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)
+Flexible react google map with more options of search, pick & select.
+
+![g-mapify](https://raw.githubusercontent.com/bharatpe/g-mapify/master/g-mapify.png)
+
+
+![g-mapify](https://raw.githubusercontent.com/bharatpe/g-mapify/master/example/images/g-mapify.png)
+
+
+# Getting Started
+
+```javascript
+yarn add g-mapify
+```
+
+or
+
+```javascript
+npm i g-mapify
+```
+
+
+## Usage
+Basic use:
+```javascript
+    import  React from  'react';
+    import { GMapify } from  'g-mapify';
+    import  'g-mapify/dist/index.css';
+
+    const  App = () => {
+	    return (
+		    <GMapify appKey="[google-map-key]" />
+	    )
+    }
+```
+
+### Example: Basic map
+![basic map image](https://raw.githubusercontent.com/bharatpe/g-mapify/master/example/images/basicmap.png?raw=true)
+
+
+## Example with options (Search Map)
+```javascript
+import  React from  'react';
+import { GMapify } from  'g-mapify';
+import  'g-mapify/dist/index.css';
+
+const  App = () => {
+    const  onMapSelect = (status, data) => console.warn(status, data);
+
+    return (
+        <GMapify appKey="[google-map-key]" hasSearch onSelect={onMapSelect}/>
+    )
+}
+```
+ #### Note
+ If *status* is getting *false* that means something happened bad on location search.
+
+![Map Search image](https://raw.githubusercontent.com/bharatpe/g-mapify/master/example/images/search-map-desktop.png?raw=true)
+
+## Example with multiple markers
+```javascript
+import  React from  'react';
+import { GMapify } from  'g-mapify';
+import  'g-mapify/dist/index.css';
+
+const  App = () => {
+
+    const markers = [
+        [28.4165425, 77.0437857, "Hello 1"],
+        [28.415671, 77.0520993, `<div><h3>Southcity 2</h3> <img src="https://www.rentomojo.com/blog/wp-content/uploads/2019/07/shutterstock_1298400742.jpg" height="140"/> </div>`],
+        [28.4175717, 77.05284840000002]
+    ]
+
+    const  onMapSelect = (status, data) => console.warn(status, data);
+
+    return (
+        <GMapify 
+        appKey="[google-map-key]" 
+        customMarkers={markers}
+        autoCenter={false}
+        onSelect={onMapSelect}/>
+    )
+}
+```
+
+![Map Mutiple markers image](https://raw.githubusercontent.com/bharatpe/g-mapify/master/example/images/markers-map.png?raw=true)
+
+
+## Options
+|  Props                        | Description                                           | Default value
+|-------------------------------|-------------------------------------------------------|-------------------------------|
+|appKey (Mandatory)             | google map app key                                    | It's a mandatory value
+|lat                            | default latitude of map                               | 28.7041
+|lng                            | default logitude of map                               | 77.1025
+|mapOptions                     | google map options that you can change or add more    | zoom:  15, zoomControl:  false, mapTypeControl:  false, fullscreenControl:  false, streetViewControl:  false, clickableIcons:  false, mapTypeId:  "roadmap"
+|libraries                      | add more funcationality on google map                 | places
+|mapClassName                   | custom class name for map element                     | None
+|hasMarker                      | show marker in map                                    | true
+|markerIcon                     | map marker icon                                       | Blue marker icon
+|autoCenter                     | Auto center map on move or zoom                       | true
+|customMarkers                  | Multiple custom markers to mark on map                | [] (Example :  [[lat, lng, content], [lat, lng, content], ...] )
+|allowSinglePopup               | Allow to open single popup on click custom marker     | true
+|hasSearch                      | apply search in map                                   | false
+|mapSearchPlace                 | map search input box place (required a valid selector name like (#id, .class)) | bottom of the map
+|debounceTime                   | search debounce time (unit *ms*)                      | 2000
+|inputClassName                 | custom class name for Search input                    | None
+|searchPlaceHolder              | placeholder of search box                             | Search here
+|searchClassName                | custom class name of search container                 | None
+|onSelect                       | trigger whenever map position changed (return *status: [true/false], data: [map data object], mapStatus: [map native status]*)| 
+
+#### Note 
+When use customMarkers (More than 1) - Make sure autoCenter, hasSearch are set to false. Which dosen't make sense any way with multiple markers.
+
+
+## Using Ref (v2.3.0)
+Support ref to access some functions directly.
+
+```javascript
+    import  React from  'react';
+    import { GMapify } from  'g-mapify';
+    import  'g-mapify/dist/index.css';
+
+    const  App = () => {
+        const mapRef = useRef();
+
+        const getLatLongByName = async () => {
+            if (mapRef.current) {
+                try {
+                    const result = await mapRef.current.latLongFromQuery('BharatPe Office Delhi');
+                    const lat = result[0]?.geometry.location.lat();
+                    const lng = result[0]?.geometry.location.lng();
+                } catch (e) {
+                    // handle error
+                }
+            }
+        };
+
+	    return (
+            <>
+                <button onClick={getLatLongByName}>BharatPe Office Location</button>
+                <GMapify ref={mapRef} appKey="[google-map-key]" />
+            </>
+	    )
+    }
+```
+Functions are accessible directly:
+
+|  Function                     | Description                                              | Parameters                    | Return Value
+|-------------------------------|----------------------------------------------------------|-------------------------------|-------------------------
+|latLongFromQuery               | Get Map data from address string without showing search  | string                        |  `Promise<map data>`
+
+
+## Address Formatter
+You can get City, Pincode, State etc. from *address_components* using **addressFormatter** method. This method transfrom *address_components* array data into *object*.
+```javascript
+import { GMapify, AddressFormatter } from  'g-mapify'
+
+const  onMapSelect = (status, data) => {
+    if (status) {
+        console.warn('Map Data', data);
+
+        // get formatted address from google map address_components
+        const  formattedAddress = AddressFormatter(data.address_components);
+        console.warn('formated address', formattedAddress);
+    }
+};
+```
+
+## Refer example for all 3 map variations
+
+![Map variations image](https://raw.githubusercontent.com/bharatpe/g-mapify/master/example/images/example.png?raw=true)
+
+
+
+# Releases
+Here [Releases](https://github.com/bharatpe/g-mapify/blob/master/releases.md)
+
+    
+## Note: For Contributors
+This repo build with [create-react-library](https://github.com/transitive-bullshit/create-react-library)
+
+
+## Contributors
+Here [Contributors](https://github.com/bharatpe/g-mapify/graphs/contributors)
+
+
+## License
+ISC [BharatPe TM](https://github.com/BharatPe)
diff --git a/dist/index.d.ts b/dist/index.d.ts
@@ -0,0 +1,5 @@
+declare module '@bp/g-mapify' {
+	const GMapify: any;
+	const AddressFormatter: any;
+	export { GMapify, AddressFormatter };
+}