React Offline Maps

This module allows users to create maps without any internet connectivity - simply using overlays of images.
It makes use of svg-pan-zoom to display this map in a very user-friendly way.

Install

$3

``sh
npm install --save react-offline-map-2
`

Props

|Prop|Default|Type|Description|
|-----|------|-----|-----|
| width | required | Number | Width of the viewer displayed on screen |
| height | required | Number | Height of the viewer displayed on screen |
| mapQuality | 'medium' | String | Creates a map of low, medium or high quality |
| images | [] | Array | Images to be displayed on the screen |
| text | [] | Array | Text to be displayed on the screen |
| polylines | [] | Array | Polylines to be displayed on the screen |
| circles | [] | Array | Circles to be displayed on the screen |
| buttons | [] | Array | Buttons to be displayed on the screen |
| polygons | [] | Array | Polygons to be displayed on the screen |
| showWorldMap | true | bool | Decides whether background includes world map |
| initialPos | {'lat': 0, 'lng': 0, 'zoom': 1} | Object | Sets the initial position of the viewer |
| bounds | {'topLat': 90, 'topLng': -180, 'bottomLat': -90, 'bottomLng': 180} | Object | Sets the bounds for a viewer |
| onClick | function | func | Allows a callback function. Returns Evt in form {lat: [latitude of click], lng: [longitude of click], evt: [mouseEvent] |


NOTE: all coordinates given in Lat/Long (UTM not accepted)


##### mapQuality
must be a string of value 'low', 'medium' or 'high'. No other options
##### images
in form:
[{'url': String, 'topLat': num, 'topLng', num, 'bottomLat', num, 'bottomLng': num], ..., ]
such that top left point of image is at coordinate {topLat, topLng},
bottom left of image is at coordinate {bottomLat, bottomLng}

##### polylines
in form:
[{'points': ["lat1,lng1", "lat2,lng2", lat3,lng3", ...], 'color': String, 'width': num}, ..., ]
where the first line will draw points between coordinates {lat1,lng1}, {lat2,lng2}, {lat3,lng3}, ...

##### circles
in form:
[{'lat': num, 'lng': num, 'r', num, 'fill', String]}, ..., ]
such that each circle is centred at coordinate {lat,lng} with radius r

##### polygon
in form:
[{'points': ["lat1,lng1", "lat2,lng2", lat3,lng3", ...], 'fill': String}, ..., ]
where the first polygon will draw points with coordinates {lat1,lng1}, {lat2,lng2}, {lat3,lng3}, ... and filled using fill color.
This is essentially the same as polyline, but the shape is filled.

##### buttons
in form:
[{'name': String, 'lat': num, 'lng', num, 'zoom', num]}, ..., ]
such that a button is created with title 'name' (same as {button.name}).
When clicked, button will jump the viewer to coordinate {lat,lng}, with zoom=button.zoom.

##### bounds
Helps with rendering if, for example, you only want to view a very small area on the map. Shows only a portion of the map.
Eg. If you just want to view UK, you would put bounds={{'topLat': 60, 'topLng': -15, 'bottomLat': 50, 'bottomLng': 5}}
NOTE: "top" and "bottom" refer to measurements at the top-left and bottom-right corners of an image respectively.
Therefore, although it may seem counter-intuitive, topLat > bottomLat and bottomLng > topLng.
In a normal map (default), top-right corner will be (90,-180) and bottom-right will be (-90,180) -- measurements in form (lat,long).
Therefore, default values are {'topLat': 90, 'topLng': -180, 'bottomLat': -90, 'bottomLng': 180}.

Examples of Use

$3

`javascript
import React from 'react';
import Map from 'react-offline-map'

