Add image overlay to feature

1604
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);
            }
        }
    }
}
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.