I'm facing an issue with the circle marker in ui leaflet plugin. When ever a some one clicks on a circle im getting the popup but if I click outside the circle in the map and then try clicking circle again the popup is not coming up.
Can you please suggest what might be the problem? and is there any workaround for this?
Steps to reproduce
In map click one circle marker
Move the circle marker out of scope of map
Then try clicking any other marker the pop up will not appear
If I clicked outside the circle and clicked circle again the pop up appears again
Below is the snippet of the code if you need full code please visit this github link
https://github.com/Umamaheswaran1990/learningleaflet
HTML
<!DOCTYPE html>
<html ng-app="demoapp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/leaflet/dist/leaflet.js"></script>
<script src="../bower_components/angular-simple-logger/dist/angular-simple-logger.js"></script>
<script src="../bower_components/ui-leaflet/dist/ui-leaflet.min.js"></script>
<link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" />
<script src="app.js"></script>
</head>
<body ng-controller="LayersSimpleController as vm">
<leaflet center="center" tiles="tiles" paths="paths" width="50%" height="480px"></leaflet>
</body>
</html>
JS
var app = angular.module("demoapp", ['ui-leaflet']);
app.controller("LayersSimpleController", ["$scope", function ($scope) {
var vm = this;
$scope.$on('leafletDirectiveMap.map.load', function (event, data) {
var map = data.leafletObject;
map.attributionControl.setPrefix(false);
});
$scope.$on('leafletDirectiveMap.moveend', function (event, data) {
activate();
});
var map = [
{ "lat": 30.7559, "lon": -96.489 },
{ "lat": 41.8887, "lon": -111.769 }];
angular.extend($scope, {
center: {
lat: 39.774769,
lng: -98.789062,
zoom: 4,
minZoom: 4,
zoomControl: true,
},
events: {},
tiles: {
url: 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
options: {
subdomains: ['otile1', 'otile2', 'otile3', 'otile4']
},
layers: {},
defaults: {
}
}
});
activate();
function activate() {
$scope.paths = {};
angular.forEach(map, function (value, key) {
if (value.lat !== null && value.lon !== null) {
$scope.paths['circle' + key] = {
type: 'circleMarker',
className: 'testClass',
fillColor: 'DarkSlateGray',
color: '#000000',
weight: 0,
opacity: 1,
message: 'This is a test marker',
fillOpacity: 0.8,
stroke: false,
clickable: true,
latlngs: [parseFloat(value.lat), parseFloat(value.lon)],
radius: 20
};
}
});
}
}]);
I got it to work by adding
event-broadcast="events"
to the leaflet element in index.html, and adding
events: {
path: {
enable: ['click']
}
},
to app.js
I'm not sure why this was necessary as the ui-leaflet events example says that all broadcast events are enabled by default. http://angular-ui.github.io/ui-leaflet/examples/0000-viewer.html#/basic/events-example
Related
I have a list of names from the model that are listed on the page when the page loads. When i click the name, the corresponding image from the model appears on the page. Is there a way within this to load an initial
image [0]when the page loads? This could be a random image or the first image in the model data set.
<!DOCTYPE html>
<html ng-app = "myApp"><head>
<meta charset="UTF-8">
<title>Cat Clicker</title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<link rel ="stylesheet" type "text/css" href ="clicker.css">
<script type = "text/javascript" src="Libs/angular.js"></script>
<script type = "text/javascript" src="js/CatClickerMe.js"></script>
<body>
<div ng-controller = "MainController as vm">
<div ng-repeat = "cat in vm.options.catList">
<h3 ng-click = "vm.selectCat(cat)">{{cat.name}}</h3>
</div>
<hr>
<h3>{{vm.selectedCat.name}}</h3>
<img ng-src ="{{vm.selectedCat.images}}">
</div>
</div>
</div>
</body>
</html>
JS
"use strict";
angular.module('myApp',[]);
angular.module('myApp').controller('MainController', function($scope) {
var vm = this;
vm.selectCat=selectCat;
vm.options = {
catList:[
{
name: 'Fluffy',
images: 'images/Fluffy.jpeg'
},
{
name: 'Blacky',
images: 'images/blacky.jpeg'
},
{
name: 'Tabby',
images: 'images/tabby.jpeg'
},
{
name: 'Cleo',
images: 'images/Cleo.jpeg'
}
],
};
function selectCat(pos) {
vm.selectedCat = pos;
};
});
Load first image by setting vm.selectedCat just below vm.options
vm.selectedCat = vm.options.catList[0];
Below is the jsfiddle link for your reference
jsfiddle : https://jsfiddle.net/Lpaudwf8/21/
Can you Try this :-
"use strict";
angular.module('myApp',[]);
angular.module('myApp').controller('MainController', function($scope) {
var vm = this;
vm.selectCat=selectCat;
vm.options = {
catList:[
{
name: 'Fluffy',
images: 'images/Fluffy.jpeg'
},
{
name: 'Blacky',
images: 'images/blacky.jpeg'
},
{
name: 'Tabby',
images: 'images/tabby.jpeg'
},
{
name: 'Cleo',
images: 'images/Cleo.jpeg'
}
],
};
function selectCat(pos) {
vm.selectedCat = pos;
};
function Init(){
vm.selectedCat = vm.options.catList[0];
}
Init();
});
This is my current code:
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.pagination']);
app.controller('MainCtrl', [
'$scope', '$http', 'uiGridConstants', function($scope, $http, uiGridConstants) {
var paginationOptions = {
pageNumber: 1,
pageSize: 25,
sort: null
};
$scope.gridOptions = {
paginationPageSizes: [25, 50, 75],
paginationPageSize: 25,
useExternalPagination: true,
useExternalSorting: true,
columnDefs: [
{ name: 'name' },
{ name: 'gender', enableSorting: false },
{ name: 'company', enableSorting: false }
],
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi;
$scope.gridApi.core.on.sortChanged($scope, function(grid, sortColumns) {
if (sortColumns.length == 0) {
paginationOptions.sort = null;
} else {
paginationOptions.sort = sortColumns[0].sort.direction;
}
getPage();
});
gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) {
paginationOptions.pageNumber = newPage;
paginationOptions.pageSize = pageSize;
getPage();
});
}
};
var getPage = function() {
var url;
switch(paginationOptions.sort) {
case uiGridConstants.ASC:
url = 'https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100_ASC.json';
break;
case uiGridConstants.DESC:
url = 'https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100_DESC.json';
break;
default:
url = 'https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json';
break;
}
$http.get(url)
.success(function (data) {
$scope.gridOptions.totalItems = 100;
var firstRow = (paginationOptions.pageNumber - 1) * paginationOptions.pageSize;
$scope.gridOptions.data = data.slice(firstRow, firstRow + paginationOptions.pageSize);
});
};
getPage();
}
]);
.grid {
width: 600px;
}
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-animate.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div ng-controller="MainCtrl">
<div ui-grid="gridOptions" ui-grid-pagination class="grid"></div>
</div>
<script src="app.js"></script>
</body>
</html>
Here is the original plunker link as a reference: http://plnkr.co/edit/unizPGE4JCFxr5e5jQut?p=preview
The result I am getting is displayed in the following image. As you can see the pagination area seems to be "broken", with wrong sizing and alignments.
Why is the pagination so crookedly? What can I do with this?
Well, let me get started.
First, you are using angular 1.2.26 with the release version of ui-grid. While this doesn't seem to trigger any rendering problem, the official page for UI-Grid advertises a compatibility for Angularjs version 1.4.x to 1.6.x. If you open the developer toolbar you can actually see there is a reported error just because of that.
($scope.$applyAsync was added to Angularjs starting on version 1.3.x. Related info here)
I advise you upgrade to a compatible angularjs version to avoid further problem. Since you are also using the $http.success() construct, which was dropped after angularjs 1.4.3 your best bet is to stick to that version.
As for the pager rendering problem, it would seem that the wrong alignment is caused by the page number input box getting a wrong size. I compared your sample with the one on the official UI-Grid homepage and noticed that in your case the input seems to be missing a box-sizing: border-box setting. Because of this the specified height: 26px; attribute won't include the item padding: so, while on the UI-Grid sample the input will be 26 px high including the 5px padding, in your plunker the padding are added to the height, resulting in a 26+5+5 px high input that is obviously higher than any other element on the line.
Based on my observation, the border-box setting on the original sample is coming from bootstrap-flatly.min.css. I didn't find any notice of bootstrap begin an explicit requirement for paging support, but I don't exclude it. Anyway, in your specific case, adding the missing attribute on the input should be enough.
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.pagination']);
app.controller('MainCtrl', [
'$scope', '$http', 'uiGridConstants', function($scope, $http, uiGridConstants) {
var paginationOptions = {
pageNumber: 1,
pageSize: 25,
sort: null
};
$scope.gridOptions = {
paginationPageSizes: [25, 50, 75],
paginationPageSize: 25,
useExternalPagination: true,
useExternalSorting: true,
columnDefs: [
{ name: 'name' },
{ name: 'gender', enableSorting: false },
{ name: 'company', enableSorting: false }
],
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi;
$scope.gridApi.core.on.sortChanged($scope, function(grid, sortColumns) {
if (sortColumns.length == 0) {
paginationOptions.sort = null;
} else {
paginationOptions.sort = sortColumns[0].sort.direction;
}
getPage();
});
gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) {
paginationOptions.pageNumber = newPage;
paginationOptions.pageSize = pageSize;
getPage();
});
}
};
var getPage = function() {
var url;
switch(paginationOptions.sort) {
case uiGridConstants.ASC:
url = 'https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100_ASC.json';
break;
case uiGridConstants.DESC:
url = 'https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100_DESC.json';
break;
default:
url = 'https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json';
break;
}
$http.get(url)
.success(function (data) {
$scope.gridOptions.totalItems = 100;
var firstRow = (paginationOptions.pageNumber - 1) * paginationOptions.pageSize;
$scope.gridOptions.data = data.slice(firstRow, firstRow + paginationOptions.pageSize);
});
};
getPage();
}
]);
.grid {
width: 600px;
}
.ui-grid-pager-control-input{
box-sizing: border-box !important;
}
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div ng-controller="MainCtrl">
<div ui-grid="gridOptions" ui-grid-pagination class="grid"></div>
</div>
<script src="app.js"></script>
</body>
</html>
As you can see in the above sample, I switched the referenced angularjs file version to 1.4.3 and I added the following css rule:
.ui-grid-pager-control-input{
box-sizing: border-box !important;
}
This is the result:
still not very nice, but it seems to be identical to the result I am seeing on the official site:
As a final notice, please consider that the pagination api currently seems to be still in early alpha stage (see: http://ui-grid.info/docs/#!/tutorial/214_pagination), so it may not yet fit your need or present mayor bugs.
If you don't need this pagination controls, you can hide this by add enablePaginationControls false in gridOptions.
And can use other components like 'uib-pagination' for external pagination.
I have to display Image albums . Till #media element width 700px I can display 3 images per slide , below #media width :700px i need to display 1 image per slide.
For displaying 3 image per slide , I written a function showfilteredImages();
$scope.imagemaindiv
will have all images from backend
$scope.imagemaindiv = [{
'img': "image1.png",
"id": 1
}, {
'img': "image2.png",
"id": 2
}, {
'img': "image3.png",
"id": 3
}, {
'img': "image4.png",
"id": 4
}, {
'img': "image5.png",
"id": 5
}, {
'img': "image6.png",
"id": 6
}]
$scope._firstImgIndex = 0;
$scope._lastImgIndex = 2;
$scope.showFilteredImages = function() {
$scope.filteredImages = [];
for (var i = $scope._firstImgIndex; i <= $scope._lastImgIndex; i++) {
$scope.filteredImages.push($scope.imagemaindiv[i]);
}
};
Following code might work for you.:).Try for this.
var data=angular.element($window);
data.bind('resize',function(){
//call your another function here:
});
try this code
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script>
<script src="app.js"></script>
</head>
<body>
<my-directive></my-directive>
</body>
</html>
app.js
'use strict';
var app = angular.module('app', []);
app.directive('myDirective', ['$window', function ($window) {
return {
link: link,
restrict: 'E',
template: '<div>window size: {{width}}px</div>'
};
function link(scope, element, attrs){
scope.width = $window.innerWidth;
angular.element($window).bind('resize', function(){
alert();
scope.width = $window.innerWidth;
// manuall $digest required as resize event
// is outside of angular
scope.$digest();
});
}
}]);
I have a map setup with custom markers. I used a jsfiddle to make this and it works there:
https://jsfiddle.net/LdLy6t90/2/
However, when I add the same to my onsen ui-based app, the touchevents for google map markers don't get fired.
I'm guessing this is happening because of the js I'm using there's probably something causing a conflict. This is what I'm using in my header:
<script src="https://maps.googleapis.com/maps/api/js?key=XXXX" type="text/javascript"></script>
<script src="js/youtube.js"></script>
<script src="js/angular.js"></script>
<script src="js/angular-animate.js"></script>
<script src="js/angular-aria.js"></script>
<script src="js/angular-messages.js"></script>
<script src="js/angular-ui-router.min.js"></script>
<script src="js/angular-sanitize.js"></script>
<script src="lib/onsen/js/angular/angular-touch.js"></script>
<script src="lib/onsen/js/onsenui.js"></script>
<script src="cordova.js"></script>
<script type="text/javascript" src="js/paypal-mobile-js-helper.js"></script>
<script src="js/plugins.js"></script>
<script src="js/app.js"></script>
My code for the maps is below, first the HTML:
<div ng-app="mapsApp" ng-controller="MapCtrl">
<div id="map"></div>
<div id="class" ng-repeat="marker in markers | orderBy : 'title'">
{{marker.title}}
</div>
</div>
My app.js is defined as:
angular.module('mapsApp', [])
.controller('MapCtrl', function($scope) {
$scope.places = [{
place: 'Signs Restaurant & Bar',
desc: '558 Yonge St, Toronto, ON, M4Y 1Z1<br/>View in Maps',
lat: 43.664639,
long: -79.384649,
icon: "http://google-maps-icons.googlecode.com/files/home.png"
}, {
place: 'Green P near Yonge & Wellesley',
desc: ' Yonge St & Wellesley St, Toronto, ON<br/>Closest parking lot to SIGNS, about 180m.<br/>View in Maps',
lat: 43.6649843,
long: -79.3837849,
icon: "http://google-maps-icons.googlecode.com/files/home.png"
}, {
place: 'Parklink Parking',
desc: ' 8 Alexander St, Toronto, ON M4Y 1B4<br/>260m from SIGNS.<br/>View in Maps',
lat: 43.663157,
long: -79.3833836,
icon: "http://google-maps-icons.googlecode.com/files/home.png"
}, {
place: 'Unit Park',
desc: '25 Grosvenor St, Toronto, ON<br/>About 300m from SIGNS.<br/>View in Maps',
lat: 43.6626531,
long: -79.3851467,
icon: "http://google-maps-icons.googlecode.com/files/home.png"
}];
var mapOptions = {
zoom: 16,
center: new google.maps.LatLng(43.664639, -79.384649),
mapTypeId: google.maps.MapTypeId.TERRAIN
}
$scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);
$scope.markers = [];
var infoWindow = new google.maps.InfoWindow();
var createMarker = function(info) {
var marker = new google.maps.Marker({
map: $scope.map,
position: new google.maps.LatLng(info.lat, info.long),
title: info.place,
icon: info.icon,
animation: google.maps.Animation.DROP
});
marker.content = '<div style="text-align: center;" class="infoWindowContent">' + info.desc + '</div>';
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content);
infoWindow.open($scope.map, marker);
});
$scope.markers.push(marker);
}
var placeses = $scope.places;
for (var i = 0; i < placeses.length; i++) {
createMarker(placeses[i]);
}
$scope.openInfoWindow = function(e, selectedMarker) {
e.preventDefault();
google.maps.event.trigger(selectedMarker, 'click');
}
});
Everything else works, except for the touchevent for the markers and I can't figure out why it works in the fiddle, but not in my onsenui based app in cordova. Any help with this would be appreciated.
The problem was with a few mobile devices, not all. Thanks to GoogleMap Markers are Not Clickable on the Mobile Devices - I found my solution.
Use
"optimized: false" : ex => new google.maps.Marker({..., optimized: false, ...});
Change event listener to
google.maps.event.addDomListener(marker, "click", function() {...});
I am testing out angular js google map http://angular-ui.github.io/angular-google-maps/#!/api
I can add multiple marker on the map, however i am unable to set the event listener to each marker. i just want it to write into console when user click any of the marker.
How can i make my codes work?
Below are my codes:
<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org/" ng-app="appMaps">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css" />
<script src="//maps.googleapis.com/maps/api/js?libraries=weather,geometry,visualization,places&sensor=false&language=en&v=3.17"></script>
<script data-require="angular.js#1.2.x" src="https://code.angularjs.org/1.2.26/angular.js" data-semver="1.2.26"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="http://rawgit.com/angular-ui/angular-google-maps/master/dist/angular-google-maps.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!--css-->
<style type="text/css">
html, body, #map_canvas {
height: 100%;
width: 100%;
margin: 0px;
}
#map_canvas {
position: relative;
}
.angular-google-map-container {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
</style>
<script>angular.module('appMaps', ['uiGmapgoogle-maps'])
.controller('mainCtrl', function($scope) {
$scope.map = {
center: {
latitude: 34.963916,
longitude: 104.311893
},
zoom: 4,
bounds: {},
};
$scope.options = {
scrollwheel: false
};
var createRandomMarker = function(i, bounds, idKey) {
var lat_min = bounds.southwest.latitude,
lat_range = bounds.northeast.latitude - lat_min,
lng_min = bounds.southwest.longitude,
lng_range = bounds.northeast.longitude - lng_min;
if (idKey == null) {
idKey = "id";
}
var latitude = lat_min + (Math.random() * lat_range);
var longitude = lng_min + (Math.random() * lng_range);
var ret = {
latitude: latitude,
longitude: longitude,
title: 'm' + i
};
ret[idKey] = i;
return ret;
};
$scope.randomMarkers = [];
// Get the bounds from the map once it's loaded
$scope.$watch(function() {
return $scope.map.bounds;
}, function(nv, ov) {
// Only need to regenerate once
if (!ov.southwest && nv.southwest) {
var markers = [];
for (var i = 0; i < 2; i++) {
var ret = {
latitude: 34.963916,
longitude: 104.311893,
title: 'm3',
id: 1
};
var ret2 = {
latitude: 37.096002,
longitude: 126.987675,
title: 'm2',
id:2
};
markers.push(ret);
markers.push(ret2);
}
$scope.randomMarkers = markers;
}
}, true);
$scope.marker = {
events:{click: console.log('click')},
}
});
</script>
</head>
<body>
<div id="map_canvas" ng-controller="mainCtrl">
<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options" bounds="map.bounds" events = "'map.events'">
<ui-gmap-markers models="randomMarkers" coords="'self'" icon="'icon'" click="'test'" events = "'events'"></ui-gmap-markers>
</ui-gmap-google-map>
</div>
<!--example-->
</body>
</html>
I will look further into this later today. One way I can think of at the moment is to set the click argument in <ui-gmap-markers> to a valid JS function that calls console.log().
In my case, I made click="onClick" and then defined the following function:
$scope.onClick = function onClick() {
console.log("click");}
Click Event on google map
i am not know about map api in angular but i had some suggestions you can use map api with canvas you can give ng-click event on canvas element code is here
site:jsfiddle.net/xSPAA/536/