Merge pull request #96 from Detaysoft/map-feature

LocationMessage mapURL and staticURL options added.

Author: abdurrahmanekr

README.md

@@ -462,6 +462,8 @@ import { LocationMessage } from 'react-chat-elements'
     data={{
         latitude: '37.773972',
         longitude: '-122.431297',
+        // staticURL: '<optional>',
+        // mapURL: '<optional>'
     }}/>
 ```
 

example/App.js

@@ -110,6 +110,7 @@ export class App extends Component {
                         height: 300,
                         latitude: '37.773972',
                         longitude: '-122.431297',
+                        staticURL: 'https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/pin-s-circle+FF0000(LONGITUDE,LATITUDE)/LONGITUDE,LATITUDE,ZOOM/270x200@2x?access_token=KEY',
                     },
                     onLoad: () => {
                         console.log('Photo loaded');

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-chat-elements",
-  "version": "10.4.3",
+  "version": "10.5.0",
   "description": "Reactjs chat components",
   "author": "Avare Kodcu <abdurrahmaneker58@gmail.com>",
   "main": "dist/main.js",

src/LocationMessage/LocationMessage.js

@@ -16,8 +16,8 @@ export class LocationMessage extends Component {
     buildURL(url) {
         var center = this.props.data || {};
 
-        return url.replace('LATITUDE', center.latitude)
-                  .replace('LONGITUDE', center.longitude)
+        return url.replace(/LATITUDE/g, center.latitude)
+                  .replace(/LONGITUDE/g, center.longitude)
                   .replace('MARKER_COLOR', this.props.markerColor)
                   .replace('ZOOM', this.props.zoom)
                   .replace('KEY', this.props.apiKey);
@@ -34,19 +34,21 @@ export class LocationMessage extends Component {
     }
 
     render() {
+        const data = this.props.data || {};
+
         return (
             <div className='rce-container-lmsg'>
                 <a
                     onClick={this.props.onOpen}
                     target={this.props.target}
-                    href={this.props.href || this.props.src || this.buildURL(MAP_URL)}
+                    href={this.props.href || this.props.src || this.buildURL(data.mapURL || MAP_URL)}
                     className={this.className()}>
                     <img
                         onError={this.props.onError}
                         className='rce-mbox-location-img'
                         src={
                             this.props.src ||
-                            this.buildURL(STATIC_URL)
+                            this.buildURL(data.staticURL || STATIC_URL)
                         }/>
                 </a>
                 {