I am using the angular-leaflet-directive. Is there an option to change the opacity of a layer?
With 'regular' leaflet I can use layer.setOpacity(0.5). But there seems to be no option in the angular-leaflet-directive.
Edit:
here is my leaflet configuration:
angular.module('epic-taxi')
.controller('MainController', ['$scope', function($scope) {
$scope.initMap = function() {
angular.extend($scope, {
newYork: {
lat: 40.7304783951045,
lng: -73.98880004882812,
zoom: 12
},
layers: {
baselayers: {
mapbox_light: {
name: 'Light',
type: 'xyz',
url: 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png'
}
},
overlays: {
subway: {
name: 'Subway',
visible: true,
type: 'group',
opacity: 0.1 // not working
}
}
}
});
};
}]);
I want to change the opacity of the 'subway' overlay which contains multiple paths.
It looks like this is not implemented yet:
https://github.com/tombatossals/angular-leaflet-directive/issues/251
Thanks to Jonatas Walker for pointing it out!
Did you read their docs?
app.controller("CenterController", [ '$scope', function($scope) {
angular.extend($scope, {
center: {
lat: 40.095,
lng: -3.823,
zoom: 4,
opacity: 0.5
},
defaults: {
scrollWheelZoom: false
}
});
}]);
Try using this:
overlays: {
subway: {
name: 'Subway',
visible: true,
type: 'group',
layeroptions: {
opacity: 0.1
}
},
}
Related
I'm working on a project with angular JS and i need to make a list of radio buttons to allow the user change the basemap. But i get the list without the circle of the radio button. My controller is like so:
(function() {
'use strict';
angular
.module('gdrtApp')
.controller('MapController', MapController);
MapController.$inject = ['$scope', '$http', 'olData'];
function MapController ($scope, $http, olData) {
angular.extend($scope, {
center: {
lat: 47.383474,
lon: 1.329346,
zoom: 6,
autodiscover: true
},
layers: [
{
name: 'OpenStreetMap',
active: true,
source: {
type: 'OSM',
url: "http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png",
attribution: '© OpenStreetMap contributors'
}
},
{
name: 'Stamen',
active: false,
source: {
type: 'Stamen',
layer: 'terrain'
}
},
{
name: 'Bing Maps Road',
active: false,
source: {
name: 'Bing Maps',
type: 'BingMaps',
key: 'Aj6XtE1Q1rIvehmjn2Rh1LR2qvMGZ-8vPS9Hn3jCeUiToM77JFnf-kFRzyMELDol',
imagerySet: 'Road'
}
},
{
name: 'Mapbox Geography Class',
active: false,
source: {
type: 'TileJSON',
url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.jsonp'
}
}
],
changeLayer: function(layer) {
$scope.layers.map(function(l) {
l.active = (l === layer);
});
}
});
}
})();
My html file is like below:
<nav id="couches">
<md-radio-group>
<md-radio-button ng-repeat="layer in layers" ng-click="changeLayer(layer)">{{ layer.name }}<br/></md-radio-button>
</md-radio-group>
</nav>
When i execute, i get just list of the names of the layers and when i click on a layer's name i see the layer correctly. But no radio buttons ! What should i fix to solve this problem?
in HTML my map is defnied as this
<leaflet bounds="map.spatial_bounds_card" layers="map.layers_card" height="200px" ></leaflet>
in the controller, I expand the angular scope, to define bounds and layers. I dont know how to access the leaflet map, in order to add OverlayItems to it. Currently I have created a rectangle, but its not shown on the map.
function Ctrl($scope, leafletBoundsHelpers, leafletDrawEvents) {
var drawnItems2 = new L.FeatureGroup();
angular.extend($scope, {
map: {
spatial_bounds_card: {},
layers_card: {
baselayers: {
osm: {
name: 'OpenStreetMap',
url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
type: 'xyz'
}
}
},
drawOptions: {
position: "bottomright",
draw: {
polyline: false,
polygon: false,
circle: false,
rectangle: {
metric: false,
showArea: true,
shapeOptions: {
color: 'blue'
}
},
marker: false
},
edit: {
featureGroup: drawnItems2,
remove: false
}
},
defaults: {
scrollWheelZoom: false
}
}
});
var bb = L.latLngBounds($scope.filters.spatial.params.southwest, $scope.filters.spatial.params.northeast);
console.log(bb);
var selectedBoundingBox = new L.rectangle(bb,
{
color: 'blue'
});
selectedBoundingBox.addTo($scope.map); // <-- error here
}
I do get this error when running the code:
angular.js:13920 TypeError: t.addLayer is not a function
at e.addTo (leaflet.js:7)
at new FilterSpatialCardCtrl (filter_spatial_card.controller.js:50)
at Object.invoke (angular.js:4718)
at $controllerInit (angular.js:10354)
at nodeLinkFn (angular.js:9263)
at angular.js:9673
at processQueue (angular.js:16383)
at angular.js:16399
at Scope.$eval (angular.js:17682)
at Scope.$digest (angular.js:17495)
In your code there is over head, extra parameters too. Make it as simple as possible.
like:
angular.extend($scope, {
center: {
lat: 54.559322,
lng: -5.767822,
zoom: 14
},
defaults: {
maxZoom: 25,
minZoom: 1,
path: {
weight: 10,
color: '#800000',
opacity: 1
}
}
});
var markersFeatureGroup = new L.FeatureGroup();
leafletData.getMap()
.then(function(map) {
var latlang = L.latLng(50.5, 30.5);
var circleobj = L.rectangle([[54.559322, -5.767822], [54.560900, -5.760000]],{
color: 'blue'
}).bindLabel("Hello World", { direction: 'bottom', clickable: "interactive" });//use left, left, auto,
markersFeatureGroup.addLayer(circleobj);
map.addLayer(markersFeatureGroup);
});
Refer Jsfiddle for more information : http://jsfiddle.net/nidhiarya1245/5hukx0g5/
I have this tabset:
<tabset justified="true" class="tabsetnowrap">
<tab ng-repeat="tab in tabshomepage track by $index" heading="{{tab.title}}" ng-click="homePageNavigate(tab.type)" active="tab.active" disabled="tab.disabled">
</tab>
It is created in a angular controller:
$scope.tabshomepage = [];
$scope.tabshomepage.push(
{ title: 'Hjem', type: 'HOM', order: 1, active: true, disabled: false, color: 'black' },
{ title: 'Dirty', type: 'DIR', order: 2, active: false, disabled: false, color: 'purple' },
{ title: 'Dating', type: 'DAT', order: 3, active: false, disabled: false, color: 'green' },
{ title: 'Bloggers', type: 'SOC', order: 4, active: false, disabled: false, color: 'lblue' },
{ title: 'Konto', type: 'ACO', order: 5, active: false, disabled: false, color: 'black' },
{ title: 'Om os', type: 'ABU', order: 6, active: false, disabled: false, color: 'black' },
{ title: 'Kontakt og FAQ', type: 'COF', order: 7, active: false, disabled: false, color: 'black' }
);
When a click is done on a tab, then the homePageNavigate function is performed.
$scope.homePageNavigate = function (type) {
if(type == 'DIR'){
//Perform a #Url.Action("Index", "Dirty", null)"
}
etc...
};
In that functin I want to call a mvc method: #Url.Action("Index", "Dirty", null)", and return a view("index")
What is best way to solve this problem?
Any workarounds? Or a simple solution to this?
I've done something similar before by performing a bit of configuration in angular, through razor, on page load:
<script>
(function () {
angular.module('App').value('paths', {
home: '#Url.Action("Index", "Dirty", null)'
// more paths here
});
})();
</script>
Then you can inject and use paths anywhere within your angular app.
eg. Inside a controller called 'myCtrl`
angular.module('App').controller('myCtrl', ['paths', function(paths) {
// you can use paths.home here
}]);
It's quite simple to invoke ASP.Net MVC Controller action method using AngularJS as follows
In Javascript I wrote
var app = angular.module('MyApp', []);
angular.module('MyApp', [])
.controller('MyController', ['$scope', '$http', function ($scope,
$http) {
$scope.search = function () {
$http({
method: "GET",
url: "/home/GetData"
}).then(function mySuccess(response) {
$scope.name = response.data;
}, function myError(response) {
$scope.name = response.statusText;
});
}
}]);
In HTML part, I wrote
<button ng-click="search()">Get Data</button>
In Controller Action, I wrote return Json("You caught AngularJS", JsonRequestBehavior.AllowGet);
I want to put a legend, but I don´t know why it doesn´t appear. Also, I want to put the database in the fragments of my pie charts.
myapp.controller('myctrl', function ($scope) {
var data = [
['APP Android', 45.0],
['APP Ios', 26.8],
]
$scope.highchartsNG = {
options: {
chart: { type: 'pie'}
},
legend: {
enabled: true
},
series: [ {
name: 'Avisos',
innerSize: '50%'
},
{
name: 'Plataforma',
size: '80%',
innerSize: '65%',
showInLegend: false,
data: data
}],
loading: false
}
});
This example is public in http://jsfiddle.net/Cp73s/2038/
Check this out
var myapp = angular.module('myapp', ["highcharts-ng"]);
myapp.controller('myctrl', function($scope) {
var data = [
['APP Android', 45.0],
['APP Ios', 26.8],
['Widget Web', 12.8],
['MTC BAckoffice', 8.5],
['Correo electrónico', 6.2],
['Facebook', 6.2],
['Twitter', 6.2],
['Teléfono', 6.2],
['Presencial', 6.2],
]
$scope.highchartsNG = {
options: {
chart: {
type: 'pie'
},
plotOptions: {
pie: {
dataLabels: {
distance: -25 //adjust this value to change label distance
}
}
},
},
title: {
text: '550<br>AVISOS',
align: 'center',
verticalAlign: 'middle'
},
legend: {
enabled: true
},
series: [{
name: 'Avisos',
innerSize: '50%'
}, {
name: 'Plataforma',
size: '80%',
innerSize: '65%',
showInLegend: true,
data: data
}],
loading: false
}
});
Fiddles
fiddle with updated label
Fiddle with updated legend display
I'm trying to implement polylines into my map application, I get dynamics latlng and push them into an array of polylines,but I'getting an error that I don't know why:
Error: setVisible: not a boolean
but the visible is set to true, what is wrong with it?
var x = 0;
$scope.enderecos.forEach(function (posicao) {
$scope.markers.push({
id: x,
coords: {
latitude: parseFloat(posicao.latitude),
longitude: parseFloat(posicao.longitude)
}
});
$scope.polylines.push({
id: x,
path:[{
latitude: parseFloat(posicao.latitude),
longitude: parseFloat(posicao.longitude)
}],
stroke: {
color: '#6060FB',
weight: 4
},
editable: true,
draggable: false,
geodesic: false,
visible: true
});
x++;
});
html:
<div class="angular-google-map-container">
<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="map.options" events="map.events"
control="googlemap">
<ui-gmap-window coords="MapOptions.markers.selected.coords" show="windowOptions.show" options="windowOptions"
closeClick="closeClick()">
<div>Hello</div>
</ui-gmap-window>
<ui-gmap-polylines models="polylines" path="'path'" stroke="'stroke'" visible="'visible'"
geodesic="'geodesic'" editable="'editable'" draggable="'draggable'" static="true">
</ui-gmap-polylines>
<ui-gmap-markers models="markers" idkey="markers.id" coords="'coords'" click="'onClick'"
events="markers.events"></ui-gmap-markers>
</ui-gmap-google-map>
</div>
This is my complete mapController:
.controller('MapController', function ($scope, uiGmapGoogleMapApi, $stateParams, uiGmapIsReady, ShowList) {
var viagens_id = $stateParams.viagens_id;
ShowList.enderecoViagem(viagens_id).then(function (listview) {
$scope.enderecos = listview;
$scope.MapOptions = {
minZoom: 3,
zoomControl: false,
draggable: true,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
disableDoubleClickZoom: false,
keyboardShortcuts: true,
markers: {
selected: {}
},
styles: [{
featureType: "poi",
elementType: "labels",
stylers: [{
visibility: "off"
}]
}, {
featureType: "transit",
elementType: "all",
stylers: [{
visibility: "off"
}]
}]
};
uiGmapGoogleMapApi.then(function (maps) {
maps.visualRefresh = true;
$scope.googlemap = {};
$scope.map = {
center: {
latitude: $scope.enderecos[0].latitude,
longitude: $scope.enderecos[0].longitude
},
zoom: 12,
pan: 1,
options: $scope.MapOptions,
control: {},
events: {
tilesloaded: function (maps, eventName, args) {
},
dragend: function (maps, eventName, args) {
},
zoom_changed: function (maps, eventName, args) {
}
}
};
});
$scope.windowOptions = {
show: false
};
$scope.onClick = function (data) {
$scope.windowOptions.show = !$scope.windowOptions.show;
console.log('$scope.windowOptions.show: ', $scope.windowOptions.show);
console.log('This is a ' + data);
//alert('This is a ' + data);
};
$scope.closeClick = function () {
$scope.windowOptions.show = false;
};
$scope.title = "Window Title!";
$scope.markers = [];
$scope.polylines = [];
var x = 0;
$scope.enderecos.forEach(function (posicao) {
$scope.markers.push({
id: x,
coords: {
latitude: parseFloat(posicao.latitude),
longitude: parseFloat(posicao.longitude)
}
});
$scope.polylines.push({
id: x,
path: [{
latitude: parseFloat(posicao.latitude),
longitude: parseFloat(posicao.longitude)
}],
stroke: {
color: '#6060FB',
weight: 4
},
editable: true,
draggable: false,
geodesic: true,
visible: true
});
x++;
});
$scope.addMarkerClickFunction = function (markersArray) {
angular.forEach(markersArray, function (value, key) {
value.onClick = function () {
$scope.onClick(value.data);
$scope.MapOptions.markers.selected = value;
};
});
};
uiGmapIsReady.promise() // if no value is put in promise() it defaults to promise(1)
.then(function (instances) {
console.log(instances[0].map); // get the current map
})
.then(function () {
$scope.addMarkerClickFunction($scope.markers);
});
});
})
I think that your error is in this line:
<ui-gmap-polylines models="polylines" path="'path'" stroke="'stroke'" visible="'visible'"geodesic="'geodesic'" editable="'editable'" draggable="'draggable'" static="true">
</ui-gmap-polylines>
You put the variable "visible" between two simple quotes " ' ". This transforms the variable visible into the String visible. You are evaluating the string 'visible', not the boolean true
Try this:
<ui-gmap-polylines models="polylines" path="path" stroke="stroke" visible="visible"geodesic="geodesic" editable="editable" draggable="draggable" static="true">
</ui-gmap-polylines>