Add image overlay to feature

526
9
Jump to solution
10-01-2019 10:46 AM
MKa
by
Occasional Contributor III

I have a mapview that shows one feature on it.  I have an image that i have a URL for, that I want to overlay on that feature.  The image has a rectangle bounds that I also know.  I can't figure out how to get this image to overlay on the feature.  I have tried the Graphics overlay, but cant find the correct symbol class that will take my image url.  Below here the PicutreMarkerSymbol will take my URL.  Again, I know the bounds of the image, as the image was actually created from the shape of my feature in another program.

This doesn't work obviously, but what can i do to overlay my image on my feature

GraphicsOverlay {
id: graphicsOverlay
Graphic {
geometry: feature.geometry

PictureMarkerSymbol {
url: "https://urltoMyImage"
width: 32
height: 32
offsetY: 16
}
}
}‍‍‍‍‍‍‍‍‍‍‍‍‍
Tags (2)
0 Kudos
1 Solution

Accepted Solutions
LucasDanzinger
Esri Frequent Contributor

I changed the sample out from sceneview to mapview and that worked. It should work 2d and 3d.

MapView {
id: sceneView
anchors.fill: parent

Map {
BasemapImagery {}

// Create a KML Layer
KmlLayer {
id: kmlLayer
// Create a KML Dataset
KmlDataset {
// Create a Ground Overlay by assigning an icon and geometry
KmlGroundOverlay {
id: groundOverlay
rotation: -3.046024799346924

KmlIcon {
url: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Qt_logo_2016.svg/1200px-Qt_logo_2016.svg.png"
}

Envelope {
id: env
xMin: -123.066227926904
yMin: 44.04736963555683
xMax: -123.0796942287304
yMax: 44.03878298600624
SpatialReference {
wkid: 4326
}
}
}
}

// set viewpoint to the ground overlay
onLoadStatusChanged: {
if (loadStatus !== Enums.LoadStatusLoaded)
return;

const vp = ArcGISRuntimeEnvironment.createObject("ViewpointCenter", {
center: env.center,
targetScale: 10000
});
sceneView.setViewpoint(vp);
}
}
}
}

View solution in original post

9 Replies
LucasDanzinger
Esri Frequent Contributor

Is your feature a Polygon? If so, PictureFillSymbol might be your solution - PictureFillSymbol QML Type | ArcGIS for Developers 

0 Kudos
MKa
by
Occasional Contributor III

This option is slightly better, and I use the coordinates that came with the image to create the envelope that the picture fits in.  But how do i then redraw the image when I zoom in?

Initial Load looks good

Zooming in seems to retain the same envelope, how do I redraw the envelope?

