1

Here is the high level description of what I'm trying to do. When the user double-clicks on the map I want to map to zoom to a 5x5 degree grid around the point they clicked on. I want to in essence hard code the zoom so not matter what zoom level they are in it always zooms to 5x5 of where they click.

I'm using the OpenLayers 3.12.1, Angular 1.4.8, and my own GeoServer server.

Here is my double-click function in my Angular app.

  $scope.map.on('dblclick', function(evt) {
    $scope.coordinate = evt.coordinate;
    $scope.center = ol.proj.transform($scope.coordinate, 'EPSG:3857', 'EPSG:4326');
    $scope.map = evt.map;
    $scope.extent = $scope.map.getView().calculateExtent($scope.map.getSize());
    $scope.bottomLeft = ol.proj.transform(ol.extent.getBottomLeft($scope.extent), 'EPSG:3857', 'EPSG:4326');
    $scope.topRight = ol.proj.transform(ol.extent.getTopRight($scope.extent), 'EPSG:3857', 'EPSG:4326');
    console.log('left', wrapLon($scope.bottomLeft[0]));
    console.log('bottom', $scope.bottomLeft[1]);
    console.log('right', wrapLon($scope.topRight[0]));
    console.log('top', $scope.topRight[1]);
    console.log($scope.center[0]);
    console.log($scope.center[1]);

    $scope.map.getview().fit($scope.extent, map.getSize());
});

I'm able to calculate the center, calculate the extent edge points. However when I try using the .fit function no matter what I put in for the inputs, the console says this function doesn't exist. I know the parameters I have in there are not right at all, their just placeholders.

I know I'm calculating a lot of extraneous information but I'm new to OpenLayers and keeping any successful lines of code I have for now.

  • You are calling map.getSize() instead of $scope.map.getSize() in the last line, could that be the issue? – chrki Jan 16 '16 at 12:34
  • Good catch that definitely would be an issue. I've changed it and I'm still getting this error. "Uncaught TypeError: $scope.map.getview is not a function" – Chris Montone Jan 19 '16 at 14:35
  • Wow I forgot to capitalize getView(). I will try to see if I can get my calculations right now that the function call is working. – Chris Montone Jan 20 '16 at 14:58
1

Well figured it out, there still is probably some extraneous calculations that I'll refactor later, but here is what I figured out:

$scope.map.on('dblclick', function(evt) {
  //Calculates center coordinates (lon,lat) in (-180,180) & (-90,90) form
  $scope.coordinate = evt.coordinate;
  $scope.center = ol.proj.transform($scope.coordinate, 'EPSG:3857', 'EPSG:4326');

  //Caputures the current and calculates the 4 edges of the extent
  //Calculate edge pairs to be able to apply the projection transform
  $scope.map = evt.map;
  $scope.extent = $scope.map.getView().calculateExtent($scope.map.getSize());
  $scope.bottomLeft = ol.proj.transform(ol.extent.getBottomLeft($scope.extent), 'EPSG:3857', 'EPSG:4326');
  $scope.topRight = ol.proj.transform(ol.extent.getTopRight($scope.extent), 'EPSG:3857', 'EPSG:4326');

  //Caculates the 5x5 degree edges of the new extent based on the center of the click
  $scope.bottomLeft = [wrapLon($scope.center[0]-2.5), $scope.center[1]-2.5];
  $scope.topRight = [wrapLon($scope.center[0]+2.5), $scope.center[1]+2.5];
  $scope.bottomLeft = ol.proj.transform($scope.bottomLeft, 'EPSG:4326', 'EPSG:3857');
  $scope.topRight = ol.proj.transform($scope.topRight, 'EPSG:4326', 'EPSG:3857');
  $scope.extent = [$scope.bottomLeft[0], $scope.bottomLeft[1], $scope.topRight[0], $scope.topRight[1]];

  //Applies the new extent to the map upon double click
  $scope.map.getView().fit($scope.extent, $scope.map.getSize());
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.