Add example docs #34

[Robinlovelace]

The code isn't actually working, but provides a nice example that could be good if/when it does work.

App that shows how the PCT route network layer can look with vector tiles: https://www.carbon.place/

Example tile file: https://www.carbon.place/tiles/pct/11/1025/683.pbf

Clearly this PR is not production ready or ready merge. More designed to move the conversation forward. Any suggested changes welcome, or happy for you to do this totally differently. Your call @tim-salabim, excited to see progress in this area in any case!

[tim-salabim]

@Robinlovelace thanks for this! The example isn't working (I suspect) because of CORS issues (see screenshot below). You would nee to somehow set 'Access-Control-Allow-Origin' on the server where these tiles reside. I had a hard time to figure this out for the S3 bucket I use in my example and am still struggling to understand this CORS stuff. Another thing to note is that rendering currently does not work in the RStudio because their server does not support byte serving. So the way to get this working locally is by saving the map, then serving it with servr::httd() and viewing it in the browser.

In any case, I really appreciate you helping out here. Having a good resource to try and test these new methods is super helpful!
Do you still have the tippecanoe code how you created those tiles? I am currently barely scratching the surface of all this, so working examples would help me a lot. Also, do those .pbf files have more than one layer? That would be grand, because we could then design the API properly, as protomaps.js allows multiple layers to be added and styled in one call.

[Robinlovelace]

Great that it could be useful Tim and your response definitely moves the conversation forward, at least for me! In terms of the underlying code, yes, it's available here: https://github.com/creds2/CarbonCalculator

Also, do those .pbf files have more than one layer?

Yes, assuming you mean columns in sf terminology:

mbt = sf::read_sf("https://www.carbon.place/tiles/pct/11/1025/683.pbf")
head(mbt)
#> Simple feature collection with 6 features and 4 fields
#> Geometry type: LINESTRING
#> Dimension:     XY
#> Bounding box:  xmin: 0 ymin: 3892 xmax: 1074 ymax: 4096
#> CRS:           NA
#> # A tibble: 6 × 5
#>   mvt_id bicycle govtarget_slc dutch_slc               geometry
#>    <dbl>   <int>         <int>     <int>           <LINESTRING>
#> 1     NA       3             9        97   (460 4065, 469 4096)
#> 2     NA       1             8        50 (1073 4091, 1074 4096)
#> 3     NA      10            29       285     (0 3984, 106 3974)
#> 4     NA       1             5        86     (46 3927, 49 3892)
#> 5     NA      10            32       333   (106 3974, 197 3974)
#> 6     NA       3            15       403   (200 4013, 197 3974)

^{Created on 2022-06-12 by the reprex package (v2.0.1)}

[Robinlovelace]

Regarding the code underlying the tiles, and any other questions, @mvl22 and @mem48 may be able to help. Martin and Malcolm created the tileset and know more than me about this stuff, including where the 'style file' .json file is, I had a look but to no avail so far. Many thanks!

[tim-salabim]

Thanks for the link to the tippecanoe calls, very useful! Are you planning on adjusting the cors rules on the server so we can access the data?

[Robinlovelace]

Thanks for the link to the tippecanoe calls, very useful! Are you planning on adjusting the cors rules on the server so we can access the data?

Probably not, no need to start fiddling with the server that Martin/Malcolm set up for this use case. Would statically hosted mbtiles e.g. on GitHub pages, not work?

[tim-salabim]

Sure, though not sure about GitHub pages, but the s3 bucket I set up works. So we have a playground. If you have a good dataset you'd like to try let me know

[Robinlovelace]

Good dataset, small one representing PCT for the smallest region we have (you could also try London/England for a bigger example): https://github.com/npct/pct-outputs-regional-notR/raw/master/commute/lsoa/isle-of-wight/rnet_full.geojson interactive version here.

In terms of CORS, wow, yes looks like something like this is needed when hosting the files in a bucket:

[
    {
      "origin": ["https://example.com"],
      "method": ["GET","HEAD"],
      "responseHeader": ["range","etag"],
      "maxAgeSeconds": 300
    }
]

gsutil cors set google_cloud_cors.json gs://my-bucket-name

Source: https://cloud.google.com/storage/docs/configuring-cors#configexamples

From https://protomaps.com/docs/pmtiles. Trickier than I thought involving set-up of buckets and all sorts, shouldn't be so hard, right?!

I guess CORS will not be an issue if you host the tiles locally or on the same server where you're developing/hosting the mapping application.

[Robinlovelace]

OK, here's the deployed tiles served by MapTiler: https://api.maptiler.com/maps/196d5de4-747a-4b68-aac1-e61279dfcf2a/?key=lRY4JMbysup3srAsB86g#8.5/50.35339/-1.12479 - click on that and you'll see the data.

html version below, tried and tested locally so must work for leafem no? How would I add this layer?? Not sure if this is actually the same issue but looking at the protobuf chunks in Firefox inspector it's vector tiles for sure:

<html>
  <head>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/1.13.1/mapbox-gl.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl-leaflet/0.0.15/leaflet-mapbox-gl.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/1.13.1/mapbox-gl.min.css" />
    <style>
      #map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
    </style>
  </head>
  <body>
    <div id="map">
      <a href="https://www.maptiler.com" style="position:absolute;left:10px;bottom:10px;z-index:999;"><img src="https://api.maptiler.com/resources/logo.svg" alt="MapTiler logo"></a>
    </div>
    
    <script>
      var map = L.map('map').setView([50.35339, -1.12479], 9);
      var gl = L.mapboxGL({
        attribution: "",
        style: 'https://api.maptiler.com/maps/196d5de4-747a-4b68-aac1-e61279dfcf2a/style.json?key=lRY4JMbysup3srAsB86g'
      }).addTo(map);
    </script>
  </body>
</html>

[tim-salabim]

Hey @Robinlovelace thanks for all the input and effort here, but I think this is obsolete now as we don't have a addPMTiles() function anymore. Can we close this?

[Robinlovelace]

Sure, very stale!