I have openlayers map with a polygon feature.
When we hover over the polygon, it displays the description in overlay.
However the overlay is always displayed on the polygon and not to left and right which is what I am trying to do. In doing so I juggled with css of overlay but couldn't come to the solution. There is leaflet bindPopup() method to display tooltip on objects added to map which I tried to understand but couldn't gain anything there.
My goal is to keep the overlay within the viewport of the map so that it would always be visible.
Just to illustrate what I am expecting here is the fiddle : leaflet popup
Current status : Openlayers overlay positioning
Just set the overlay to appear on the left of the extent of the polygon, such as:
if (feature && feature.get('type') == 'Polygon') {
var ext = feature.getGeometry().getExtent();
let coordinate = [ext[0], (ext[3]-ext[1])/2];
content.innerHTML = feature.get('desc');
popup.setPosition(coordinate);
}
Then you can play with the CSS to display the overlay the way you want.
Related
I'am using reactJS and want to design a component with following functionality :
Display pixelated image which is able to zoom in and zoom out at pixel level.
When clicked on image , display a marker- which can be a dot or icon at specific position.
When image is zoomIn/zoomOut, marker size and position should not change.
Even after zoomIn/zoomOut when clicked on image, marker should get repositioned at proper pixel on the image.
I am thinking of applying same logic as used in the maps/ leaflet. Like they maintain separate layers for map and markers on the map. If we zoomIn/out maps it won't affect the marker position or size, same functionality I want for the image.
Anyone with the solution or related library will be welcomed !
(For reference, I want this design for marking GCP(Ground Control Points) on the image, which requires very precise marking at pixel level)
I have a Map that fills the window and some locations from which I generate a georectangle. I want to set the visibleRegion of the Map to the georectangle but I also want a margin (in pixels) a the bottom of the window for overlays, so that the locations are never hidden behind the overlays. How can I do this?
Is there a way in Geoviews to always display only a small box / portion of the map rather than the whole world zoomed out? It seems to always begin such that the entire world is displayed. I was wondering if there is any option to choose the min/max latitude and min/max longitude?
If you display a WMTS element on its own it will default to a global view. You can however override that by setting the extents on the element, e.g.:
gv.WMTS(some_url, extents=(-70, 20, -50, 30))
The extents are defined a 4-tuple of the (left, bottom, right, top) edges. However if you overlay some actual data on top of a tile source it should automatically set the extents to the range of your data.
I'm struggling with google map API (with Ionic 3) :
I create a regular polygon with 6 points on the google map, and I want to put an image on the center.
I have the coordinates of the center and of course, of each point of the polygon.
When I put a marker on the center with an Icon, the bottom-left of the image start on the coordinates I set in the marker.
Does someone know how I can center the image ?
I want to compare a raster I made against Google's satellite basemap. I produced a georeferenced coloured TIFF with appropriately placed nodata where it should have. I then tiled this using gdal2tiles. When I overlay my custom TIFF on Google sat. map it works fine but my custom map is surrounded by a gray background instead of a transparent one.
I believe it's because swipe replaces the two layers altogether. Is there a way to achieve what I want properly?
You are probably using leaflet-side-by-side plugin?
In that case, and if you need the same background tiles in both sides, a very simple trick is to add that background Tile Layer to the map, but not to L.control.sideBySide. You can leave the left side as an empty array for example.
var backgroundTiles = L.tileLayer(backgroundTilesUrl).addTo(map);
// Tiles with transparent background
var customTransparentTiles = L.tileLayer(customTilesUrl}).addTo(map);
L.control.sideBySide([], customTransparentTiles).addTo(map);
Demo: http://jsfiddle.net/ve2huzxw/149/
If you need a different background tile layer on the right side (under your custom transparent tiles), simply create a new Tile Layer instance and pass an array of layers as 2nd argument of L.control.sideBySide.
Note: for some reason the left Tile Layer must be added last to the map.
var backgroundTilesRight = L.tileLayer(backgroundTilesRightUrl).addTo(map);
var backgroundTilesLeft = L.tileLayer(backgroundTilesLeftUrl).addTo(map);
// Tiles with transparent background
var customTransparentTiles = L.tileLayer(customTilesUrl).addTo(map);
L.control.sideBySide(
backgroundTilesLeft,
[
backgroundTilesRight,
customTransparentTiles
]).addTo(map);
Demo: http://jsfiddle.net/ve2huzxw/150/