Show marker on current location in cesium

CesiumJS
1

I’m showing current location using the below code in cesium 3D map

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!-- Include the CesiumJS JavaScript and CSS files -->
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.84/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.84/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
  <div id="cesiumContainer"></div>
  <div id="toolbar"></div>
  <script>
    // Your access token can be found at: https://cesium.com/ion/tokens.
    // Replace `your_access_token` with your Cesium ion access token.

Cesium.Ion.defaultAccessToken = 'XXXXXXXXXXXXXXXXXXX';
var viewer = new Cesium.Viewer("cesiumContainer", {
  imageryProvider: Cesium.createWorldImagery({
    style: Cesium.IonWorldImageryStyle.AERIAL_WITH_LABELS,
  }),
  animation: false,
  timeline: false,
  baseLayerPicker: false,
  fullscreenButton: false,
  infoBox: false,
  sceneModePicker: false,
  navigationHelpButton: false,
  homeButton: false,
  infoBox: false,
  geocoder : false,
});

let label;
var layers = viewer.scene.imageryLayers;
var blackMarble = layers.addImageryProvider(
  new Cesium.IonImageryProvider({ assetId: 3812 })
);

var button = document.createElement('button');
       button.type = 'button';
            button.className = 'cesium-button';
            button.onclick = function() {
                if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(fly);
                }
                else
                {
                console.log("Geolocation is not supported by this browser.");
                }
            };
            button.textContent = 'Show Location';
            document.getElementById('toolbar').appendChild(button);

const camera = viewer.camera;

function fly(position) {
          if(label){
                viewer.entities.remove(label);
            }
            label = viewer.entities.add({
                position: Cesium.Cartesian3.fromDegrees(position.coords.longitude, position.coords.latitude),
                label: {
                    text: "Lat: "+position.coords.latitude+", "+"Long: "+position.coords.longitude",
                    scale: 0.8,
                    pixelOffset: new Cesium.Cartesian2(0, -30),
                    font: "32px Helvetica",
                    fillColor: Cesium.Color.YELLOW,
                    outlineColor: Cesium.Color.BLACK,
                    outlineWidth: 3,
                    style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                }
            });

    viewer.camera.flyTo({
      destination: Cesium.Cartesian3.fromDegrees(
        position.coords.longitude,
        position.coords.latitude,
        1005.0
      ),
    });



    }

blackMarble.alpha = 0.5;
blackMarble.brightness = 1.2;

  </script>
 </div>
</body>
</html>

Now i want to show a custom market on map with latitude and longitude shown on map rather than simple label as shown in my code.

Any solution, Thanks

2

@James

Thank you for sending over some preliminary code snippets. Could you please share a sandcastle demo of what you have so far? This will make the debugging process more straightforward on my end. In the meantime, I would recommend checking out the following sandcastle demos.

The billboards demo showcases how to add Billboard markers to the map. You can customize the billboards to meet your use case. The picking demo showcases how to access latitude and longitude data. Let me know if you have any additional questions or concerns. I am looking forward to learning more about your application.

-Sam

3

Thanks @sam.rothstein : this is the link what i was trying Link i want to show latitude and longitude in custom map marker like this screenshot

Untitled

One more issue i was facing when i was adding Sandcastle.declare(addBillboard); in my html page i got error in my that Uncaught ReferenceError: Sandcastle is not defined so how will i implement this code in my html page.

Any Suggestion Please, Thanks

4

@James

Your demo looks great! Thank you for sharing it with the community :grinning: The Map Pins sandcastle demo should help you get started with your custom map marker.

As you can see, this demo adds pins to the Cesium World Terrain.

image
image877×460 73.4 KB

These pins can be selected and will display a text box. As for your issue with adding a Billboard to the terrain, I would look over our Billboards sandcastle to see the correct syntax.

Let me know if you have any other questions or concerns. I am looking forward to seeing your progress.

-Sam