How to calculate the center of ngmap polygon? - angularjs

I am using ngmap and whenever i import KML polygon file the polygon is drown on the map.
I have an issue concerning zooming on the polygon.
Is there any way to calculate the polygon center (lattitude and longitude) ?
if not is there anyway to zoom on the polygon after drawing it on the ngmap.
Thank you

Whenever KML layer is added and the preserve-viewport attribute of kml-layer directive is set to true, the map is automatically getting centered based on layer viewport (it also means there is no need to specify the center explicitly)
To determine KML layer center:
1) set id attribute of kml-layer directive to reference KML Layer
<kml-layer preserve-viewport="true" id="myLayer" url="http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml"></kml-layer>
2) once the layer is rendered, get the instance of KML layer and then the center via google.maps.KmlLayer.getDefaultViewport function:
NgMap.getMap().then(function(map) {
var layer = map.kmlLayers["myLayer"]
var center = layer.getDefaultViewport().getCenter();
});
Example
angular.module('mapApp', ['ngMap'])
.controller('mapCtrl', function($scope, NgMap) {
NgMap.getMap().then(function(map) {
$scope.map = map;
var layer = map.kmlLayers["myLayer"]
var center = layer.getDefaultViewport().getCenter();
console.log(center.toString()); //
map.fitBounds(layer.getDefaultViewport());
});
});
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<div ng-app="mapApp" ng-controller="mapCtrl">
<ng-map center="21.876,-27.624" zoom="5" map-type-id="HYBRID" style="display:block; width: 100%; height:100%;">
<kml-layer preserve-viewport="true" id="myLayer" url="http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml"></kml-layer>
</ng-map>
</div>

Related

How to customize touch interaction on leaflet maps

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);

Google Maps with Cordova - Grey Display

I have a tough problem to fix, spent some hours and still stucked so I need your help now.
I'm developing an application for exchange students using cordova and Ripple emulator. I simply want to display a map with Google Maps API.
But I have always a grey background event if the styles buttons and google footer are loaded and displayed as shown below :
Image of my Grey problem
When I first load my page I have really quickly an image of australia (and then uluru which correspond to the code following) but then the google frame is loaded and grey screen take place again.
To prevent to get this solution, yes I allow every links in my Content Security Policy.
Image of my Content Security Policy
Here is the code of my html page for the map (i use angularJS) :
<section class="panel" ng-controller="MapController">
</head>
<body>
<div class="panelFilters"></div>
<div id="map">
</div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCirwIL6S55w7cmDLhxo3exIsjn9DwPVtc&callback=initMap">
</script>
<script>
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
map.refresh();
}
</script>
</body>
</section>
And then here the code of my MapController that I call in my html page :
function MapController($scope){
var isOpen = false;
var map = document.getElementById('map');
$(".header").click(function(){
if(!isOpen){
$('.header').empty().append("Search filters");
isOpen = true;
}else{
$('.header').empty().append("||");
isOpen = false;
}
$(".panelFilters").slideToggle();
})
$(window).resize(function() {
google.maps.event.trigger(map, 'resize');
console.log("resized");
});
google.maps.event.trigger(map, 'resize');
}
I absolutely don't know if the problem is related to my code, to ripple or to cordova. Every tip and help is welcome.
Thanks.

Retrieving map markers - angular google maps

How do you retrieve the collection of markers using angular google maps?
I've trying to use var markers = $scope.map.markerscontrol.getGMarkers(); but it only returns the last item in the list.
Made a plunkr http://plnkr.co/edit/Tl60bVydDQ3jIXqG6nIc
I wanna use the markers to calculate the bounds and map center.
i think it help you.
in your HTML file:
<ui-gmap-google-map center="map.center" zoom="map.zoom" options="options" data-tap-disabled="true">
<ui-gmap-marker
icon="yourModel.icon"
idKey="yourModel.id"
coords="yourModel.coords"
control="markerControl">
</ui-gmap-marker>
</ui-gmap-google-map>
and in your angular controller.
$scope.yourModel = {
id: 1,
coords = {
latitude: position.latitude,
longitude: position.longitude
},
icon = 'path/to/icon.png'
};
$scope.markerControl = {};
and how to use
var marker = $scope.markerControl.getGMarkers();
// marker variable, get an array of object to use.

Markers move when I make zoom out using ng-map and angularjs

I am using ngmap and angularjs to create markers in google map. All ok, but when I zoom out in the map the markers move.
My Code:
var app = angular.module('dataview', ['ngMap'])
app.controller('DataViewCtrl', function($scope, $http)
{
$scope.markers=[{lat:30.2817, lng:-81.5273},{lat:30.6824, lng:-81.9680},{lat:31.0004, lng:-82.1580}];
$scope.mapcenter={lat:$scope.markers[0].lat, lng:$scope.markers[0].lng};
}
<script src = 'http://maps.google.com/maps/api/js?v=3&sensor=true'></script>
<script src = '/assets/vendor/ngmap/build/scripts/ng-map.min.js'></script>
<map center="{{mapcenter.lat}}, {{mapcenter.lng}}" zoom="5" ng-if="is_map" style="height: 500px;">
<marker ng-repeat="pos in markers" position="{{pos.lat}}, {{pos.lng}}"></marker>
</map>
Resul OK
Bad Resul (when zoom out)
I had the same problem and I suppose you put the minimum code for the example. In my case, the problem was in SVG images of marker icons. I solved the problem by changing the images by others. Try default icons to test if you have the same problem.
A working example of what you are trying to achieve is here:
http://plnkr.co/edit/P5Tlui
Note how the markers position is now maintained when you zoom out.
I fixed the issue by assigning the markers' coordinates as following:
$scope.markers = [{
lat: 30.2817,
lng: -81.5273
}, {
lat: 30.6824,
lng: -81.9680
}, {
lat: 31.0004,
lng: -82.1580
}];
For some reason, In css file I put
canvas{width: 100% !important; height: 360px !important;}
I remove this line and fixed the problem. cavas style to conflict with height defined for map in html

Add custom marker icon to angular-google-maps when markers are from external JSON

I'm new to Angular (so probably am making some silly mistakes) and I'm trying to add some markers to a map instance with a custom image icon.
I understand that the best way to do this is to add this into the items as suggested by Fedaykin but is there a way to do this if you can't change the JSON file?
I was able to add the custom icon for a single marker, so I wondered if I could do the same for several markers using 'forEach', but although this shows all my markers it doesn't add the icon.
$scope.marker = Mapdata.query(function() {
var image = "https://maps.google.com/mapfiles/kml/shapes/info-i_maps.png";
$scope.$watch('data', function(data) {
angular.forEach($scope.marker, function(markerList, id, coords, icon) {
$scope.markerList = [{
id: data.id,
coords: {
latitude: data.latitude,
longitude: data.longitude
},
icon: image
}];
});
});
});
The html is just the usual angular-google-maps stuff
<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true">
<ui-gmap-markers models="marker.boards" coords="'self'" fit="'true'" icon="markerList.icon" click="'onClick'"></ui-gmap-markers>
</ui-gmap-google-map>
I have a plunker here to put it all in context.
Thanks for any help or advice :)
Made a few changes:
index.html
icon="markerList.icon" --> icon="'icon'"
script.js
I didn't quite understand what you were trying to to with the $watch - I ended up just setting the image attribute of each marker when the data is initially fetched.
Mapdata.query(function() { --> Mapdata.query(function(data) {
$scope.$watch thing -->
angular.forEach(data.boards, function(board) {
board.icon = image;
});
Here's the updated plunker.

Resources