Can't change Default Marker for GeoJson

Jack Wheeler

unread,

Aug 17, 2017, 3:10:50 PM8/17/17

to cesium-dev

Hi, I'm loading a geojson into cesium and I can't seem to change the default markers for the life of me. I've typed in the following to try and change the color but with no luck:

viewer.dataSources.add(geojson,{markerColor: Cesium.Color.RED});

What I want to ultimately do is create custom graphics that at the moment are obscured by the markers on the map.

I'm currently using Cesium 1.35 on Chrome for Windows 10.

Scott Reynolds

unread,

Aug 18, 2017, 7:49:56 AM8/18/17

to cesium-dev

There are several different ways to do what you want. The one most similar to what you've given, per the documentation for GeoJsonDataSource:

var viewer = new Cesium.Viewer('cesiumContainer');
viewer.dataSources.add(Cesium.GeoJsonDataSource.load('../../SampleData/ne_10m_us_states.topojson', {
  stroke: Cesium.Color.HOTPINK,
  fill: Cesium.Color.PINK,
  strokeWidth: 3,
  markerSymbol: '?'

Alternatively, you could modify the GeoJson data itself per the Sandcastle example here. Here's an excerpt from the sample GeoJson file:

    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          0.30000000000000004,
          -1.0
        ]
      },
      "properties": {
        "title": "zoo",
        "marker-symbol": "zoo",
        "marker-color": "#9195A1"
      }
    }

Hope that helps.

Scott

Jack Wheeler

unread,

Aug 21, 2017, 5:09:10 PM8/21/17

to cesium-dev

Yup! That's what I ended up doing and it works...however now I face the problem of having buttons that switch back and forth between the different files, unfortunately once the first geojson loads, clicking on another button doesn't remove the previous one.

Scott Reynolds

unread,

Aug 22, 2017, 7:56:15 AM8/22/17

to cesium-dev

Removing the active data source is all you need to do, but that does require you to give your data sources names. Here's one way you can try in Sandcastle.

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

var activeDataSource = null;

var geojson1 = {
    "type": "FeatureCollection",
    "features": [{

        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [

                0.2,
                0.0
            ]
        },
        "properties": {
            "title": "1",
            "marker-symbol": "1",
            "marker-color": "#C49D22"
        }
    }]
};

var geojson2 = {
    "type": "FeatureCollection",
    "features": [{

        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [
                0.30000000000000004,

                0.0
            ]
        },
        "properties": {
            "title": "2",
            "marker-symbol": "2",
            "marker-color": "#8EE3A6"
        }
    }]
};

Sandcastle.addToolbarButton('load 1', function() {
    var dataSource1 = new Cesium.GeoJsonDataSource('DataSource #1');
    dataSource1.load(geojson1);
    if (activeDataSource !== null) {
        viewer.dataSources.remove(activeDataSource);
    }
    viewer.dataSources.add(dataSource1);
    activeDataSource = dataSource1;
});

Sandcastle.addToolbarButton('load 2', function() {
    var dataSource2 = new Cesium.GeoJsonDataSource('DataSource #2');
    dataSource2.load(geojson2);
    if (activeDataSource !== null) {
        viewer.dataSources.remove(activeDataSource);
    }
    viewer.dataSources.add(dataSource2);
    activeDataSource = dataSource2;
});

Reply all

Reply to author

Forward