AngularJS MapBox library
$ npm install angularjs-mapbox
- 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>
<!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>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
| 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 |
| 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 |
| 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) |
| 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) |
- Finish Examples
- Finish documentation for geojson
- Finish documentation for popup
- Develop more stuff for mapboxgl library