Tengo un mosaico de mapbox geojson visualizado en un mapa. Actualmente puedo dibujar formas como polígonos, polilíneas y agregar puntos al mapa. Pero ahora quiero limitar la herramienta de dibujo para que solo permita dibujar dentro de los límites de la capa geojson. ¿Cómo haría esto? Lo que tengo actualmente, permite que el cursor cambie a un símbolo de desplazamiento cuando está fuera del mapa, y a un símbolo de cruz cuando está dentro del mapa.

Pero una vez que hago clic en los botones de la herramienta de dibujo, anula esto y permite que el usuario dibuje donde quiera.

 mapboxgl.accessToken = config.MAPBOX_PUBLIC; const map = new mapboxgl.Map({ attributionControl: false, container: "map", // container ID style: "mapbox://styles/mapbox/outdoors-v10", center: [-69.45, 45.07], // starting position [lng, lat] zoom: 8, // starting zoom }); export function makeClickableArea() { map.on("load", () => { map.addSource('maine', { 'type': 'geojson', 'data': { 'type': 'Feature', 'geometry': { 'type': 'Polygon', // These coordinates outline Maine. 'coordinates': [ [ [-67.13734, 45.13745], [-66.96466, 44.8097], [-68.03252, 44.3252], [-69.06, 43.98], [-70.11617, 43.68405], [-70.64573, 43.09008], [-70.75102, 43.08003], [-70.79761, 43.21973], [-70.98176, 43.36789], [-70.94416, 43.46633], [-71.08482, 45.30524], [-70.66002, 45.46022], [-70.30495, 45.91479], [-70.00014, 46.69317], [-69.23708, 47.44777], [-68.90478, 47.18479], [-68.2343, 47.35462], [-67.79035, 47.06624], [-67.79141, 45.70258], [-67.13734, 45.13745] ] ] } } }); // Add a new layer to visualize the polygon. map.addLayer({ 'id': 'maine', 'type': 'fill', 'source': 'maine', // reference the data source 'layout': {}, 'paint': { 'fill-color': '#0080ff', // blue color fill 'fill-opacity': 0.5 } }); // Add a black outline around the polygon. map.addLayer({ 'id': 'outline', 'type': 'line', 'source': 'maine', 'layout': {}, 'paint': { 'line-color': '#000', 'line-width': 3 } }); }); changeMouseSymbol(); } // add the draw tool function changeMouseSymbol() { const modes = MapboxDraw.modes; var draw = new MapboxDraw({ displayControlsDefault: false, // Select which mapbox-gl-draw control buttons to add to the map. controls: { point: true, line_string: true, polygon: true, },}); map.addControl(draw); map.on("mouseover", "maine", () => { map.getCanvas().style.cursor = "crosshair"; }); map.on("mouseleave", "maine", () => { map.getCanvas().style.cursor = ""; }); }