npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ng-geolocator

v1.0.0

Published

Let the user tell you where they are with the aid of HTML5 Geolocation API and Google Maps

Downloads

5

Readme

ngGeolocator

Build Status Coverage Status devDependency Status

Let the user tell you where they are with the aid of HTML5 Geolocation API and Google Maps.

A live demo: http://deiwin.github.io/ngGeolocator/

This project used ChadKillingsworth/geolocation-marker as a starting point.

Installation

npm install --save ng-geolocator

or

bower install --save ng-geolocator

Getting started

See the demo folder for a useful example. The following has just the basics to get you started.

// Add ngGeolocator as a dependency to your module
var yourModule = angular.module('yourModule', ['ngGeolocator']);

// Optionally configure the service to use a Google Maps API Key.
yourModule.config(['ngGeolocatorProvider', function(ngGeolocatorProvider) {
	ngGeolocatorProvider.setGoogleMapsAPIKey('your-api-key-goes-here');
}]);

// Asynchronously load the Google Maps API (into an object with the
// specified map-canvas id) and ask the user's bowser to share the
// user's location. If both of those things have been approved
// and have happened, the promise will be resolved with a Locator object.
var locator;
ngGeolocator.create('map-canvas').then(function(_locator_) {
	// Let's just store the locator for now
	locator = _locator_;
}, function(message) {
	// Something went wrong
	handleError(message);
});

// Now, when the user notifies you (possibly via a confirmation button,
// as done in the demo) that they have specified their location by
// dragging the marker to where they think they are, you can call the
// following to get their location's coordinates:
var location = locator.getLocation();
doSomethingWith(location.lat, location.lng);

Getting fancy

Say you don't like the color I've chosen to use for the accuracy indicator circle. Here's an easy way to customize it to your liking:

yourModule.config(['ngGeolocatorProvider', function(ngGeolocatorProvider) {
	ngGeolocatorProvider.extendStaticCircleOptions({
		fillColor: 'cc99ff', // Mauve
	});
}]);

Custom icons and everything are also possible, but are left as an excercise to the reader. Please see the docs or the code itself for any questions.

Docs

ngGeolocator : object

Kind: global namespace

ngGeolocator.Locator

Kind: static class of ngGeolocator

new Locator(marker)

| Param | Type | Description | | --- | --- | --- | | marker | google.maps.Marker | The marker on the map that indicates the user's location |

locator.getLocation() ⇒ LatLng

Kind: instance method of Locator
Returns: LatLng - The current user's selected position.

ngGeolocator.LocatorService

Kind: static class of ngGeolocator

locatorService.create(canvasID) ⇒ Promise.<Locator>

create will initialize google maps, if it isn't already initialized, and will then draw a map on the specified canvasID. Once the user has accepted to share their location, the map will be centered to that location and a marker will be displayed that the user can move to confirm/specify their actual location. This marker will then be used to create a new Locator object which will then be used to resolve the returned promise.

Kind: instance method of LocatorService

| Param | Type | Description | | --- | --- | --- | | canvasID | string | The elemt ID of the canvas to load the map onto. |

ngGeolocator.LocatorServiceProvider

Kind: static class of ngGeolocator

locatorServiceProvider.setGoogleMapsAPIKey(googleMapsAPIKey)

Configure the service to use the specified Google Maps API Key.

Kind: instance method of LocatorServiceProvider

| Param | Type | | --- | --- | | googleMapsAPIKey | string |

locatorServiceProvider.extendMapOptions(extender)

The google.maps.MapOptions used to initialize the map will be extended using the provided function or object. If the extender is an object it will simply be used to extend (using angular.extend) the options object used to initialize the map. If, instead, the extender is a function, it will be called with the API (google.maps) once Google Maps is loaded. An object used to extend MapOptions is expected as the return value of the function.

Kind: instance method of LocatorServiceProvider

| Param | Type | | --- | --- | | extender | Object | function |

Example

Kind: instance method of LocatorServiceProvider
See: extendMapOptions for more info and examples

locatorServiceProvider.extendStaticCircleOptions()

Extends the google.maps.CircleOptions for the static circle.

Kind: instance method of LocatorServiceProvider
See: extendMapOptions for more info and examples

locatorServiceProvider.extendLocatorMarkerOptions()

Extends the google.maps.MarkerOptions for the locator marker.

Kind: instance method of LocatorServiceProvider
See: extendMapOptions for more info and examples

ngGeolocator.LatLng : Object

Kind: static typedef of ngGeolocator
Properties

| Name | Type | Description | | --- | --- | --- | | lat | number | The latitude. | | lng | number | The longitude. |

Demo !

Clone this repo, run npm install and then start the demo server with grunt demo and go to http://localhost:8000.