I created a map with a control with checkboxes for some polygons, markers. All data are read from a geojson-file. The checkboxes are not checked, when I try to collect some geometry-objects in one control-group. In the example the top three markers and polygons should show/disappear TOGETHER when the second checkbox is used.
All works fine, if the checkboxes have been checked the first time manually. It works fine too, if I use ONE checkbox for every geometry-object (which is not my intention). The geometry-objects with the SAME feature.property.control should react together.
You cann see the example here: https://aachen-hat-energie.de/test_ww/test_control.htm (please use fullscreen)
<html>
<head>
<link rel="stylesheet" href="../js/Leaflet/leaflet.css" >
<script src="../js/Leaflet/leaflet.js" ></script>
<script src="../js/Leaflet/leaflet-bing-layer.min.js"></script>
<script src="../js/Leaflet/jquery-3.3.1.min.js"></script>
<script src="../js/Leaflet/Leaflet.fullscreen.min.js"></script>
<link href="../js/Leaflet/leaflet.fullscreen.css" rel="stylesheet" >
<script>
'use strict';
var BING_KEY = "AplTrT4uzwlmfcERFFQu_NqDycERC_Er0qGYzZhIqrDfq-naYCsUr1kbbKRUqhq1";
var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
function show_karte(div_id, mittelpunkt, zoom, overlay){
var osmLayer = L.tileLayer(osmUrl, {maxZoom: 20, attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA'});
var mittelpunkt = [mittelpunkt[1], mittelpunkt[0]]
var map = L.map(div_id,{fullscreenControl: true, layers: [osmLayer]}).setView(mittelpunkt, zoom);
var controlGroup = {};
var lastControl = {};
var controls = L.control.layers(null, controlGroup).addTo(map);
function onEachFeature(feature, layer) {
layer.addTo(map);
if (feature.properties.control != null)
{if (feature.properties.control != lastControl)
{controlGroup = {};
controlGroup = L.layerGroup(); // auch L.FeatureGroup()
controlGroup.addLayer(layer);
controls.addOverlay(controlGroup, feature.properties.control);
//controls.addOverlay(layer, feature.properties.control);
}
else
{controlGroup.addLayer(layer);
};
lastControl = feature.properties.control;
};
};
$.ajax(overlay).done(function(data) {
var data = JSON.parse(data);
L.geoJson(data,
{onEachFeature: onEachFeature
});
});
L.control.scale({imperial: false, position: "topleft"}).addTo(map);
};
</script>
</head>
<body>
<div id="map" style="width:450px; height: 700px;">
<script type="text/javascript"> show_karte("map",[6.026173,50.816022],13,"../wind/neueFlaechen.geojson"); </script>
</div>
</body>
</html>
In the function onEachFeature is missing controlGroup.addTo(map).
Related
Doing one Google Script APP. With server side method that returns array of string.
getClassRoomList().
Can you please suggest what is wrong with my current HTML? As the success handler is running all well on response. But the ng variable message is not reflecting on page; while the jQuery does populate the table.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<base target="_top">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script>
var app = angular.module('myApp',[]);
app.controller('mainCtrl',function($scope){
$scope.message = [];
$scope.populateTable = function(array){
//Setting ng variable; but the page doesn't show anything
$scope.message = array;
//Setting the Table by JQuery; it does work.
var table = $('#myTable');
table.empty();
for (var i = 0; i < array.length; i++) {
var item = '<tr><td><div class="classname">' + array[i] +'</div></td></tr>';
table.append(item);
}
};
$scope.mainClick = function(){
$scope.message = $scope.message + 'chirag';
google.script.run.withSuccessHandler($scope.populateTable).getClassRoomList();
};
});
</script>
</head>
<body ng-controller="mainCtrl">
<button ng-click="mainClick()">Proceed</button>
<table id="myTable"></table>
<div ng-bind="message"></div>
</body>
</html>
This works. Thanks. google.script.run.withSuccessHandler((e) => {$scope.populateTable(e); $scope.$apply();}).getClassRoomList();
I have a method that creates an object and pushes it to an array
$scope.contracts = [];
$scope.addContract = function () {
var contract = {
...
}
$scope.contracts.push(contract);
console.log($scope.contracts);
}
now in my DOM, i have the following (merely for debugging)
{{contracts}}
But this doesn't update. I validate in the console, that the object is in the array.
Why doesn't the model update?
I've already tried various applications of $scope.$apply, but they all result in an
$apply already in progress
Something must be wrong with your code, check your DOM. Does anything happen when you call your function? Heres is a working example:
var app = angular.module("myApp",[]);
app.controller("test", function($scope){
$scope.contracts = [];
$scope.addContract = function () {
var contract = {
"con":"tract"
}
$scope.contracts.push(contract);
console.log($scope.contracts);
}
});
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="test">
{{contracts}}
<button ng-click="addContract()">Add contract</button>
</body>
</html>
Hello I am building a small web app using meanjs, I have managed to put together a category selector via various tutorials, books etc. it should look like the ebay category selector but I am stuck on how to show the selected categories.
this is what I have so far jsfiddle
var app = angular.module('categories', []);
app.controller('MainCtrl', function($scope) {
$scope.choice = null;
$scope.opts = {
"Basic Materials": {
"Chemical":{
"BlahChemicals": ["abc123", "blahblah"],
"Resources": ["Minerals", "Metals"],
},
"Steel":{
"BlahTin": ["abcsteel", "blahyuck"],
"Exsteel": ["Minerals", "Metals"],
},
"Timber": ["Hardwood", "SoftWood"]
}
};
});
app.directive('catSelect', function($compile, $parse) {
var ddo = {
restrict: 'E',//only matches element name
scope: {config:'=config'},
replace: true,
controller: function($scope, $attrs, $element) {
$scope.selected = null; // a place to store the result of this iteration
// make an selections array to display the current set of keys
if (angular.isArray($scope.config)) {
// if it is an array, just copy
$scope.selections = angular.copy($scope.config);
} else if (angular.isObject($scope.config)) {
$scope.selections = [];
//if it is an object, extract the key's to an array
angular.forEach($scope.config, function(cat, key) {
$scope.selections.push(key);
});
}
$scope.$watch("selected", function(newCat, oldCat) {
if (newCat === oldCat || newCat === null) {return; } //nothing to do.
$scope.sub = $scope.config[newCat]; //make the current selection the root for the next
if ($scope.sub && angular.isObject($scope.sub)) { // is there an subselection to make?
$element.find("span").remove(); //remove previous added selects..
newSelect = '<cat-select config="sub" class="catSelectSubItem"></cat-select>';
$element.append($compile(newSelect)($scope));
}
});
},
template: '<span><select ng-model="selected" ng-options="cat for cat in selections"></span>',
};
return ddo;
});
The CSS
select {
display: inline;
margin-left: 0;
float: left;
height: 260px;
margin-left: 15px;
background: #FFF;
min-width: 15.0em;
}
The HTML
<!DOCTYPE html>
<html ng-app="categories">
<head>
<meta charset="utf-8" />
<title>AngularJS Categories</title>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js" data-semver="1.0.8"> </script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div>
<cat-select config="opts"></cat-select>
</div>
</body>
</html>
So with any luck someone out there will be able to point me in the right direction
In order to retrieve the multiple selected categories you must keep track of them somehow.
I was able to make a quick edit on your jsFiddle so it stores the selected options in an array and shows that on the HTML... you can then use it on your controller to do whatever you need.
It probably could use some more optimization and defensive coding, but I guess you can do it yourself :)
Here is the fiddle, hope that helps:
http://jsfiddle.net/j8bq7rm1/1/
<div style="display: block;">{{selectedCategories}}</div>
<div>
<cat-select config="opts" selected-items="selectedCategories"></cat-select>
</div>
Thanks
I am new to angular.js. I am using list of users with sorter list, when I click the user name the selected user phone number should display in the selected area. It is working fine.
My question is how to I set the first user as default select. here is my sample code. Please help me on this.
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Example</title>
<script src="js/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl">
<h1>Selected View</h1>
<ul>
<li ng-repeat="userNames in users | orderBy:orderProp:direction" ng:click="select(userNames)">{{userNames.name}}</li>
</ul>
<p>selected: {{selectedUser.phone}}</p>
<script>
var myApp = angular.module('myApp', []);
//myApp.by.id('setbtn')element('h1').addClass('active');
myApp.controller('MainCtrl', ['$scope', function ($scope) {
$scope.users = [{name:'John', phone:'555-1276'},
{name:'John', phone:'555-1278'},
{name:'Mary', phone:'800-BIG-MARY'},
{name:'Mike', phone:'555-4321'},
{name:'Adam', phone:'555-5678'},
{name:'Julie', phone:'555-8765'},
{name:'Juliette', phone:'555-5678'}];
//sorting
$scope.direction = false;
$scope.orderProp = "name";
$scope.sort = function(column) {
if ($scope.orderProp === column) {
$scope.direction = !$scope.direction;
} else {
$scope.orderProp = column;
$scope.direction = false;
}
};
//selected list
$scope.select = function(phone) {
$scope.selectedUser = phone;
};
}]);
</script>
</body>
</html>
Just use this in the controller to sets the default user's phone number
$scope.selectedUser = $scope.users[0];
Since the users in a JS Object, instead of a native datatype, the initial selection often causes a problem.
You'll be better off to refactor the select options to use an array of strings rather than an array of Objects.
It is covered in detail in this post.
Hope this helps!
You can sort users from controller instead of html
HTML
<li ng-repeat="userNames in getSortedUsers()"
ng:click="select(userNames)">{{userNames.name}}</li>
Controller
$scope.getSortedUsers = function () {
// Use $filter service. You have to add $filter as dependencies in controller
var users = $filter('orderBy')($scope.users, $scope.orderProp +
':' + $scope.direction);
// Set first user as selected user
$scope.selectedUser = users[0];
return users;
}
I'm trying to follow along http://addyosmani.github.io/backbone-fundamentals. I'm not getting how $el is supposed to work in a view.
Here's my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Dashboard</title>
</head>
<body>
<h1>Dashboard</h1>
<ol class="foo" id="recent-station">
</ol>
<!-- Templates -->
<script type="text/template" id="station-template">
<li><%= station %></li>
</script>
<!-- Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
<script src="static/js/script.js"></script>
</body>
</html>
And script.js is:
var RecentStation = Backbone.Model.extend( {
defaults: {
station: "",
},
initialize: function() {
console.log('initialized: ' + JSON.stringify(this));
this.on('change', function() {
console.log('changed: ' + JSON.stringify(this));
})
}
});
var RecentStationView = Backbone.View.extend( {
tagName: 'ol',
id: 'recent-station',
initialize: function() {
this.model.bind('change', _.bind(this.render, this));
},
render: function() {
console.log('render');
this.$el.append('<li>foo</li>');
$('ol#recent-station').append('<li>bar</li>');
return this;
},
});
var recent = new RecentStation();
var recentView = new RecentStationView({model: recent});
recent.set('station', 'My Station');
The interesting stuff is happening in the render function. I can see "render" logged to the console, and the "bar" text gets appended to the node, but not the "foo" text. I thought this.$el and $('ol#recent-station') were the same thing, but obviously not. What am I missing?
If you don't specify a dom element using el attribute, one will be created using tagName,id,className, and attributes from the view.
In your case you don't specify an el attribute in your view so you create an element that looks like:
<ol id='recent-station'></ol>
You then append <li>foo</li> into it, but your view element is still not in the DOM.
$('ol#recent-station') returns the dom element included in your html which is different than your view element, but has the same attributes.
So, in your example you would need to specify an existing element by supplying an el attribute.
var RecentStationView = Backbone.View.extend( {
// remove tagName and id
el:'#recent-station',
/* rest of your code below */
A fiddle with the changes, http://jsfiddle.net/DsRJH/.