Is it possible add click events to imported GeoJSON Features and Drawn Features?

Question

Currently I'm using this code snippet from popupsOnShapes. Currently it is restricted to all the shapes we create in code. If I have some features from geojson file in map, Its not working.

Is there any way to achieve this?

function featureClicked(e) {
    //Make sure the event occurred on a shape feature.
    if (e.shapes && e.shapes.length > 0) {
            //By default, show the popup where the mouse event occurred.
            var pos = e.position;
            var offset = [0, 0];
            var properties;
            clickedShapeId = e.shapes[0].getId();

          if (e.shapes[0] instanceof atlas.Shape) {
            properties = e.shapes[0].getProperties();

            //If the shape is a point feature, show the popup at the points coordinate.
            if (e.shapes[0].getType() === "Point") {
              pos = e.shapes[0].getCoordinates();
              offset = [0, -18];
            }
          } else {
            properties = e.shapes[0].properties;

            //If the shape is a point feature, show the popup at the points coordinate.
            if (e.shapes[0].type === "Point") {
              pos = e.shapes[0].geometry.coordinates;
              offset = [0, -18];
            }
          }

          //Update the content and position of the popup.
          popup.setOptions({
            //Create a table from the properties in the feature.
            content: atlas.PopupTemplate.applyTemplate(properties),
            position: pos,
            pixelOffset: offset,
          });

          //Open the popup.
          popup.open(map);
    }
}

Accepted Answer

Based on your it looks like the issue you are seeing is features you add to the datasource directly in code and attaching to the polygonLayer and pointLayer are working as expected, but the data you are importing into the data source of the drawing manager is not displaying a popup when clicked.

The simple reason for this is that you haven't added a click event to the layers used to render the imported GeoJSON. That imported GeoJSON data is being rendered on the map by layers in the drawing manager. You can add a click event to these layers, however you will likely want to add some logic that only shows a popup with the drawing manager is in an idle state (not drawing or editing), otherwise that might lead to some odd behavior. Here is a code sample:

var layers = drawingManager.getLayers();

//Add click event to layers of the drawing manager.
map.events.add('click', [
	layers.polygonOutlineLayer,
	layers.polygonLayer,
	layers.lineLayer,
	layers.pointLayer
], drawingLayerClicked);
 
function drawingLayerClicked(e) {

	//Check if drawing manager is idle.
	if(drawingManager.getOptions().mode === 'idle') {
		//Pass the event through to the feature click event handler.
		featureClicked(e);
	}
	
	//Otherwise ignore the event.
}

Share via

Is it possible add click events to imported GeoJSON Features and Drawn Features?

0 additional answers