How to get the current center tile in OpenLayers 3? - javascript

I'm trying to find out which is the currently centered tile in OpenLayers 3.
I can get the current position as latitude/longitude with map.getView().getCenter(), and the zoom level as map.getView().getZoom().
Am I supposed to convert this to map tiles manually, or does OpenLayers 3 provide a functionality to easily calculate the correct tile x/y indices (the one in which the center lat/lon is located), or am I supposed to calculate this by myself?

you can convert the center position with
center = ol.proj.transform(center, 'EPSG:900913', 'EPSG:4326');

Given a ol3 tile source, you can get the TileGrid by source.getTileGrid().
Then use the getTileCoordForCoordAndResolution method, to get the tile coordinates from a given map coordinate and resolution.

Related

How to reduce visible part (or mask) of mapbox style layer?

I have hexagonal tileset added as a layer to mapbox style though mapbox studio.
Trying to find possibility to reduce layer visible area. For example to show only 100m radius (or square with side equal to 100m) area around map center (current point marker).
Is this possible?
You can create a bounding box and use fitBounds method of the map, for example:
const boundingBox = [
[minX, minY],
[maxX, maxY]
];
map.fitBounds(boundingBox);
More about fitBounds and other examples you can find here.
For creating bounding box you can use Turf.js library.
This code uses buffer and bbox methods to create bounding box with 100m side and given point in the center:
const pointBuffer = turf.buffer(point /* - your point GeoJSON */, 0.1, 'kilometers');
const boundingBox = turf.bbox(pointBuffer);

leaflet icon size based on meters

I want to display objects on a map in their exact dimensions.
I have reference data about these objects, containing the length and width of the object in meters, now I need to convert the meters into pixels for the leaflet icon size based on the zoom level.
var meterlength = 50;
var meterwidth = 40;
//convert meters to pixels
var icon = L.divIcon({html:"<svg>..</svg>",iconSize:[xx,yy]});
I found this https://github.com/makinacorpus/Leaflet.GeometryUtil/
GeometryUtils with the length and distance function, but could not get it working.
Any ideas ? Thank you very much !
EDIT:
This answer solved my original problem:
https://gis.stackexchange.com/a/198444
But I'm sacling the icons on map zoom using the "zoomanim" event - unfortunately the map.containerPointToLatLng() Methode applies to the old zoom level not to the new one.
Is there a Workaround ?
If you want your image to represent the object real size, then you should probably better use an L.imageOverlay instead of a marker and trying to adjust its size based on zoom level.
See https://gis.stackexchange.com/questions/171609/resize-divicons-svgs-at-zoom-levels-leaflet
Then you would need to find the appropriate coordinates for your Image Overlay bounds, not pixels.
Now if you really want to change your marker icon size depending on the zoom level, you have several posts on SO and GIS SE that cover this topic.
E.g. Best way to make marker resizable in leaflet

Google Maps: Checking if a polyline passes thru a circle

I would like to ask how do I check if a certain Polyline passes thru a Circle? In the image below, the red polyline passes inside the green circle. I know it is possible to determine if a marker is within a circle but i don't know how to do it or if it is feasible for polylines.
I still have 8 reputation points so I can't post images, here's the link to the image: http://i.stack.imgur.com/0fzXu.png
Thanks in advance! :)
I'd probably do the following:
Get bound of circle.
Filter the polyline coordinates and find the points that fall into that bound.
Calculate distance between circle center and each of those points. (circle/bound center can be easily obtained by some built-in method)
If any distance < circle radius, it gives you result.
Only problem with this algo is, if your polyline goes through the circle but your list of popyline coordinates does not contain one that falls in the bound. I haven't come up with a solution for that yet :)

google map direction points

I have a gmap with direction line displayed on it (2 or more points). Is there any way to get all points from map depending viewport (zoom level), only those that user can see ?
I won't give you the tea spoon version, but here is how you do it. First of all, make sure you have all your markers available in an array.
Get the bounds from your map: map.getBounds(). This will return a LatLngBounds object, which contains the coordinates of the bottom left point of your viewport as well as the top right part.
Iterate through all your markers. Get their positions: marker.getPosition() and check if they are above and to the right of the map bounds south west point, as well as below and to the left of the map bounds north east point.
If they are, add these points to an array.
That array now contains all the points in your viewport. Repeat as necessary.
More information can be found in the Google Maps API v3 reference

Google MAP API v3: Move center between two locs

How can I move the camera from one loc to another loc ? I have checked the API but I couldn't find what I want beside the setCenter method which directly sets the center to the given location but I want to a smooth transtition, not an instant center change.
http://code.google.com/apis/maps/documentation/javascript/reference.html#Map
Method panTo.
Changes the center of the map to the
given LatLng. If the change is less
than both the width and height of the
map, the transition will be smoothly
animated.

Categories

Resources