Draw and Save a Polygon on a map

Andreas

2023-05-01 14:00

Drawing a Polygon and Saving it to GeoJSON is the next item on my exploration list.

First I tried a few Leaflet drawing plugins:

Leaflet Freedraw is not exactly what I need.
Leaflet Draw looked good, but no commits in years is not encouraging to start a new project using it.
Leaflet Editable is too complicated to use.
Leaflet Geoman is exactly what I want. The free version should be enough.

Some things I learned by fiddling around with Leaflet and Leaflet Geoman:

Add custom polygon buttons

Add a button to the draw toolbar that draws green polygons:

map.pm.Toolbar.copyDrawControl('Polygon', {
name: 'DrawEntry',
  block: 'draw',
  title: 'Draw Entry Polygon',
});
map.pm.Draw.DrawEntry.setPathOptions({ color: 'green' });

The icon is still a polygon icon. To change this I need a svg for a new icon.

Save a drawn polygon to GeoJSON

I want to save this later into a database and may need a bit more meta information, i.e. color of the polygon. But this here is enough for today:

JSON.stringify(L.PM.Utils.findLayers(map)[0].toGeoJSON())

Load a polygon to the map

Add two exported polygons to the map, one as entry (green) and one as exit (violet).

var example = [
  // entry
  {"type":"Feature","properties":{"type": "entry"},"geometry":{"type":"Polygon","coordinates":[[[9.003386,48.683486],[9.003185,48.68335],[9.003226,48.683275],[9.003769,48.683492],[9.003679,48.68359],[9.003386,48.683486]]]}},
  // exit
  {"type":"Feature","properties":{"type": "exit"},"geometry":{"type":"Polygon","coordinates":[[[9.002798,48.683225],[9.002868,48.683157],[9.002577,48.683058],[9.002519,48.683127],[9.002798,48.683225]]]}}
]
L.geoJSON(example, {
  style: function(feature) {
    if (feature.properties){
      switch (feature.properties.type) {
      case 'entry': return {color: "green"};
      case 'exit':   return {color: "violet"};
}}}}).addTo(map);

The style function changes the color based on the "type" property in the GeoJSON. If the "type" is empty or not "entry" or "exit" the color is the default which is "blue".

Full Example

I used stadiamaps to have a higher zoom level (level 20) than the default openstreetmap map.

Only a screenshot for now:

screenshot

The two polygon icons are the same, but the first one draws entry colored polygons and the second one exit colored ones.

Datasette and raster Tiles

Andreas

2023-04-25 21:00

Using simple png based tiles seems like the best choice for my planned pet project. But all the vector tiles to raster tiles posts and Github repositories are either years old or commercial. After fiddling around with some of the code out there I gave up and started using stadiamaps rastered tiles.

But now I wanted to use them in Datasette. First as a preview in the table view by using datasette-leaflet-geojson. To get a preview map in the table view the dataset needs to have a field that looks like geojson.

Generate a dataset using sqlite-utils with a valid geojson field:

echo '{"name": "Vaihingen / Hauptstrasse", "map": {"type": "Point", "coordinates": [9.1116853, 48.7297610]}}' | \
sqlite-utils insert demo.db cycle-rental -

Opened in Datasette table view this looks like:

osm

I changed the tile server to stadiamaps because I don't want to use Openstreetmap tiles without a license later.

The same dataset with stadiamaps:

stadiamaps

If the 200k credits are not enough later I will think about a different solution.