Naimikan / angular-mapboxgl-directive

AngularJS directive for Mapbox GL
https://naimikan.github.io/angular-mapboxgl-directive/
MIT License
49 stars 21 forks source link
angular angularjs awesome bower directive javascript map mapbox mapbox-gl mapbox-gl-js maps webgl

version bower version cdnjs version codeclimate license

angular-mapboxgl-directive | Wiki

AngularJS directive for Mapbox GL

Installation

NPM

npm install angular-mapboxgl-directive --save

Bower

bower install angular-mapboxgl-directive --save

Get Started

Include the files in your index.html:

<link href="https://github.com/Naimikan/angular-mapboxgl-directive/blob/master/angular-mapboxgl-directive.css" rel="stylesheet" />

<script src="https://github.com/Naimikan/angular-mapboxgl-directive/raw/master/angular-mapboxgl-directive.min.js"></script>

Or you can include them from CDN:

<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-mapboxgl-directive/X.X.X/angular-mapboxgl-directive.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-mapboxgl-directive/X.X.X/angular-mapboxgl-directive.min.js"></script>

Add mapboxgl-directive module in your AngularJS project:

var app = angular.module('YourProject', ['mapboxgl-directive']);

Usage

mapboxgl
<mapboxgl></mapboxgl>

or

<div mapboxgl></div>
mapboxglCompare
<mapboxgl-compare>
   <mapboxgl></mapboxgl>
   <mapboxgl></mapboxgl>
</mapboxgl-compare>

or

<div mapboxgl-compare>
   <div mapboxgl></div>
   <div mapboxgl></div>
</div>

Developing

Install dependencies, build the source files and preview

git clone https://github.com/Naimikan/angular-mapboxgl-directive.git
npm install & bower install
grunt & grunt preview