Visualize points using Geojson
Tags: rust, geojson
Published: 2024-01-12 20:34:48

---
title: Visualize points using Geojson
published: true
description:
tags: rust, geojson
series: Find halfway place to meet your friends
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2024-01-11 13:27 +0000
---

_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

```bash
$ cargo add geojson
```

Geojson is a Rust crate that will help us to create a [geojson object](https://geojson.org).  
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.

```rust
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.
> ```json
> {
>   "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.
```rust
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.
```rust
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.
```rust
println!("The geojson to copy:\n{0}", geojson.to_string());
```

```bash
$ 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](https://geojson.io/) to visualise the content.  
Just paste the content from console output (after `The geojson to copy:`)
![Geojson.io](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0s48x1imr2rkco3yoeqe.png)

And you should have something like this (you can switch between Globe and Mercator views using the buttons at the bottom right).
![Path on a mercator map](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v35u6o2p0vko73qs1om2.png)

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