Select to view content in your preferred language

JimuMapView will not zoom

314
10
Jump to solution
05-17-2024 05:23 AM
AngelaSchirck
Occasional Contributor III

Hi all,

I'm creating a widget and want it to zoom to a particular lat/lon.  All functionality of the widgit works great except the zoom.  It will pan to the point but not zoom in no matter what zoom level I put. There are no zoom restrictions on the map itself, whatever zoom level the map is in, it stays at and pans to the point.  I've tried several different ways to do this, here is my latest relevant code.  Here mapViewRef refers to a JimuMapView instance.

```

const searchAndZoomToLocation = () => {
    if (mapViewRef.current && inputLatitude && inputLongitude) {
      const lat = parseFloat(inputLatitude);
      const lon = parseFloat(inputLongitude);
      if (!isNaN(lat) && !isNaN(lon)) {
        // Add point to the specified location
        const point = new Point({
          longitude: lon,
          latitude: lat
        });
        const pointGraphic = new Graphic({
          geometry: point,
          symbol: pointSymbol.current
        });
       
        mapViewRef.current.view.goTo({target: point, zoom: 14}); // Zoom to point
        mapViewRef.current.view.graphics.removeAll(); // Remove existing graphics
        mapViewRef.current.view.graphics.add(pointGraphic);

      }
    }
```
 
Any ideas why this only pans and doesn't zoom? What ever number I set zoom to, it doesn't change the result.
0 Kudos
2 Solutions

Accepted Solutions
JeffreyThompson2
MVP Regular Contributor

Is it possible your basemap does not have defined LODs (zoom levels)? What happens if you replace the zoom property with the scale property?

https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html#GoToTarget2D

GIS Developer
City of Arlington, Texas

View solution in original post

0 Kudos
AngelaSchirck
Occasional Contributor III

Okay, solved my own problem....

Instead of setting mapViewRef.current.view.zoom = 14; I used mapViewRef.current.view.scale = 1000; and it now zooms to the point.

View solution in original post

0 Kudos
10 Replies
emreaktas1
New Contributor II
specific zoom and you can place the map within specific geographic coordinates
 
const view = new MapView({
        container: "viewDiv",
        map: map,
        center: [latitude ,longitude ],
        zoom: 12,
           
        constraints: {
          geometry: {      
            type: "extent",
             xmin: 3269655.5200,
             ymin: 4780511.2100,
             xmax: 3296867.1000,
             ymax: 4810818.4900,
            spatialReference: {
              wkid: 102100
            },                    
          },
          minZoom: 11,
          maxZoom:20,
          rotationEnabled:false,
        }    
      });
0 Kudos
AngelaSchirck
Occasional Contributor III

Thanks, but didn't help, still panning not zooming.

0 Kudos
emreaktas1
New Contributor II

Hello
How can I get the entered text value with searchWidget?

0 Kudos
JeffreyThompson2
MVP Regular Contributor

Have you tried re-ordering your functions? See what happens if you call goTo() after the add().

GIS Developer
City of Arlington, Texas
0 Kudos
emreaktas1
New Contributor II

Hİ @JeffreyThompson2 

Hello
How can I get the entered text value with searchWidget?

0 Kudos
AngelaSchirck
Occasional Contributor III

Your question is vague and not an answer to this post, please start a new thread with your question.

0 Kudos
AngelaSchirck
Occasional Contributor III

Hi, 

Yes, I also recently tried "goTo" THEN zoom but it STILL won't zoom: 

`

  const searchAndZoomToLocation = () => {
    if (mapViewRef.current && inputLatitude && inputLongitude) {
      const lat = parseFloat(inputLatitude);
      const lon = parseFloat(inputLongitude);
      if (!isNaN(lat) && !isNaN(lon) && isValidCoordinate(lat, lon)) {
        const point = new Point({
          longitude: lon,
          latitude: lat
        });
        const pointGraphic = new Graphic({
          geometry: point,
          symbol: pointSymbol.current
        });

        mapViewRef.current.view.graphics.removeAll();
        mapViewRef.current.view.graphics.add(pointGraphic);
       
        mapViewRef.current.view.goTo({ target: point }).then(() => {
          mapViewRef.current.view.zoom = 14;
        });
`
0 Kudos
JeffreyThompson2
MVP Regular Contributor

Is it possible your basemap does not have defined LODs (zoom levels)? What happens if you replace the zoom property with the scale property?

https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html#GoToTarget2D

GIS Developer
City of Arlington, Texas
0 Kudos
AngelaSchirck
Occasional Contributor III

Oh, wow, I actually did that and it worked, but I didn't see this post until after!  Thanks!

0 Kudos