After drawing a polygon on the Map, when clicking on the Map, the polygon will turn into a static mode (blue color). Is it possible to keep the editable mode when the user clicks on the Map outside the polygon?
this.draw = new MapboxDraw({
displayControlsDefault: false,
});
this.map.addControl(this.draw);
Related
I wrote a very simple method that works on Desktop with a mouse. But on touchscreen devices, as expected, the map is dragged and not drawn on.
var drawMode = false;
var myDrawing;
//some button that toggles on drawing, for now just manually doing it in console for testing.
map.on('click', function()
{
if (drawMode)
{
myDrawing = L.polyline([]).addTo(map);
}
})
map.on('mousemove', function(e)
{
if (drawMode)
{
myDrawing.addLatLng(e.latlng);
}
})
Is there anyway to disable dragging the map while in drawing mode? My end goal is just to toggle draw mode on and off with a button.
You can disable map drag with map.dragging.disable() and enable it with map.dragging.enable()
I have a Bing map with drawing manager enabled for users to draw shapes (mostly one polygon at a time). I want to be able to get the details of the drawn polygon so I can save it in the database.
The below function can access the shapes but returns the coordinates only
function getShapes()
{
var shapes = drawingManager.getPrimitives();
if (shapes && shapes.length > 0)
{
var rings = shapes[0].getRings();
alert('Retrieved ' + rings[0] + ' from the drawing manager.');
}
else
{
alert('No shapes in the drawing manager.');
}
}
result is:
Retrieved [MapLocation (35.17314901376581, 44.72432011035158)],[MapLocation (35.10324034213123, 44.73015659716798)],[MapLocation (35.12346106720259, 44.90525120166017)],[MapLocation (35.18633788986748, 44.88362186816408)],[MapLocation (35.17314901376581, 44.72432011035158)] from the drawing manager.
How can I get the exact drawn shape details not just the coordinates?
Remove getRings() and you will have the shape object. The Get Rings function retudrrns the coordinates of a polygon.
I have just started getting used to using Unity's new tilemap tool (UnityEngine.Tilemaps).
One issue I am having is that I don't know how to get the x,y coordinates of a placed tile via script. I am trying to move a scriptableObject on the tilemap in script to a new location that the player clicks, but I don't know how to get the coordinates of the clicked tile location. There doesn't seem to be any position property for the Tile class (the Tile knows nothing about its location), so the Tilemap must have the answer. I was not able to find anything in the Unity documentation for how to get the Vector3 coordinates for a selected tile in the Tilemap.
If you have access to the Tile instance you can use its transform (or the raycast hit from the click) to get its world position and than get the tile coordinates via the WorldToCell method of your Grid component (look at the documentation).
EDIT:
Unity seems to not instantiate the tiles but instead uses only one tile object to manage all tiles of that type, i wasn't aware of that.
To get the correct position you have to calculate it yourself. Here is an example of how to get the tile position at the mouse cursor if the grid is positioned at the xy-plane with z = 0
// get the grid by GetComponent or saving it as public field
Grid grid;
// save the camera as public field if you using not the main camera
Ray ray = Camera.main.ScreenPointToRay(Input.mousePosition);
// get the collision point of the ray with the z = 0 plane
Vector3 worldPoint = ray.GetPoint(-ray.origin.z / ray.direction.z);
Vector3Int position = grid.WorldToCell(worldPoint);
I couldn't find a way to get the Grid's position from mouse click, so instead I used a Raycast to Vector3, and then converted that to coordinates via the WorldToCell method of the Grid component as per Shirotha's suggestion. This allows me to move the selected GameObject to a new position.
public class ClickableTile : MonoBehaviour
{
public NormalTile normalTile;
public Player selectedUnit;
private void OnMouseUp()
{
// left click - get info from selected tile
if (Input.GetMouseButtonUp(0))
{
// get mouse click's position in 2d plane
Vector3 pz = Camera.main.ScreenToWorldPoint(Input.mousePosition);
pz.z = 0;
// convert mouse click's position to Grid position
GridLayout gridLayout = transform.parent.GetComponentInParent<GridLayout>();
Vector3Int cellPosition = gridLayout.WorldToCell(pz);
// set selectedUnit to clicked location on grid
selectedUnit.setLocation(cellPosition);
Debug.Log(cellPosition);
}
}
}
On an aside, I know how to get the Grid location, but now how to query it. I need to get the GridSelection static object from Grid, and then get its position.
I have a geojson polygon adding to the map with the click of a button. I also have the style of the polygon changing on the mousedown event on the geojson and the x/y coord pairs (the geojson geometry) printing to the console accessing it through the queryRenderedFeatures call on the API.
I am now wanting to make the polygon draggable like the point example (links below) on the mousedown event on the polygon and be able to move it on the map, updating the x/y coords of the polygon nodes throughout the mousedown event, but keeping the geojson size intact throughout the drag.
Is straight mapbox-gl-js the way to do this, or should I be feeding a pre-configured geojson polygon into a mapbox-gl-draw - draw polygon mode on a user's action?
Any suggestions or examples?
API Drag A Point Example
Drag A Point GitHub Code
Try this
var isDragging = false;
var startCoords;
map.on('click', function(e) {
var features = map.queryRenderedFeatures(e.point, { layers: ['polygon-layer'] });
var polygon = features[0];
if (!polygon) return;
startCoords = polygon.geometry.coordinates[0];
});
map.on('mousedown', function(e) {
isDragging = true;
});
map.on('mousemove', function(e) {
if (!isDragging) return;
var coords = map.unproject(e.point);
var delta = {
lng: coords.lng - startCoords[0],
lat: coords.lat - startCoords[1]
};
polygon.geometry.coordinates[0] = polygon.geometry.coordinates[0].map(function(coord) {
return [coord[0] + delta.lng, coord[1] + delta.lat];
});
map.getSource('polygon-source').setData(polygon);
});
map.on('mouseup', function(e) {
isDragging = false;
});
the polygon is being stored as a GeoJSON feature, and the polygon layer and source are named 'polygon-layer' and 'polygon-source', respectively. You will need to adjust these names to match your setup.
I'm using an imageoverlay in leaflet
var imageUrl = 'img.png';
L.imageOverlay(imageUrl,mapBounds1).addTo(map);
When i zoom the map, the image zooms also , is there any way to make the image static ?
I also tried tiles (from the image), and it zooms also, i'm wondering if the only way is to create multiple tiles for each zoom.
Any help ?
You could try something like this...
map.on('zoomstart', function(e) {
//remove layer
});
map.on('zoomend', function(e) {
//add layer back with new bounds
});
You need to subscribe somehow to the viewreset event
viewreset is fired when the map needs to reposition its layers (e.g. on zoom), and latLngToLayerPoint is used to get coordinates for the layer's new position. (http://leafletjs.com/reference.html#map-viewreset)
I'm not sure this will work, but try something like
var imageUrl = 'img.png';
var overlay = L.imageOverlay(imageUrl,mapBounds1).addTo(map);
overlay.off('viewreset');