class Basic extends React.Component {
return (

}
`

$3

`javascript
import React from 'react';
import Map from 'react-offline-map'
import iraq from '../images/iraq.png';
import sanfran from '../images/sanfran.png';
import mojave from '../images/mojave.png';
import baja from '../images/baja_peninsula.png';
import bajaZoom from '../images/baja_peninsula_zoom.png';


class Advanced extends React.Component {
constructor(props) {
super(props);
this.state = ({
showWorldMap: true
})
}

updateMap = () => {
this.setState({
showWorldMap: !this.state.showWorldMap
})
};

printClick = (event) => {
console.log("CLICK");
console.log(event);
};

render() {
var images = [
{'url': mojave, 'topLat': 35.184619089603586, 'topLng': -116.19619200291318, 'bottomLat': 35.173016651002655, 'bottomLng': -116.18129480877964},
{'url': iraq, 'topLat': 33.61611111, 'topLng': 44.09638889, 'bottomLat': 33.01611111, 'bottomLng': 44.69638889},
{'url': sanfran, 'topLat': 38.28555556, 'topLng': -122.80972222, 'bottomLat': 37.28555556, 'bottomLng': -121.81000000},
{'url': baja, 'topLat': 32.533305, 'topLng': -117.123229, 'bottomLat': 22.837566, 'bottomLng': -109.396867},
{'url': bajaZoom, 'topLat': 32.533305, 'topLng': -117.123229, 'bottomLat': 31.981218, 'bottomLng': -115.213926}
];

var averageLatMojave = (35.184619089603586 + 35.173016651002655) / 2;
var averageLngMojave = (-116.19619200291318 + -116.18129480877964) / 2;

var averageLatIraq = (33.61611111 + 33.01611111) / 2;
var averageLngIraq = (44.09638889 + 44.69638889) / 2;

var averageLatSanFran = (38.28555556 + 37.28555556) / 2;
var averageLngSanFran = (-122.80972222 + -121.81000000) / 2;

var averageLatBaja = (32.533305 + 22.837566) / 2;
var averageLngBaja = (-117.123229 + -109.396867) / 2;

var averageLatBajaZoom = (32.533305 + 31.981218) / 2;
var averageLngBajaZoom = (-117.123229 + -115.213926) / 2;

var buttons = [
{'name': 'Example Zoom 1: Baja (x10)', 'lat': averageLatBaja, 'lng': averageLngBaja, 'zoom': 10},
{'name': 'Example Zoom 2: Baja zoom (x100)', 'lat': averageLatBajaZoom, 'lng': averageLngBajaZoom, 'zoom': 100},
{'name': 'Example Zoom 3: San Francisco (x200)', 'lat': averageLatSanFran, 'lng': averageLngSanFran, 'zoom': 200},
{'name': 'Big zoom: Iraq (x400)', 'lat': averageLatIraq, 'lng': averageLngIraq, 'zoom': 400},
{'name': 'Extreme zoom: Mojave desert (x20000)', 'lat': averageLatMojave, 'lng': averageLngMojave, 'zoom': 20000}
];

var circles = [
{'lat': 32.1322, 'lng': -116.3452, 'r': 0.1, 'fill': 'red'},
{'lat': 32.1022, 'lng': -115.7452, 'r': 0.1, 'fill': 'red'},
{'lat': 32.2722, 'lng': -115.8252, 'r': 0.05, 'fill': 'red'},
];

var polylines = [
{'points': ['32.1322,-116.3452', '32.1022,-115.7452', '32.2722,-115.8252', '32.1322,-116.3452'], 'color': 'blue', 'width': 0.05},
{'points': ['35.177319,-116.194', '35.18,-116.192', '35.177319,-116.19', '35.18,-116.188', '35.177319,-116.186'],
'color': 'blue', 'width': 0.00005},
];

var polygons = [
{'points': ['35.179319, -116.1834', '35.181319, -116.1834', '35.181319, -116.1854', '35.179319, -116.1854'], 'fill': 'yellow'}
];

return (

Toggle world map

);
}
}

export default Advanced;

``

$3

This is still a very new project, and there's many more features I could add if people feel they are necessary.
Feel free to open an issue with any bugs or enhancements you think I should work on!