Announcement

Collapse
No announcement yet.

Dynamic ImageSource in the Placemark Attributes

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Dynamic ImageSource in the Placemark Attributes

    Hello everyone,

    After reading the WorldWind source info for PlacemarkAttributes, specifically on ImageSource in the placemark I came across this:

    The image source of the placemark's image. May be either a string giving the URL of the image, or an {@link ImageSource} object identifying an Image created dynamically.
    URL: https://github.com/NASAWorldWind/Web...kAttributes.js

    I am interested in the dynamic part, any ideas on how I can convert a canvas or svg object into an ImageSource?

    I've tried svg-to-image from NPM, also tried https://davidwalsh.name/convert-canvas-image example.

    My code snip:

    Code:
    function convertCanvasToImage(canvas, cb) {
    var image = new Image();
    image.onload = () => {
    image.width = 16;
    image.height = 16;
    cb(new ImageSource(image));
    }
    image.src = canvas.toDataURL("image/png");
    }
    
    var callback = (image) => {
    placemarkAttributes.imageSource = image;
    }
    
    convertCanvasToImage(new ms.Symbol("SFG-UCI----D").asCanvas(), callback);
    What I'm trying to achieve:
    I'm trying to dynamically convert the symbols from https://github.com/spatialillusions/milsymbol and display them on the WorldWind globe.

    Thank you in advance for any help and your valuable time.

  • #2
    Got it figured out...

    Code:
    var callback = (image) => {
         placemarkAttributes.imageSource = new WorldWind.ImageSource(image);
    }
    importSVG(new ms.Symbol("SFG-UCI----D").asSVG(), callback);
    and the importSVG function:

    Code:
    function importSVG(sourceSVG, callback) {
        var img = new Image();
        img.src = "data:image/svg+xml;base64,"+btoa(sourceSVG);
        img.onload = () => {
            callback(img);
        }
    }

    Comment

    Working...
    X