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:
Hope Map! @import url(../Build/Cesium/Widgets/widgets.css); html, body, #cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } 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(); };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.