angular-openlayers-directive markers
HTML
<script src="http://tombatossals.github.io/angular-openlayers-directive/bower_components/angular/angular.min.js"></script>
<script src="http://tombatossals.github.io/angular-openlayers-directive/bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script src="http://openlayers.org/en/v3.10.1/build/ol-debug.js"></script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.10.1/css/ol.css">
<script src="https://rawgit.com/tombatossals/angular-openlayers-directive/latest/dist/angular-openlayers-directive.js"></script>
<body ng-controller="DemoController">
<openlayers class="col s12" height="400px" custom-layers="true" zoom="5" ol-center="center">
<ol-layer name="{{ layer.name }}" ol-layer-properties="layer" ng-repeat="layer in layers|filter: { active: true}"></ol-layer>
</openlayers>
</body>
JavaScript
var app = angular.module('demoapp', ['openlayers-directive']);
app.controller('DemoController', ['$scope', function($scope) {
angular.extend($scope, {
center: {
lat: 39.92,
lon: 116.38,
zoom: 3
},
layers: [
{
name: 'Tomtommaps',
active: true,
source:{
url:
'http://api.tomtom.com/map/0/tile/{x}/{y}/{z}.PNG?key=bhf8jx2cm6536kty3rgpu325&settings=global-decarta',
type: 'OSM',
layerOptions: {
apikey: 'bhf8jx2cm6536kty3rgpu325'
}}
},
{
name: 'OpenStreetMap',
active: false,
source: {
type: 'OSM'
}
},
{
name: 'OpenCycleMap',
active: false,
source: {
type: 'OSM',
url: 'http://{a-c}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png',
attribution: 'All maps © <a href="http://www.opencyclemap.org/">OpenCycleMap</a>'
}
},
{
name: 'MapBox Night',
active: false,
source: {
type: 'TileJSON',
url: 'https://api.tiles.mapbox.com/v3/examples.map-0l53fhk2.jsonp'
}
},
{
name: 'MapBox Terrain',
active: false,
source: {
type: 'TileJSON',
...