Skip to content
This repository was archived by the owner on Apr 10, 2024. It is now read-only.

sedinson/angular-mapbox

BranchesTags

Repository files navigation

angular-mapbox

AngularJS MapBox library

Installation

$   npm install angularjs-mapbox

Quick Start

  1. In your html, import the library <script src="proxy.php?url=https%3A%2F%2Fgithub.com.%2Fnode_modules%2Fangularjs-mapbox%2Findex.js"></script>
  2. Include the css (or scss) in your html <link rel="stylesheet" href="proxy.php?url=https%3A%2F%2Fgithub.com.%2Fnode_modules%2Fangularjs-mapbox%2Fangular-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>
  1. Import in the global modules' section:
var app = angular.module('baseApp', [
    'angularMapbox'
]);
  1. Add the key in the config section:
app.config(
    [
        'angularMapboxConfigProvider', 
        function(angularMapboxConfigProvider) {
            angularMapboxConfigProvider.config({
                accessToken: '<YOUR ACCESS TOKEN>'
            });
        }
    ]
);
  1. 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 ]
    };
});
  1. 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

About

AngularJS MapBox library

Resources

Readme
Activity

Stars

3 stars

Watchers

1 watching

Forks

1 fork
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages