angularjs-mapbox

v1.0.13

Published

4 years ago

AngularJS MapBox library

0High
0Medium
0Low

sedinson

mapbox angularjs

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) |

To Do

Finish Examples
Finish documentation for geojson
Finish documentation for popup
Develop more stuff for mapboxgl library