Visualize points using Geojson

In this part we will write code to visualise paths.

It's easy to copy/paste one or two points, but when we're talking about a path with thousands of points, we need some tools to help us.

Code

Setup

$ cargo add geojson

Geojson is a Rust crate that will help us to create a geojson object.

Easier to visualise multiple points or geometries.

Code

In src/main.ts we start with our previous two points and we calculate intermediate points using two different formulae, one to simulate a straight line and one to calculate the sortest path.

Here we use Haversine formulae that are less accurate but faster.

use geo::Densify;
use geo::DensifyHaversine;
use geo::{Line, Point};

use geojson::{Feature, FeatureCollection, Geometry, JsonObject, JsonValue, Value};

fn main() {
    let my_location = Point::new(2.341882700675668, 48.877569833869785);
    let my_friend_location = Point::new(-122.4374290818876, 37.75484272253979);

    // Straight path
    let path = Line::new(my_location, my_friend_location);
    let straight_path = path.densify(2.0);

    // Shortest path
    let max_distance = 70000.0; // Maximum distance between two points (a segment)
    let shortest_path = path.densify_haversine(max_distance);

Now that we have our points we can build the geojson to visualize them.

A GeoJson object is like this.
It can contain one or more features, which contain geometry and properties.

{
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [125.6, 10.1]
  },
  "properties": {
    "name": "Dinagat Islands"
  }
}

We create a set of properties for each path to display them with a different name and colour.

let mut properties = JsonObject::new();
properties.insert(String::from("stroke-width"), JsonValue::from("2"));
properties.insert(String::from("stroke-opacity"), JsonValue::from("1"));

let mut straight_path_properties = properties.clone();
straight_path_properties.insert(String::from("name"), JsonValue::from("Straight path"));
straight_path_properties.insert(String::from("stroke"), JsonValue::from("#ff2600"));

let mut shortest_path_properties = properties.clone();
shortest_path_properties.insert(String::from("name"), JsonValue::from("Shortest path"));
shortest_path_properties.insert(String::from("stroke"), JsonValue::from("#000000"));

Now we can create geometries and features, and then pack them into a FeatureCollection.

let straight_path_geometry = Geometry::new(Value::from(&straight_path));
let shortest_path_geometry = Geometry::new(Value::from(&shortest_path));

let geojson = FeatureCollection {
    bbox: None,
    features: vec![
        Feature {
            bbox: None,
            geometry: Some(straight_path_geometry),
            id: None,
            properties: Some(straight_path_properties),
            foreign_members: None,
        },
        Feature {
            bbox: None,
            geometry: Some(shortest_path_geometry),
            id: None,
            properties: Some(shortest_path_properties),
            foreign_members: None,
        },
    ],
    foreign_members: None,
};

And one more line to display the result in the console.

println!("The geojson to copy:\n{0}", geojson.to_string());

$ cargo run
   Compiling Halfway v0.1.0 (/home/halfway)
    Finished dev [unoptimized + debuginfo] target(s) in 0.46s
     Running `target/debug/halfway`
{"features":[{"geometry":{"coordinates":[[2.341882700675668,48.877569833869785],  
...  
[-122.4374290818876,37.75484272253979]],"type":"LineString"},"properties":{"name":"Shortest path","stroke":"#000000","stroke-opacity":"1","stroke-width":"2"},"type":"Feature"}],"type":"FeatureCollection"}

You can use a tool like geojson.io to visualise the content.

Just paste the content from console output (after The geojson to copy:)

And you should have something like this (you can switch between Globe and Mercator views using the buttons at the bottom right).

Code more

In the next part we will try to invite new friends in our trip.