Angularjs-mapbox NPM

angular-mapbox

AngularJS MapBox library

Installation

$   npm install angularjs-mapbox

Quick Start

In your html, import the library <script src="node_modules/angularjs-mapbox/index.js"></script>
Include the css (or scss) in your html <link rel="stylesheet" href="node_modules/angularjs-mapbox/angular-mapbox.css"></link>

HTML Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="node_modules/angularjs-mapbox/angular-mapbox.css">
</head>
<body ng-app="baseApp">
    <h2>Your amazing site goes here</h2>
    <div ng-controller="mapController">
        ...
    </div>

    <script src = "node_modules/angular/angular.min.js"></script>
    <script src="node_modules/angularjs-mapbox/index.js"></script>
    <script src="/path/to/your/javascript.js"></script>
</body>
</html>

Import in the global modules' section:

var app = angular.module('baseApp', [
    'angularMapbox'
]);

Add the key in the config section:

app.config(
    [
        'angularMapboxConfigProvider', 
        function(angularMapboxConfigProvider) {
            angularMapboxConfigProvider.config({
                accessToken: '<YOUR ACCESS TOKEN>'
            });
        }
    ]
);

In your controller, declare some variables you'll use in the map for center and zoom

app.controller('mapController', function($scope) {
    $scope.map = {
        zoom: 12,
        center: [ -74.804486, 10.980780 ]
    };
});

Create a new map!

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="node_modules/angularjs-mapbox/angular-mapbox.css">
</head>
<body ng-app="baseApp">
    <h2>Your amazing site goes here</h2>
    <div ng-controller="mapController">
        <angular-mapbox-map zoom="map.zoom" center="map.center" design="'mapbox://styles/mapbox/dark-v9'">
        </angular-mapbox-map>
    </div>

    <script src="node_modules/angular/angular.min.js"></script>
    <script src="node_modules/angularjs-mapbox/index.js"></script>
    <script src="/path/to/your/javascript.js"></script>
</body>
</html>

Marker Example

You can create one or more markers in the map:

<angular-mapbox-map zoom="map.zoom" center="map.center" design="'mapbox://styles/mapbox/dark-v9'">
    <angular-mapbox-marker ng-repeat="marker in markers" model="marker" identificator="'id'"></angular-mapbox-marker>
</angular-mapbox-map>

app.controller('mapController', function($scope) {
    $scope.map = {
        zoom: 12,
        center: [ -74.804486, 10.980780 ]
    };

    $scope.markers = [{
        id: 'marker-1',
        lat: -74.804486,
        lng: 10.980780
    }, {
        id: 'marker-2',
        lat: -74.812486,
        lng: 10.985781
    }];
});

You can see more examples here

Directive Reference

Map angular-mapbox-map

attribute	type	value
zoom	numeric	The number of zoom
center	array	longitude, latitude
events	object	Refer to documentation for more information. See examples of how to use it.
design	string	Some of predefined styles: - mapbox://styles/mapbox/streets-v10 - mapbox://styles/mapbox/outdoors-v10 - mapbox://styles/mapbox/light-v9 - mapbox://styles/mapbox/dark-v9 - mapbox://styles/mapbox/satellite-v9 - mapbox://styles/mapbox/satellite-streets-v10 - mapbox://styles/mapbox/navigation-preview-day-v2 - mapbox://styles/mapbox/navigation-preview-night-v2 - mapbox://styles/mapbox/navigation-guidance-day-v2 - mapbox://styles/mapbox/navigation-guidance-night-v2

Marker angular-mapbox-marker

attribute	type	value
model	object	an object with the required values: lat, lng and additional a id field that should be unique. See examples for more information
identificator	string	the value inside the model who has the identificator name (unique). Example: 'id'
events	object	Refer to documentation for more information. See ./examples of how to use it. Additional, you can set events like click to the addEventListener include on the market itself. See this documentation

Circle angular-mapbox-circle

attribute	type	value
center	Array	An array with longitude, latitude
identificator	string	A unique name for the object. Example: 'my-circle-id'
radius	number	The radius of the circle (see unit)
unit	string	unit used on the radius: px (pixels), m (meters), km (kilometers)
layout	object	Options for layout (See documentation)
paint	object	Options for paint (See documentation)

GeoJSON angular-mapbox-geojson

attribute	type	value
identificator	string	the value inside the model who has the identificator name (unique). Example: 'id'
type	string	The type of the Layer you want to create (See documentation)
data	object	The source of the geojson. See documentation
layout	object	Options for layout (See documentation)
paint	object	Options for paint (See documentation)