I created a marker with a custom image, but the image is anchored to the bottom of the image. I want to give the the centre if the image as the anchor point so that even if I rotate the image, it rotates around the centre.
I followed this excellent solution Rotating image / marker image on Google map V3 to rotate the custom image on the marker in agm/core (angular 4).
thanks to #ErDmKo
thanks in advance
It is possible by using the Object like in the official Google Maps Doc instead of the string like in the AGM Doc.
It works like:
<agm-marker [iconUrl]="{url: '/assets/icons/icon-map-home.png', anchor : {x:19, y:19}}">
Actually the functionality existed in the #agm/core, but its not documented...
we can give like this in iconUrl (it is supposed to be icon )
anchor : {x:25, y:25}
Related
When posting a link in a comment on a Facebook post, there's a small square thumbnail included in the link preview. My preview images are usually rectangular and so Facebook selects how to crop this into a square for the link preview. I've noticed in some images, there is a detectable person in the image and so the crop is taken around that. However, in other images where the content isn't entirely clear, the crop is just taken from the centre of the image, leaving the image empty as my content is usually on the sides.
The crop seems to be done using some parameters (sx sy sw sh), in the facebook comment itself:
center crop:
https://external-lht6-1.xx.fbcdn.net/safe_image.php?d=AQDVaAOputB_VkrO&w=90&h=90&url=...&cfs=1&upscale=1&_nc_hash=...
right crop:
https://external-lht6-1.xx.fbcdn.net/safe_image.php?d=AQAny2E3bpUGVeYX&w=90&h=90&url=...&cfs=1&upscale=1&sx=280&sy=0&sw=396&sh=396&_nc_hash=...
Is there a way to choose the square crop parameter values for the link preview? I can't see an option to do this from the debugging tools (https://developers.facebook.com/tools/debug/sharing/), and I can't see any options when actually posting the link in a Facebook comment. Perhaps there's a way to control this using the image alt tag? I have not seen anything in the Facebook API that might help. I understand I can change the preview image to a square but I don't want to take that route unless I have to.
I'm trying to clip an image overlay in Google Maps API, however without success. I can clip a HTML image successfully and overlay it on a Google MAP by using the CSS clip property and z-index property, however that's no use, as the image does not adjust to the Google map zoom and movements. i.e. the image is not bound to the Google MAP object in any way, doesn't respond to map changes.
If I assign the Google Map overlay to the cropped image source, it simply uses the original un-cropped source and not the cropped page image element. That's just how the image.src property works.
I successfully added an image overlay for Google MAPS, but there does not seem to be any clipping or cropping function for them. There is text on the image that I don't want to display for this application, but I don't want to crop the original source file image, as it's used for multiple display purposes.
historicalOverlay = new google.maps.GroundOverlay(imageurl,imageBounds);
historicalOverlay.setMap(map);
I need imageurl to point to a clipped version in memory or something like that or the clipped form image element, but not its un-clipped source image. Any ideas ?
The GroundOverlay class in Google Maps javascript API V3 does not provide any support for in-browser clipping/cropping of the image before display.
Because we needed that capability, plus some others like image rotation and non-rectangular images, we wrote a GroundOverlayEX javascript class that supports everything that the Google Earth version of GroundOverlay supports, including browser-side clipping/cropping of the image to-be-displayed.
The javascript class is open-source on Github at: https://github.com/azmikemm/GroundOverlayEX. There is API documentation as well (documentation.txt). All images shown by the GroundOverlayEX class are integral to the map, and will drag with the map, and zoom with the map.
A working functional example of the class in-action (with some clipped/ cropped images) is at: https://sites.google.com/site/issearthatnight/
If you turn off the VIIRS checkbox, and set the transparency down to midway, you'll see the images pretty plainly, and see that some are cropped (all are stored in NASA's servers as rectangles, so images that are square-ish or look like slices have been cropped by the GroundOverlayEX class).
I run into a problem with Geoserver.
I'm drawing multiple icons which each represent a place all over my map using ExternalGraphic.
But geoserver didn't draw them correctly as they are. I attach an image as the result of geoserver drawing:
As you can see, the 2 car icon, both got cut off around 1 pixel comapre to its original size (1 got cut off from top down while another from bottom up). It make same icon look differentfrom place to place. And i think because of this cutting, after lose some pixel, they resize the image back to its original size, which make the $ on top left look blurry compare to the one next to it.
Also as in External graphic document mention, i didn't use any Size attribute so they won't get resize or anything. So i'm not sure why the image got cut off like that.
Any1 can help me about this case ? Thank you in advance.
I suggest you open a report at http://jira.codehaus.org/browse/GEOS attaching one of the images and your style document.
I need to implement a feature where images can be geotagged. I want to drag and drop images(one or more images can be selected from the list) onto the map. Then the selected images should be geo tagged automatically to the point where they are dropped.
Can someone give me an idea on how to work on this.
Thanks
Yes, you can do this with HTML and Javascript.
I would advice you to use the jquery libary.
What you do is render the map where you want to place an image(for this example new york city)
What you do is use jquery to make the image you want to drop of yourself at the statue of liberty 50% opacity and draggable.
Under the image you have an in the middle of the image as a "pointer" which is not opaque.
People drag the "dot" under the image to the desired location.
When it's released you take the offset x and y, calculate that to the relative time x and y to find the geolocation and then store everything via ajax.
That's kinda the basis you'll have to work on to accomplish this.
It's a fun project though, but a bit timeconsuming.
What are my options for rotating an image on a web page through the Y-axis? I'm not sure if I even have the terminology right. Is this called a rotate or a transform. Most of the searches that I've done with "rotate image" show images being turned. What I'm looking for is the mirror image of the image or what it looks like if you were standing behind it.
I'm looking for something that might be available as a plugin to jQuery or something that can be done with CSS3 or HTML5. I'm also considering doing this in Silverlight but I'm still trying to find an example of what this on the web...
I think this is, what you seek:
http://plugins.jquery.com/project/reflect