Markers and Labels

1,237 views
Skip to first unread message

Brow Tine

unread,
Apr 22, 2015, 9:47:57 AM4/22/15
to cesiu...@googlegroups.com
I am trying to add labels to the globe based on coordinates. Not a coder. Can someone show me the code to add markers? Any help would be greatly appreciated! Here's what I have:

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Use correct character set. -->
  <meta charset="utf-8">
  <!-- Tell IE to use the latest, best version (or Chrome Frame if pre-IE11). -->
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <title>Hope Map!</title>
  <script src="../Build/Cesium/Cesium.js"></script>
  <style>
      @import url(../Build/Cesium/Widgets/widgets.css);
      html, body, #cesiumContainer {
          width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
      }
  </style>
</head>
<body>
  <div id="cesiumContainer"></div>
<script>

    var viewer = new Cesium.Viewer('cesiumContainer');
var viewer = new Cesium.Viewer('cesiumContainer');

var l = labels.add({
  show : true,
  position : Cesium.Cartesian3.ZERO,
  text : 'test',
  font : '30px sans-serif',
  fillColor : Cesium.Color.WHITE,
  outlineColor : Cesium.Color.BLACK,
  style : Cesium.LabelStyle.FILL,
  pixelOffset : Cesium.Cartesian2.ZERO,
  eyeOffset : Cesium.Cartesian3.ZERO,
  horizontalOrigin : Cesium.HorizontalOrigin.LEFT,
  verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
  scale : 1.0
});

function addLabel() {
    Sandcastle.declare(addLabel);
    viewer.entities.add({
        position : Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
        label : {
            text : 'Philadelphia'
        }
    });
}

function setFont() {
    Sandcastle.declare(setFont);
    viewer.entities.add({
        position : Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
        label : {
            text : 'Philadelphia',
            font : '24px Helvetica',
            fillColor : Cesium.Color.SKYBLUE,
            outlineColor : Cesium.Color.BLACK,
            outlineWidth : 2,
            style : Cesium.LabelStyle.FILL_AND_OUTLINE
        }
    });
}

function setProperties() {
    Sandcastle.declare(setProperties);
    var entity = viewer.entities.add({
        position : Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222, 300000.0),
        label : {
            text : 'Philadelphia'
        }
    });

    entity.label.scale = 2.0;
}

function offsetByDistance() {
    Sandcastle.declare(offsetByDistance);
    var image = new Image();
    image.onload = function() {
        viewer.entities.add({
            position : Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
            billboard : {
                position : Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
                scaleByDistance : new Cesium.NearFarScalar(1.5e2, 5.0, 1.5e7, 0.5),
                image : image
            },
            label : {
                text : 'Label on top of scaling billboard',
                font : '20px sans-serif',
                horizontalOrigin : Cesium.HorizontalOrigin.CENTER,
                pixelOffset : new Cesium.Cartesian2(0.0, -image.height),
                pixelOffsetScaleByDistance : new Cesium.NearFarScalar(1.5e2, 3.0, 1.5e7, 0.5)
            }
        });
    };
    image.src = '../images/facility.gif';
}

function fadeByDistance() {
    Sandcastle.declare(fadeByDistance);
    viewer.entities.add({
        position : Cesium.Cartesian3.fromDegrees(-73.94, 40.67),
        label : {
            text : 'New York',
            translucencyByDistance : new Cesium.NearFarScalar(1.5e2, 1.0, 1.5e8, 0.0)
        }
    });
    viewer.entities.add({
        position : Cesium.Cartesian3.fromDegrees(-84.39, 33.75),
        label : {
            text : 'Atlanta',
            translucencyByDistance : new Cesium.NearFarScalar(1.5e5, 1.0, 1.5e7, 0.0)
        }
    });
}

Sandcastle.addToolbarMenu([{
    text : 'Add label',
    onselect : function() {
        addLabel();
        Sandcastle.highlight(addLabel);
    }
}, {
    text : 'Set font',
    onselect : function() {
        setFont();
        Sandcastle.highlight(setFont);
    }
}, {
    text : 'Set properties',
    onselect : function() {
        setProperties();
        Sandcastle.highlight(setProperties);
    }
}, {
    text : 'Offset label by distance',
    onselect : function() {
        offsetByDistance();
        Sandcastle.highlight(offsetByDistance);
    }
}, {
    text : 'Fade label by distance',
    onselect : function() {
        fadeByDistance();
        Sandcastle.highlight(fadeByDistance);
    }
}]);

Sandcastle.reset = function() {
    viewer.entities.removeAll();
};

Matthew Amato

unread,
Apr 22, 2015, 10:20:53 AM4/22/15
to cesiu...@googlegroups.com
I would recommend checking out the Visualizing Spatial Data tutorial on the website which should hopefully answer most of your questions up front.  If you have any specific questions, or anything in the tutorial is unclear, just let us know (and we'll most likely improve the tutorial based on feedback).

There's also a small skeleton Cesium application you can start with at https://github.com/pjcozzi/cesium-starter-app.  While Sandcastle is great for demos, learning and experimenting, it shouldn't be used to actually deploy an application.

--
You received this message because you are subscribed to the Google Groups "cesium-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to cesium-dev+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Reply all
Reply to author
Forward
0 new messages