I am using angular.js and angular-openlayers-directives to make a simple map , so i have my basic mapping application working , the code looks as follows:
var app = angular.module("demoapp", ["openlayers-directive"]); app.controller("DemoController", [ '$scope', function($scope) { angular.extend($scope, { london: { lat: 12.9370699, lon: 77.6244159, zoom: 15, }, defaults: { layers: { main: { source: { type: 'OSM', url: 'http://{a-c}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png' } } }, interactions: { mouseWheelZoom: true }, controls: { zoom: false, rotate: false, attribution: false } } }); } ]); And the HTML code looks like as follows:
Custom parameters example
These are the custom properties applied in this map:
My demo can be seen HERE.
Now what i would really like to add is an extent to the layers of this map of mine , so that tiles beyond a certain coordinates are not loaded. so how do i do this ? i beleive in vanilla JS its pritty simple and strightforward , but just not sure how i would go about doing this in angular , in vanilla JS the code would look something like below:
var coordinate1 = ol.proj.fromLonLat([77.6013, 12.9044]), coordinate2 = ol.proj.fromLonLat([77.6885, 12.9536]); layers.push(new ol.layer.Tile({ visible: false, preload: Infinity, extent:[coordinate1[0], coordinate1[1], coordinate2[0], coordinate2[1]], myattribute : styles, source: new ol.source.BingMaps({ key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3', imagerySet: styles // use maxZoom 19 to see stretched tiles instead of the BingMaps // "no photos at this zoom level" tiles // maxZoom: 19 }) })); So how do i add an extent in angular JS ?
أكثر...
var app = angular.module("demoapp", ["openlayers-directive"]); app.controller("DemoController", [ '$scope', function($scope) { angular.extend($scope, { london: { lat: 12.9370699, lon: 77.6244159, zoom: 15, }, defaults: { layers: { main: { source: { type: 'OSM', url: 'http://{a-c}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png' } } }, interactions: { mouseWheelZoom: true }, controls: { zoom: false, rotate: false, attribution: false } } }); } ]); And the HTML code looks like as follows:
Custom parameters example
These are the custom properties applied in this map:
My demo can be seen HERE.
Now what i would really like to add is an extent to the layers of this map of mine , so that tiles beyond a certain coordinates are not loaded. so how do i do this ? i beleive in vanilla JS its pritty simple and strightforward , but just not sure how i would go about doing this in angular , in vanilla JS the code would look something like below:
var coordinate1 = ol.proj.fromLonLat([77.6013, 12.9044]), coordinate2 = ol.proj.fromLonLat([77.6885, 12.9536]); layers.push(new ol.layer.Tile({ visible: false, preload: Infinity, extent:[coordinate1[0], coordinate1[1], coordinate2[0], coordinate2[1]], myattribute : styles, source: new ol.source.BingMaps({ key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3', imagerySet: styles // use maxZoom 19 to see stretched tiles instead of the BingMaps // "no photos at this zoom level" tiles // maxZoom: 19 }) })); So how do i add an extent in angular JS ?
أكثر...