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)
Related
enter image description herePer this page (https://www.highcharts.com/docs/maps/custom-maps) I open inkscape, insert an image I want to draw over and then click on "resize page to selected object" with the image selected. This resizes the page to the size of my background image. I then create the shapes over the image as instructed in the page referenced above. What I want to do is when I paste the svg into the highcharts converter it keeps the shapes as drawn on the page so that I can then insert that same picture into the background of my highchart map on the page and the shapes I have drawn fit perfectly where I drew them on the image in inkscape. Instead it seems like the converter resizes the shapes to best fit the screen. If I didn't want the background image then this would be perfect however with this feature all the images drawn no longer "fit" in the background image where I drew them. Any way to get this to be a 1:1 size conversion so that inserting a background image works?
I am developing an app in which I have a Map control! On this map, I am adding custom pushpins via map.Children property. How can I set a LocationRectangle and then zoom on it? Because I want my pushpins not to be out of the screen size. I want the map to zoom on a level in which all of the pins will be on the screen!
You can use the MapControl's TrySetViewBoundsAsync method. This method allows you to specify a bounding box of the area you want to display (which you can calculate by finding the the farthest pushpins in all directions, which will give you the north-west and south-east corner of the area), a potential margin and a map animation to use while the view is being changed.
You can find more details about the method in the documentation.
When an OpenLayers 3 map is resized, the contents of the map are stretched to fit the new map size. This is typically fixed by calling map.UpdateSize() after the change for the map to adapt.
However, I'm wondering how to achieve a smooth transition for the map contents when animating the width of the map.
Here is a minimal example of the problem.
The map resizes in a very unpleasant way before the update happens.
I figured out that changing the ol.Map renderer to 'dom' fixes the issue, but unfortunately this is not an option for me.
I am trying to create a map grid using Google maps. I have a fixed border frame and need to create an overlay on top, similar to this and this example. However, I also need to be able to hover over map tiles using the mouse cursor and change the hue/saturation of the overlay elements accordingly. Each element in the grid will have an onClick() event associated with it.
After some research I found libraries that can be used to draw a grid such as OSMatrix.I also noticed that one of the d3.js examples is somewhat similar to what I am aiming to achieve. The question is, how can I add the visualization as an overlay on top of a map and is it possible to accomplish with API v3 and JavaScript?
Please help me to change size of openInfoWindowHtml in google map and plez tell me can i make it popup out of map area also..? i mean my map area is very small but i want that when user click on Marker this openInfoWindowHtml should show popup and if its crossing size of map than its should show beyond the boundary of google map. ( i am working in asp.net)
There are 2 ways that you can influence the size of the InfoWindow. First, you can pass a GInfoWindowOptions object when you call openInfoWindowHtml (see: http://code.google.com/apis/maps/documentation/reference.html#GInfoWindowOptions) Second, you can wrap the contents of the InfoWindow in a div and use CSS to set the size of that div.
Regardless of which method you use to set the size of the InfoWindow, it can never exceed the bounds of the map canvas (area).