nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Zoom to a feature on a mouse click event

RoxanneWilson

So, working on my first app and I have a point layer with a few locations in it. I'm trying to create an event where, when the user clicks on a location, the map extent zooms to that location. This is what I have so far and it doesn't work (not a shocker)....

layerName.on("click", function (zoom) {

map.zoom (zoom.layer.setZoom(4));

});

Find more posts tagged with

Accepted answers

PanagiotisPapadopoulos54

on this function

layerName.on("click", function (event) {

take the selected geometry event.graphic

and zoom on the map

map.centerAndZoom(event.graphic.geometry, 4);

});

All comments

RickeyFight

Are you using a sample?

Can you post more of your code?

TomSellsted

Roxanne,

Zoom is not a method of map. When a graphic in a feature layer is clicked, it will return the graphic, You can then use the graphic geometry or the event mapPoint to zoom to that location. Here is a further explanation:

FeatureLayer | API Reference | ArcGIS API for JavaScript

It should look something like this:

layerName.on("click", function (event) {

map.centerAndZoom(event.mapPoint, 4);

});

Regards,

Tom

RoxanneWilson

I've added that into my code, but nothing is happening yet.

Do I need to add something else? I've been reading about event listeners, but I don't understand a lot of that quite yet.

FC_Basson

The click tolerance might cause that you are just missing the features with the click event and therefore nothing is happening. Try setting the click event on the map object.

PanagiotisPapadopoulos54

on this function

layerName.on("click", function (event) {

take the selected geometry event.graphic

and zoom on the map

map.centerAndZoom(event.graphic.geometry, 4);

});

RoxanneWilson

This doesn't appear to do anything either.

layer.on("click", function (event) {

map.centerAndZoom(event.graphic.geometry, 4);

});

RoxanneWilson

Using developer tools, I found there was an error with another part of my code.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.