pip-webui2-locations

Location controls

GPS and location technologies made position determination available for everyone everywhere. Position information today is used in Line-of-Business applications today very frequently. Pip.WebUI.Locations module provides controls to visualize and edit positions. They are built on the of Google Maps and require registered key to be set by developers.

Location view

Shows address or coordinates if address is not available followed by the map with the point. The control can be set to make map collapsable to save some space on screen

Using

Template:

<pip-location [locationPos]="locationPos" [locationName]="locationName"></pip-location>

Initilaized data:

locationPos = {
	coordinates: [
		48.01976,
		37.85854
	]
};

locationName = 'Donetsk, Kadievskaya st.';

Example on the image

Location IP

Control may look exactly as Location view. But instead of position it accepts IP address and uses Google location service to convert it into physical address. This control can be helpful to visualize location of servers or places there users signin into application

Using

<pip-location-ip [ipAddress]="ipAddress" (onExtraInfo)="getExtraInfo($event)"></pip-location-ip>

ipAddress = '109.123.67.37';

getExtraInfo(info) {
	infoKeys = Object.keys(info);
	extraInfo = info;
}

Example on the image

Location edit

Allows to change the location address or coordinates.They can be entered manually or set location by manually picking a point on map, or using current location from the device

Using

Template:

<pip-location-edit [showInput]="showInput" [disabled]="disabled" [locationPos]="locationPos" [locationName]="locationName" (onChangeLocation)="onChangeLocation($event)"></pip-location-edit>

Handler:

onChangeLocation(data) {
	locationPos.coordinates = data.coordinates;
	locationName = data.locationName;
}

Example on the image

Installation

To install this module using npm:

npm install pip-webui2-locations --save

License

This module is released under MIT license and totally free for commercial and non-commercial use.