I'm learning AngularJS. I'm trying to add AngularJS to a long piece of code which works,and which includes some graphics using a canvas. I was able to reproduce the problem with the minimal code below. Basically, I just need to load AngularJS and that's it, my code doesn't work. I've been searching trough the angularjs site, but have not found anything.
If I comment the line that loads angularjs, a rectangle gets drawn. If I use the code as it is, the screen is empty.
`!DOCTYPE html>
<head>
<html xmlns:ng="http://angularjs.org" ng-app>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>
</head>
<body>
<canvas id='canvas' width='500' height='500'>Canvas is not supported by this browser.</canvas>
<script src="angular.js">
<script type="text/javascript" >
function DrawMe() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
context.strokeStyle = '#808080';
context.fillRect(0, 0, canvas.width, canvas.height);
}
$( document ).ready(function() {
DrawMe();
});
</script>
</body>
</html>`
You need to get a reference to your canvas element:
function DrawMe() {
// get a reference to the canvas element
var canvas=getElementById("canvas");
var context = canvas.getContext('2d');
context.strokeStyle = '#808080';
context.fillRect(0, 0, canvas.width, canvas.height);
}
Related
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).
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>
How to customize leaflet maps to disable one-finger scroll on mobile devices and add two finger scroll like google maps (see https://developers.google.com/maps/documentation/javascript/interaction)
I think something like a listener on finger down and finger up and a custom overlay or sth. like that should help. But how to correctly integrate this as a plugin in leaflet?
<html>
<head>
<link href="https://unpkg.com/leaflet#1.0.2/dist/leaflet.css" rel="stylesheet"/>
<script src="https://unpkg.com/leaflet#1.0.2/dist/leaflet.js"></script>
</head>
<body>
<div id="mapid" style="width: 600px; height: 400px;"></div>
<script>
var mymap = L.map('mapid', {center: [48,9], zoom:8, layers: [L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')]});
</script>
</body>
</html>
Simply set the dragging option of your map to false, but be sure to keep the touchZoom option as true. This will disable one-finger dragging, while allowing the user to perform pinch-zoom with two fingers, which also pan the map around.
If you want this behaviour only in mobile devices, use L.Browser.mobile to set the value of the dragging option, as in
var map = L.map('map', { dragging: !L.Browser.mobile });
Here is a working solution founded here. All credits to #BlueManCZ comment
L.map('map', {
dragging: !L.Browser.mobile,
tap: !L.Browser.mobile
})
As mention in comment by Corrodian, you can find GestureHandling plugins on Leaflet.
It was created by elMarquis in can be found here https://elmarquis.github.io/Leaflet.GestureHandling/examples/
I've done with this plugins by including css and js after leaflet:
<link rel="stylesheet" href="css/leaflet-gesture-handling.min.css" type="text/css">
<script src="js/leaflet-gesture-handling.min.js"></script>
And add gestureHandling option in map like this:
var map = L.map("map", {
center: [-25.2702, 134.2798],
zoom: 3,
gestureHandling: true
});
It works!
var map = L.map('map', {dragging: false});
map.setView([lat, lng], zoom);
-or together-
var map = L.map('map',{dragging: false}).setView([lat, lng], zoom);
New to AngularJS. Following ui-scroll is not working. Appreciate any help.
https://plnkr.co/edit/PVCWRf1DaVtt4j7z15wx?p=preview
Trying implement simple ui-scroll without any jquery libraries. Below is sample code making it to work so that i can expand it to be implemented in app.
html
<!DOCTYPE html>
<html>
<head>
<title>Hospital</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="scroll.js"></script>
<script src="ui-scroll.js"></script>
<link rel="stylesheet" type="text/css" href="scroll.css">
<div ng-app="scrollerTestApp" ng-controller="ScrollerController">
<div ui-scroll="movie in movieDataSource">
<h2>{{ movie.description }}</h2>
</div>
</div>
</body>
</html>
scroll.js
var appModule = angular.module('scrollerTestApp', ['ui.scroll'])
.controller('ScrollerController', ['$scope', function($scope) {
$scope.movieDataSource = {
get: function(index, count, callback) {
var i, items = [],
item;
var min = 1;
var max = 100;
for (i = index; i < index + count; i++) {
if (i < min || i > max) {
continue;
}
item = {
description: "Item : " + i,
imageURL: "http://placehold.it/96x96&text=" + i
};
items.push(item);
}
callback(items);
}
}
}]);
The problem you have is you're lack of ui-scroll-jqlite.
According to the documentation:
File dist/ui-scroll-jqlite.js houses implementations of the above
methods and also has to be loaded in your page. Please note that the
methods are implemented in a separate module 'ui.scroll.jqlite' and
this name should also be included in the dependency list of the main
module.
that said, I let your plnkr edited.
Hope it helps ;).
Since angular-ui-scroll v1.6.0 the ui.scroll.jqlite module was deprecated. All necessary instructions had been incapsulated into ui.scroll module. So, the best solution would be to upgrade the angular-ui-scroll dependency.
If you are using angular-ui-scroll before v1.6.0, you should add ui.scroll.jqlite module to the App explicitly:
angular.module('scrollerTestApp', ['ui.scroll.jqlite', 'ui.scroll'])
Also, it means that ui-scroll-jqlite[.min].js should be added to your scripts/build before ui-scroll[.min].js.
In my HTML I have this img link:
imgURL is set in the controller:
$scope.imgURL = 'img/img_'+$scope.img.id+'.jpg;
With the first changes it works perfectly, but after a while the image doesn't show anymore..??
I read an tried several "solutions" like adding a parameter with random value so it forces to reload, but it didn't work. I log the url in the console and see it changing, so that's not the point.
What can cause the not appearing of the image after a while, it looks so random..?
Your answer is highly appreciated, I'm rather desperate :-/
I don't know about your HTML structure or code but with AngularJS I would do such a image source rotation with something like this. It's simple and works:
angular.module('myApp', [])
.controller('mainController', function($scope, $interval) {
var images = [
'https://placehold.it/350x150',
'https://placehold.it/450x250',
'https://placehold.it/250x250'
];
var i = 0;
$scope.image = images[i];
$interval(function() {
i++;
if (i < images.length) {
$scope.image = images[i];
} else {
$scope.image = images[0];
i = 0;
}
}, 3000, 0);
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="mainController">
<img ng-src="{{image}}">
</body>
</html>
You can apply your image variable manipulation to this easily. The main part in the example above is to use ng-src.