I try a lot but not success to find a way to show icon of marker from url.
addMarker(mark, index): void {
const marker = new Marker();
marker.position = Position.positionFromLatLng(mark.latitude, mark.longitude);
marker.icon = 'iconsdb.com/icons/preview/red/map-marker-2-xxl.png'; // default pin
this.mapView.addMarker(marker);
}
Using this for icons image from assets was working fine. now I have icons stored on cloud and I need to use them as per record.
Since loading image from assets works with an ImageSource, I believe you should be able to do a similar thing for images from URL. Also see documentation
The ImageSource has a 'fromUrl' you can call. So this should work for you (borrowing part of the code from your linked question)
let imgSrc = new ImageSource();
imgSrc.fromUrl("iconsdb.com/icons/preview/red/map-marker-2-xxl.png");
let image = new Image();
image.imageSource = imgSrc;
marker.icon = image;
You should probably cache the image so it won't be downloaded x times.
Related
Hey guys so I have this konva js app that has your typical background video just like the demo or close to it. I am able to play the video background and add image objects on top of it etc. Now I want a way to save the stage in its current state. So I do state.stage.toJSON() and as expected it creates a serialized JSON object. Now here's where I am hung up. when I load the stage like so state.stage = Konva.Node.create(data.stage, "container"); the stage data gets loaded (it is the correct size and so forth) yet there is no background video, no images or anything how do I fix this? I don't even know if stage.toJSON is correct but the point is I need to save it, leave the page and load it back up at a future date.
state.backgroundVideo = new Konva.Image({
image: state.video,
draggable: false
});
state.video.addEventListener("loadedmetadata", function(e) {
state.backgroundVideo.width(state.width);
state.backgroundVideo.height(state.height);
});
state.anim = new Konva.Animation(function() {
// do nothing, animation just need to update the layer
}, state.layer);
state.layer.add(state.backgroundVideo);
state.layer.batchDraw();
const canvas = document.getElementsByTagName("canvas")[0];
state.canvas = canvas;
node.toJSON() doesnt serialize image or video objects from Konva.Image attributes.
To solve the issue you can save video or image src into custom attribute:
image.setAttr('source', imageURL);
A simple string will be serialized into JSON. Then after you created a node from the JSON Konva.Node.create(data.stage, "container");
You need to find such nodes and restore image or video manually
// "video-background" is a sample here
// you can define your own selector
const videoNode = stage.findOne('.video-background');
const source = videoNode.getAttr('source');
const video = document.createElement('video');
video.src = source;
videoNode.image(video);
For more information take a look here:
https://konvajs.org/docs/data_and_serialization/Complex_Load.html
https://konvajs.org/docs/data_and_serialization/Best_Practices.html
thanks #lavrton your comments really helped me figure it out. Rather than loading the stage directly however I just saved the data from the stage used the data to rebuild the stage in the exact same way. Heres the code I used to get the data to save.
Heres my code:
const groups = state.stage.find("Group");
const stageData = [];
for (let x = 0; x < groups.length; x++) {
let g = groups[x];
let i = g.findOne("Image").getAttrs();
let group = { x: g.getX(), y: g.getY() };
let image = { x: i.width, y: i.height };
let obj = { image, group, jsonId: g.getAttr("jsonId") };
stageData.push(obj);
}
console.log("stageData", stageData);
I've got a PDF file of a technical drawing that contains one page with bookmarks linking to specific areas of the document.
When I click those bookmarks in Adobe Reader or Foxit Reader, it zooms to this specified area. But in Apple's Preview.app or iBooks or a PDFKit based iOS-App it won't work. Even PSPDFKit can't handle those bookmarks.
I'm building a PDFView based iOS-App that can handle those bookmarks. When I debug the PDFOutline property I can see that the contained PDFDestination object contains the information, but in private fields. I can watch them during debugging.
Also when I access the description property of the PDFDestination object, I'm getting the following:
FitR, page = 0, l = 132.0, b = 451.0, r = 400.0, t = 724.0
But the values zoom and point return 3.40282347e+38F which is the max value of CGFloat on 32-bit systems which means they're not properly set.
PDFView Config
Here's a litte more code, showing how I configured my PDFView
pdfView.document = document
pdfView.displayDirection = .horizontal
pdfView.autoScales = true
pdfView.usePageViewController(true, withViewOptions: nil)
pdfView.enableDataDetectors = false
pdfThumbnailView.thumbnailSize = CGSize(width: 44, height: 32)
pdfThumbnailView.pdfView = pdfView
pdfThumbnailView.layoutMode = .horizontal
Go to PDFOutline
// Load the first outline element
let outline = document.outlineRoot?.child(at: 0)?.child(at: 0)
let destination = outline!.destination
// This way to access the destination yields in the same thing
let destinationViaAction = (outline?.action as? PDFActionGoTo)?.destination
// Nothing happens here...
pdfView.go(to: destinationViaAction!)
// nor here
pdfView.go(to: destination!)
Questions
Is it a bug in PDFKit that the properties zoom and point of PDFDestination are not correctly calculated by those existing inset values?
Am I allowed to parse the description of PDFDestination and work with those values? Or will Apple refuse my App because of accessing private information?
Update
I filed a bug at Apple and will update this question when I get a response.
I'm using the Xam.Plugin.Media in my Forms app to take pictures.
I take the Image stream (GetStream) and convert to a byte[] and store in my DB.
I then use that as the image source.
On Android and UWP, its working fine.
On iOS, if the picture is taken in portrait mode, the image once, selected is always rotated 90 deg.
I will later, upload this to a server and that image could be used on a different device.
For this, I also tried the GetStreamWithImageRotatedForExternalStorage but in this case, I cant see the image at all.
There are bytes in the stream (I DisplayAlert the length) but the image does not display.
Any idea what I might be doing wrong?
My code:-
private async Task TakePicture(WineDetails details)
{
await CrossMedia.Current.Initialize();
if (CrossMedia.Current.IsCameraAvailable && CrossMedia.Current.IsTakePhotoSupported)
{
var file = await CrossMedia.Current.TakePhotoAsync(new Plugin.Media.Abstractions.StoreCameraMediaOptions
{
AllowCropping = true,
PhotoSize = Plugin.Media.Abstractions.PhotoSize.Medium,
SaveToAlbum = false,
RotateImage = true
});
if (file == null)
return;
using (var ms = new MemoryStream())
{
var stream = file.GetStreamWithImageRotatedForExternalStorage();
stream.CopyTo(ms);
details.LabelImage = ms.ToArray();
details.NotifyChange("ImageSource");
}
}
}
The image is updated in the page via the NotifyChange and looks like this:-
ImageSource.FromStream(() => new MemoryStream(this.LabelImage))
This works fine in all cases on Android and UWP, works on iOS using GetStream (except the image is incorrectly rotated) but does not work using GetStreamWithImageRotatedForExternalStorage on iOS.
Anyone else using this plugin?
Any idea why GetStream returns a rotated image?
Any idea why GetStreamWithImageRotatedForExternalStorage is not working?
Thanks
Update:-
Changed SaveToAlbum = true and when I open the gallery, the image is rotated 90 deg.
Have RotateImage = true which could cause the issue? I'll try setting it to false.
I still can't set the image source to the byte array of the image using GetStreamWithImageRotatedForExternalStorage.
using (var ms = new MemoryStream())
{
file.GetStreamWithImageRotatedForExternalStorage().CopyTo(ms);
details.LabelImage = ms.ToArray();
}
using the byte array for an image
return ImageSource.FromStream(() => new MemoryStream(this.LabelImage));
This does not work for me, GetStream works ok.
Update:-
Ok so, RotateImage = false + GetStreamWithImageRotatedForExternalStorage allows me to display the image but its still incorrectly rotated in my app and the gallery.
I'm using this plugin, which is similar (if not the same thing - I know James Montemagno has recently packaged/bundled his work with Xamarin).
If you check the issues board there, you'll see there are quite a few people that have similar troubles (image rotation on iOS). Almost every 'solution' mentions using GetStreamWithImageRotatedForExternalStorage.
My issue was similar - I was unable to take a photo on iOS in portrait mode, without other (non-ios Devices) rotating the image. I have tried for weeks to solve this issue, but support on the plugin seems to be quite limited.
Ultimately I had to solve this with a huge workaround - using a custom renderer extending from FFImageLoading to display our images and MetadataExtractor. We were then able to extract the EXIF data from the stream and apply a rotation transformation to the FFImageLoding image control.
The rotation information was stored in a sort of weird way, as a string. This is the method I'm using to extract the rotation information, and return the amount it needs to be rotated as an int. Note that for me, iOS was able to display the image correctly still, so it's only returned a rotation change for Android devices.
public static int GetImageRotationCorrection(byte[] image)
{
try
{
var directories = ImageMetadataReader.ReadMetadata(new MemoryStream(image));
if (Device.Android == "Android")
{
foreach (var directory in directories)
{
foreach (var tag in directory.Tags)
{
if (tag.Name == "Orientation")
{
if (tag.Description == "Top, left side(Horizontal / normal)")
return 0;
else if (tag.Description == "Left side, bottom (Rotate 270 CW)")
return 270;
else if (tag.Description == "Right side, top (Rotate 90 CW")
return 90;
}
}
}
}
return 0;
}
catch (Exception ex)
{
return 0;
}
}
Note that there is also a custom renderer for the image for FFImage Loading.
public class RotatedImage : CachedImage
{
public static BindableProperty MyRotationProperty = BindableProperty.Create(nameof(MyRotation), typeof(int), typeof(RotatedImage), 0, propertyChanged: UpdateRotation);
public int MyRotation
{
get { return (int)GetValue(MyRotationProperty); }
set { SetValue(MyRotationProperty, value); }
}
private static void UpdateRotation(BindableObject bindable, object oldRotation, object newRotation)
{
var _oldRotation = (int)oldRotation;
var _newRotation = (int)newRotation;
if (!_oldRotation.Equals(_newRotation))
{
var view = (RotatedImage)bindable;
var transformations = new System.Collections.Generic.List<ITransformation>() {
new RotateTransformation(_newRotation)
};
view.Transformations = transformations;
}
}
}
So, in my XAML - I had declared a RotatedImage instead of the standard Image. With the custom renderer, I'm able to do this and have the image display rotated the correct amount.
image.MyRotation = GetImageRotationCorrection(imageAsBytes)
It's a totally unnecessary workaround - but these are the lengths that I had to go to to get around this issue.
I'll definitely be following along with this question, there might be someone in the community who could help us both!
The SaveMetaData flag is causing the rotation issue.
Setting it to false (default is true) now displays the photo correctly.
One side effect of that, the image no longer appears in the gallery if SaveToAlbum=true.
Still can't use an image take when using GetStreamWithImageRotatedForExternalStorage, even using FFImageLoading.
I found that while using Xam.Plugin.Media v5.0.1 (https://github.com/jamesmontemagno/MediaPlugin), the combination of three different inputs produced different results on Android vs. iOS:
StoreCameraMediaOptions.SaveMetaData
StoreCameraMediaOptions.RotateImage
Using MediaFile.GetStream() vs. MediaFile.GetStreamWithImageRotatedForExternalStorage()
On Android, SaveMetaData = false, RotateImage = true, and using MediaFile.GetStreamWithImageRotatedForExternalStorage() worked for me whether I was saving the result stream externally or processing the result stream locally for display.
On iOS, the combination of RotateImage = true and StreamRotated = true would result in a NullReferenceException coming out of the plugin library. Using MediaFile.GetStreamWithImageRotatedForExternalStorage() appeared to have no impact on behaivor.
--
Before going further, it's important to understand that image orientation in the JPEG format (which Xam.Plugin.Media seems to use) isn't as straightforward as you might think. Rather than rotating the raw image bytes 90 or 180 or 270 degrees, JPEG orientation can be set through embedded EXIF metadata. Orientation issues will happen with JPEGs either if EXIF data is stripped or if downstream consumers don't handle the EXIF data properly.
The approach I landed on was to normalize JPEG image orientation at the point the image is captured without relying on EXIF metadata. This way, downstream consumers shouldn't need to be relied on to properly inspect and handle EXIF orientation metadata.
The basic solution is:
Scan a JPEG for EXIF orientation metadata
Transform the JPEG to rotate/flip as needed
Set the result JPEG's orientation metadata to default
--
Code example compatible with Xamarin, using ExifLib.Standard (1.7.0) and SixLabors.ImageSharp (1.0.4) NuGet packages. Based on (Problem reading JPEG Metadata (Orientation))
using System;
using System.IO;
using ExifLib;
using SixLabors.ImageSharp;
using SixLabors.ImageSharp.Formats.Jpeg;
using SixLabors.ImageSharp.Metadata.Profiles.Exif;
using SixLabors.ImageSharp.Processing;
namespace Your.Namespace
{
public static class ImageOrientationUtility
{
public static Stream NormalizeOrientation(Func<Stream> inputStreamFunc)
{
using Stream exifStream = inputStreamFunc();
using var exifReader = new ExifReader(exifStream);
bool orientationTagExists = exifReader.GetTagValue(ExifTags.Orientation, out ushort orientationTagValue);
if (!orientationTagExists)
// You may wish to do something less aggressive than throw an exception in this case.
throw new InvalidOperationException("Input stream does not contain an orientation EXIF tag.");
using Stream processStream = inputStreamFunc();
using Image image = Image.Load(processStream);
switch (orientationTagValue)
{
case 1:
// No rotation required.
break;
case 2:
image.Mutate(x => x.RotateFlip(RotateMode.None, FlipMode.Horizontal));
break;
case 3:
image.Mutate(x => x.RotateFlip(RotateMode.Rotate180, FlipMode.None));
break;
case 4:
image.Mutate(x => x.RotateFlip(RotateMode.Rotate180, FlipMode.Horizontal));
break;
case 5:
image.Mutate(x => x.RotateFlip(RotateMode.Rotate90, FlipMode.Horizontal));
break;
case 6:
image.Mutate(x => x.RotateFlip(RotateMode.Rotate90, FlipMode.None));
break;
case 7:
image.Mutate(x => x.RotateFlip(RotateMode.Rotate270, FlipMode.Horizontal));
break;
case 8:
image.Mutate(x => x.RotateFlip(RotateMode.Rotate270, FlipMode.None));
break;
}
image.Metadata.ExifProfile.SetValue(ExifTag.Orientation, (ushort)1);
var outStream = new MemoryStream();
image.Save(outStream, new JpegEncoder{Quality = 100});
outStream.Position = 0;
return outStream;
}
}
}
And to use in conjunction with Xam.Plugin.Media:
MediaFile photo = await CrossMedia.Current.TakePhotoAsync(options);
await using Stream stream = ImageOrientationUtility.NormalizeOrientation(photo.GetStream);
I am working in xamarin.ios. I am capturing a picture with help of camera and trying to upload it on server. But when I am trying to upload it on server I am getting "TargetInvocationException". But when I am running same code on Ipad everything is working fine.
Following is the code :
Camera.TakePicture(this, (obj) =>
{
var photo = obj.ValueForKey(new NSString("UIImagePickerControllerOriginalImage")) as UIImage;
Byte[] myByteArray;
using (NSData imageData = photo.AsJPEG(0.0f))
{
//myByteArray = imageData.ToArray();
myByteArray = new Byte[imageData.Length];
System.Runtime.InteropServices.Marshal.Copy(imageData.Bytes, myByteArray, 0, Convert.ToInt32(imageData.Length));
}
ImageLoaderPopup imageLoader = new ImageLoaderPopup(this, selectedWorkOrder, myByteArray, title);
imageLoader.PopUp(true, delegate { });
});
Does anyone know why I am facing this problem? What am I doing wrong?
You might be having problem with the size of the image returned by the Picker. Images taken with the iPhone 7 are huge in size.
You just need to scale down the original image before uploading it using the Scale method and setting the size you find acceptable.
var smallImage = image.Scale(new CGSize(1280, 720)); //Or the size you need.
UPDATE
All you need is the Scale method mentioned above.
The big advantage of Xamarin being Open Source is that you can look at the internals any time you have a doubt.
https://github.com/xamarin/xamarin-macios/blob/master/src/UIKit/UIImage.cs#L66
I'm new to OpenStreetMap and I've been browsing the wiki and the net and I can't seem to find a tutorial anywhere but I've seen examples on the net.
Basically I want to generate my own OpenStreetmap and plot markers taking the latitude and longitude from a MySQL database and plotting them on my map. When the user clicks on a mark I'd like to have a popup. Basically I want this http://code.google.com/apis/maps/articles/phpsqlajax.html but for OpenStreetMap and not Google-maps.
Looks like they are using openLayer for map rendering. Here are some examples and api docs.
http://openlayers.org/dev/examples/
http://trac.osgeo.org/openlayers/wiki/Documentation
To accomplish this, you need to figure out the javascript for presenting markers on a "slippy map" interface.
OpenLayers is the name of a popular javascript library. It's free and open source. It's used to display a slippy map on the OpenStreetMap.org homepage, and various other sites around the web. It's often confused with OpenStreetMap itself, or people mistakenly get the impression that you must use OpenLayers if you want to embed OpenStreetMap maps on your site. Not true. There's lots of alternative javascript libraries for displaying a slippy map
...including the google maps API! You can set up a google maps display, but show OpenStreetMap "tile" images instead of google tiles. See Google Maps Example. This has the advantage of code compatibility, meaning you could follow through google maps tutorial you've linked there, but then drop in a cheeky bit of code to specify OpenStreetMap as the tile layer.
This has the disadvantage of showing an big evil google logo, and requiring an even more evil google maps API key, so all the cool kids are using OpenLayers.
There's various examples of using OpenLayers on the OpenStreetMap wiki. The "OpenLayers Dynamic POI" example shows the use of database for markers (although that example is a bit convoluted). Another popups example on my site
Hope that helps
// Sample code by August Li
// Modified by Tom Moore to work with SQL
var zoom, center, currentPopup, map, lyrMarkers;
var popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {
"autoSize": true,
"minSize": new OpenLayers.Size(300, 50),
"maxSize": new OpenLayers.Size(500, 300),
"keepInMap": true
});
var bounds = new OpenLayers.Bounds();
var lat=36.287179515680556;
var lon=-96.69170379638672;
var zoom=11;
var lonLat = new OpenLayers.LonLat(lon, lat).transform(
new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));
// begin addMarker function
// info1 I was going to use to add a tooltip. Haven't figured out
// how to do that in OpenLayers yet :( Someone who knows share that with us
// iconurl is the url to the png file that you want to use for the icon.
// you MUST call addMarker at least once to initialize the map
function addMarker(lat, lng, info, info1, iconurl) {
// First check to see if the map has been initialized. If not, do that now ...
if (map == null) {
var options = {
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
units: "m",
numZoomLevels: 19,
maxResolution: 156543.0339,
maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34)
};
map = new OpenLayers.Map("map", options);
map.addControl(new OpenLayers.Control.PanZoomBar());
var lyrOsm = new OpenLayers.Layer.OSM();
map.addLayer(lyrOsm);
lyrMarkers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(lyrMarkers);
//add marker on given coordinates
map.setCenter(lonLat, zoom);
zoom = map.getZoom();
}
var iconSize = new OpenLayers.Size(36, 36);
var iconOffset = new OpenLayers.Pixel(-(iconSize.w / 2), -iconSize.h);
var icon = new OpenLayers.Icon(iconurl, iconSize, iconOffset);
var pt = new OpenLayers.LonLat(lng, lat).transform(
new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
bounds.extend(pt);
var feature = new OpenLayers.Feature(lyrMarkers, pt);
feature.closeBox = true;
feature.popupClass = popupClass;
feature.data.popupContentHTML = info;
feature.data.overflow = "auto";
var marker = new OpenLayers.Marker(pt, icon.clone());
var markerClick = function(evt) {
if (currentPopup != null && currentPopup.visible()) {
currentPopup.hide();
}
if (this.popup == null) {
this.popup = this.createPopup(this.closeBox);
map.addPopup(this.popup);
this.popup.show();
} else {
this.popup.toggle();
}
currentPopup = this.popup;
OpenLayers.Event.stop(evt);
};
marker.events.register("mousedown", feature, markerClick);
lyrMarkers.addMarker(marker);
}
// end addMarker function
Best regards! I hope this helps someone who needs this to work...