GraphicsOverlay {
id: graphicsOverlay
Graphic {
Envelope {
id: envelopeCHI
xMax: -82.2186596479493
yMin: 42.3568647873956
xMin: -82.2062302246723
yMax: 42.3641136441737
spatialReference: SpatialReference.createWgs84()
}

PictureFillSymbol {
url: "https://urltoMyImage"
}
}
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
LucasDanzinger
Esri Frequent Contributor

Perhaps you can try out a KML Ground Overlay. This allows you to take an image and display it at a specified location - Here is an example in our develop branch (100.7), but the same code will work for 100.6 arcgis-runtime-samples-qt/ArcGISRuntimeSDKQt_QMLSamples/EditData/EditKmlGroundOverlay at v.next · Es... 

In the example, a historic photo jpg is overlaid on a location at a specified envelope, and it continues to draw correctly as you zoom

0 Kudos
MKa
by
Occasional Contributor III

I can get the KMLDataset to show up when using the sample from your link

KmlDataset {
url: "https://www.arcgis.com/sharing/rest/content/items/600748d4464442288f6db8a4ba27dc95/data"
}‍‍‍

but when I try and use the KML Icon I can never get my Image to show?  I don't know what I am missing here

KmlLayer {
id: kmlLayer
description: "description"
layerId: "layerId"
name: "Detail Name"
// Create a KML Dataset
KmlDataset {
//url: "https://www.arcgis.com/sharing/rest/content/items/600748d4464442288f6db8a4ba27dc95/data"

// Create a Ground Overlay by assigning an icon and geometry
KmlGroundOverlay {
id: groundOverlay

KmlIcon {
url: "https://myURL"
}
Envelope {
id: envelopeCHI
xMax: -82.2186596479493
yMin: 42.3568647873956
xMin: -82.2062302246723
yMax: 42.3641136441737
spatialReference: SpatialReference.createWgs84()
}
}
}
}
myMapView.map.operationalLayers.append(kmlLayer)
0 Kudos
LucasDanzinger
Esri Frequent Contributor

Are you pointing the KmlIcon URL to a valid image? I tried pointing it to the below online URL and it worked well:

SceneView {
id: sceneView
anchors.fill: parent

Scene {
BasemapImagery {}

// Create a KML Layer
KmlLayer {
id: kmlLayer
// Create a KML Dataset
KmlDataset {
// Create a Ground Overlay by assigning an icon and geometry
KmlGroundOverlay {
id: groundOverlay
rotation: -3.046024799346924

KmlIcon {
url: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Qt_logo_2016.svg/1200px-Qt_logo_2016.svg.png"
}

Envelope {
id: env
xMin: -123.066227926904
yMin: 44.04736963555683
xMax: -123.0796942287304
yMax: 44.03878298600624
SpatialReference {
wkid: 4326
}
}
}
}

// set viewpoint to the ground overlay
onLoadStatusChanged: {
if (loadStatus !== Enums.LoadStatusLoaded)
return;

const camera = ArcGISRuntimeEnvironment.createObject("Camera", {
location: env.center,
distance: 1250,
heading: 45,
pitch: 60,
roll: 0
});

sceneView.setViewpointCamera(camera);
}
}
}
}

0 Kudos
MKa
by
Occasional Contributor III

I am.  I am actually using the sample url now 

https://libapps.s3.amazonaws.com/accounts/55937/images/1944.jpg

I need this overlay to be on a mapview and not on a scene though?  Is this the problem?  The KML dataset worked on mapview, but does the kmlgroundoverlay not work on the mapview?

0 Kudos
LucasDanzinger
Esri Frequent Contributor

I changed the sample out from sceneview to mapview and that worked. It should work 2d and 3d.

MapView {
id: sceneView
anchors.fill: parent

Map {
BasemapImagery {}

// Create a KML Layer
KmlLayer {
id: kmlLayer
// Create a KML Dataset
KmlDataset {
// Create a Ground Overlay by assigning an icon and geometry
KmlGroundOverlay {
id: groundOverlay
rotation: -3.046024799346924

KmlIcon {
url: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Qt_logo_2016.svg/1200px-Qt_logo_2016.svg.png"
}

Envelope {
id: env
xMin: -123.066227926904
yMin: 44.04736963555683
xMax: -123.0796942287304
yMax: 44.03878298600624
SpatialReference {
wkid: 4326
}
}
}
}

// set viewpoint to the ground overlay
onLoadStatusChanged: {
if (loadStatus !== Enums.LoadStatusLoaded)
return;

const vp = ArcGISRuntimeEnvironment.createObject("ViewpointCenter", {
center: env.center,
targetScale: 10000
});
sceneView.setViewpoint(vp);
}
}
}
}

View solution in original post

MKa
by
Occasional Contributor III

What are your imports settings at the top of your file?  I can't get your code to work.  It shows nothing for me?  Does this have to be in 100.7?

0 Kudos
MKa
by
Occasional Contributor III

Lucas, thank you for all of your help.  I figured it out.  I couldn't understand why the sample KML overlay worked, but not in my application.  I looked at everything including the ArcGIS Runtime License set in appinfo.json.  It turns out that the sample didn't have this set, well on the development machine, you don't need a license.  I had my license on my app set to runtimelite, as that is all i have ever needed to deploy.  I set the license to nothing and I got the overlay to work.  I then set it to the runtimeadvanced and it also worked.  Thank you for taking the time to look into this for me and I hope this helps someone else that cant understand why the sample works and their own app does not.