This tutorial shows how to import and visualize remote GeoJSON data and how to programmatically modify geodata with Melown VTS-Browser-JS.

This is the second part of our tutorial series about GeoJSON. At this point you
should be familiar with displaying GeoJSON data and applying basic
styling to them. If not, maybe you missed our previous tutorial. We
highly recommend checking it out first, since this tutorial builds
on top of what we did previously.

Here we defined a new point. The first argument is an array with point
coordinates. The third coordinate is assumed to be 0 if not specified.
The second argument corresponds to the height mode. We used height
mode float because we need the point to lie on the terrain. The third
argument represents properties. We use this to specify a title for our
new location. The last argument represents an id which we’ll use to tell
the points appart. We add this snippet to
geoJsonLoaded() function right after
geodata.importGeoJson(data);.

Newly added point

Next we’ll style the added point to distinguish it visually from other
points. Add the following new layer into style.layers, right after
place.

In this case we use layer style inheritance. You can imagine that inheritance will copy all properties from defined layer style and these properties can be overwritten by newly defined properties. This is very useful when you want share properties for other style layer and define only those properties which differ. In this case we changed only filter and icon-color properties.
Notice that we filtered the new point via it’s type and id. We have to also change filter in previously defined place layer style, because we have to prevent of rendering hill point twice.