Add rect example

[christophfriedrich]

Earlier today I wanted to put a simple rectangle on a map to visualise a bbox, but only found examples that used super advanced functionality like custom polygon styles etc. There seemed to be none that explains this quite common usecase on a very basic level ("you need a Feature that has a Geometry which is in this case a Polygon which expects an array of linear rings which look like this"). So after finishing my tiny application, I thought I could generalise it a little and contribute it here.

Feel free to rename it/edit the description etc.

Possibly it would be nice to add a second Polygon that actually has multiple linear rings to illustrate "how to cut holes into a shape".

[mike-000]

An even simpler way to produce a rectangle geometry from a BBOX is the the fromExtent method https://openlayers.org/en/latest/apidoc/module-ol_geom_Polygon.html#.fromExtent

      new Feature(
        fromExtent(
          [-1000000, 5000000, 3000000, 7000000],
        ),
      ),

[github-actions]

📦 Preview the website for this branch here: https://deploy-preview-15841--ol-site.netlify.app/.

[ahocevar]

It might make sense to use geographic coordinates here. For the view's center, you could use fromLonLat([longitude, latitude]), and for the extent [...fromLonLat(lowerLeft), ...fromLonLat(upperRight)]. Or you could add useGeographic() at the top of the code, and use latitudes and longitudes everywhere.

[christophfriedrich]

@mike-000 That's true, I didn't know about that function yet. Still, I kind of like that the way I did it illustrates how a Polygon works technically.

@ahocevar In this case I had the coordinates in EPSG:3857 anyway, so for me this was perfect, but you're right, the average user is more likely to be dealing with EPSG:4326.

-> How about I expand the example to contain four rectangles? One the way it is right now, one with fromExtent, one with fromLonLat, and one with holes?

[ahocevar]

@christophfriedrich I'd really keep it as simple as possible. Really boil it down to the simplest possible code. As you noticed already, we have plenty of examples with quite some complexity, but lack simple ones.

[christophfriedrich]

Okay, you've got a point there. Taking simplicity as the maxim, I changed the example to use Mike's suggestion.

fromLonLat could be explained in its own example if there's none already. And I'd refrain from useGeographic() at the top as that bears the risk that people only copy the bottom part and then wonder why it's not working as they are expecting...

[ahocevar]

Thanks, @christophfriedrich