Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ng-map default zoom is too zoomed in when used with zoom-to-include-markers="true"

I'm trying to use the maps and I'm facing this case when I only have one marker and the zoom-to-include-markers="true", the result is that the map is too zoomed in no matter how I set the zoom attribute the result looks like this : enter image description here

while what I would like for the first render to be should look something like this :

enter image description here

here is my code :

<ng-map
        ng-if="items"
        zoom="5"
        map-type-id="ROADMAP"
        pan-control="false"
        street-view-control="true"
        street-view-control-options="{position: 'RIGHT_BOTTOM'}"
        map-type-control="false"
        zoom-control="true"
        zoom-control-options="{style:'BIG', position: 'RIGHT_BOTTOM'}"
        scale-control="true"
        default-style="true"
        zoom-to-include-markers="true"
        class="map">

    <marker on-click="" data-ng-repeat="item in items" position="{{[item.latitude, item.longitude]}}">
    </marker>

</ng-map>

I tried to adjust the zoom attribute but it has no change on the map result.

UPDATE:

changing the zoom using setZoom() function in js is doing it, is there a way to calculate the suitable zoom according to the values that the map has?

Thanks

like image 918
sisimh Avatar asked Oct 10 '16 07:10

sisimh


People also ask

What happens when you zoom in on a map?

It gives us a sense of the scale that a map is supposed to be viewed at. Maps with a large scale (i.e. zoomed in, for example a scale of 1:100) show more detail and are more accurate while maps with a small scale (zoomed out, for example 1:1 million) show a large area but are not as accurate.

How do you change the zoom level on a map?

Users can zoom the map by clicking the zoom controls. They can also zoom and pan by using two-finger movements on the map for touchscreen devices.

How do I change the default zoom on Google Maps?

Step 1 Go to Add or Edit Map page . Step 2 Select 'Default zoom level' in the 'Map Information section'. Step 3 click save map and see the changes.

How do you zoom in and out on the map is done with?

The shortcut is simple: just double-tap the maps interface, but instead of lifting your finger after the second tap (the shortcut for zooming in), you leave it touching the screen. Then a swipe up zooms out, and a swipe down zooms in.


1 Answers

For the case of a single marker you could specify maxZoom and minZoom properties to restrict map zoom level which will be displayed on the map.

Example

The example demonstrates how to set maxZoom via maximum-zoom attribute of map directive:

angular.module('mapApp', ['ngMap'])

  .controller('mapCntrl', function (NgMap, $scope) {
    $scope.items = [
      //{ id: 1, name: 'Oslo', latitude: 59.923043, longitude: 10.752839 },
      { id: 2, name: 'Stockholm', latitude: 59.339025, longitude: 18.065818 },
      //{ id: 3, name: 'Copenhagen', latitude: 55.675507, longitude: 12.574227 },
      //{ id: 4, name: 'Berlin', latitude: 52.521248, longitude: 13.399038 },
      //{ id: 5, name: 'Paris', latitude: 48.856127, longitude: 2.346525 }
    ];

    NgMap.getMap().then(function (map) {
      $scope.map = map;
    });

  });
<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="mapCntrl">

		<ng-map maximum-zoom="14" ng-if="items" zoom="5" map-type-id="ROADMAP" pan-control="false" street-view-control="true" street-view-control-options="{position: 'RIGHT_BOTTOM'}"
			map-type-control="false" zoom-control="true" zoom-control-options="{style:'BIG', position: 'RIGHT_BOTTOM'}" scale-control="true"
			default-style="true" zoom-to-include-markers="true"  class="map">

			<marker on-click="" data-ng-repeat="item in items" position="{{[item.latitude, item.longitude]}}">
			</marker>

		</ng-map>

</div>

Update

Another option would be to force map to set zoom level once the map is ready. The point is that zoom-to-include-markers="true" sets the viewport which in turn sets zoom to maximum in case of a single marker. That's the reason why zoom="5" is getting ignored.

The following example shows how to to set zoom level with zoom-to-include-markers="true":

NgMap.getMap().then(function (map) {
  map.setZoom(12);
});

Demo

angular.module('mapApp', ['ngMap'])

  .controller('mapCntrl', function (NgMap, $scope) {
    $scope.items = [
      //{ id: 1, name: 'Oslo', latitude: 59.923043, longitude: 10.752839 },
      //{ id: 2, name: 'Stockholm', latitude: 59.339025, longitude: 18.065818 },
      //{ id: 3, name: 'Copenhagen', latitude: 55.675507, longitude: 12.574227 },
      //{ id: 4, name: 'Berlin', latitude: 52.521248, longitude: 13.399038 },
      { id: 5, name: 'Paris', latitude: 48.856127, longitude: 2.346525 }
    ];

    $scope.maxZoomForSinglePOI = 17;

    NgMap.getMap().then(function (map) {
      if(map.getZoom() > $scope.maxZoomForSinglePOI){
         map.setZoom($scope.maxZoomForSinglePOI);
      }
    });

  });
<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="mapCntrl">

		<ng-map ng-if="items" zoom="5" map-type-id="ROADMAP" pan-control="false" street-view-control="true" street-view-control-options="{position: 'RIGHT_BOTTOM'}"
			map-type-control="false" zoom-control="true" zoom-control-options="{style:'BIG', position: 'RIGHT_BOTTOM'}" scale-control="true"
			default-style="true" zoom-to-include-markers="true"  class="map">

			<marker on-click="" data-ng-repeat="item in items" position="{{[item.latitude, item.longitude]}}">
			</marker>

		</ng-map>

	</div>
like image 64
Vadim Gremyachev Avatar answered Oct 31 '22 04:10

Vadim Gremyachev