Migrating to v2

[Rafael Santos]

Hi!

I'm having some trouble modifying my code to make it compatible with the latest version of OpenAIP

Until now I have been using Leaflet to display the maps. If I try to continue using Leaflet in png mode I get many 429 errors when zooming or moving the map (too many retries error) and some CORS problems too.

If I try to do it in vector mode, Leaflet is not compatible and if I use the Leaflet.VectorTileLayer plugin I have realized that it is not compatible with the styling necessary to display the lines and they all come out blue and of the same thickness.

var openmaptilesUrl = "https://api.tiles.openaip.net/api/data/openaip/{z}/{x}/{y}.pbf?apiKey={key}";
        var openmaptilesVectorTileOptions = {
            rendererFactory: L.canvas.tile,
            attribution: '.....',
            vectorTileLayerStyles: estilomapa, 

            subdomains: '0123',
            key: '.......,
            maxZoom: 14
        };
        var openmaptilesPbfLayer = L.vectorGrid.protobuf(openmaptilesUrl, openmaptilesVectorTileOptions).addTo(map);


I have tried other plugins but I find that all the ones I see need tokens and are paid. I can't find anything freeware.

Any suggestions or examples that I can use? 

I only need to display the OpenAIP layer on top of an Openstreetmap.

It doesn't matter that it's not with Leaflet, because I can modify the code to the new libraries. But it has to be freeware.

Thanks & Regards!

[openaip net]

Hi, 

to integrate the new TMS layers with leaflet you can use:

// adds custom openaip layers to VRS base layer L.tileLayer(`https://{s}.api.tiles.openaip.net/api/data/airspaces/{z}/{x}/{y}.png?apiKey=${OPENAIP_API_KEY}`).addTo(map); L.tileLayer(`https://{s}.api.tiles.openaip.net/api/data/airports/{z}/{x}/{y}.png?apiKey=${OPENAIP_API_KEY}`).addTo(map); L.tileLayer(`https://{s}.api.tiles.openaip.net/api/data/navaids/{z}/{x}/{y}.png?apiKey=${OPENAIP_API_KEY}`).addTo(map); L.tileLayer(`https://{s}.api.tiles.openaip.net/api/data/reporting-points/{z}/{x}/{y}.png?apiKey=${OPENAIP_API_KEY}`).addTo(map);

Please also see the Tiles API documentation (especially the png endpoint) for more detailed information about the available layers. Note that the TMS enforces rate limits. If you exceed the rate limits, you'll receive a 429 error when requesting tiles. To not run into rate limiting, please consider reducing requests/second or front our TMS with your own tile cache. 

Let me know if this works.

Stephan

[Michael Haberler]

I'm trying to do something similar - use OpenAIP .pbf vector tiles from Leaflet

I found the Leaflet vector tile plugins not up to the task as well, so I considered https://github.com/maplibre/maplibre-gl-leaflet

Do you have a recommendation or example how to go forward?

best regards

Michael

[openaip net]

Hi Michael,

I have never used this library though it looks like it brings most features of mapbox-gl-js to the table. There are various examples on the website that should you get started easily. Sorry that I cannot be of more help here... 

Just make sure to use the PBF endpoints of the openaip tiles api.

Cheers,

Stephan

[Rafael Santos]

Hi, again.

To use this file I have to cut and copy the necessary parts ?

https://api.tiles.openaip.net/api/styles/openaip-default-style.json

Or can I use it full somehow?

Because I can't use it without errors. Many of them.

I'm using now:

https://unpkg.com/@maplibre/maplibre-...@0.0.17/leaflet-maplibre-gl.js

Regards.

[Rafael Santos]

Mainly:

URL scheme "mapbox" is not supported. 

If I use Maplibre that json is not valid?

I need cut and copy and adapt it?

[Rafael Santos]

If I try download the sprite json file with this:

https://api.mapbox.com/styles/webmaster-openaip/ckn740ghl0xv717p1jc6wi59p/f1swxnvf2nax17nl4agef47uc

Trying to change mapbox:// -> https://api.mapbox.com ...

I can't because:

{"message":"Not Authorized - No Token"}

Would it be possible to publish the OpenAIP library freely and not dependent on a paid service like MapBox?

[OpenAIP]

I think so, yes. Personally I have another project where I the same styles but hard coded in the application. You have to make sure to add the map styles "onInit" or "onLoad". But you definitely have to adjust some parts and there may be some issues with the sprites i.e. "icons". 

--
You received this message because you are subscribed to the Google Groups "OpenAIP - Aviation Data Platform" group.
To unsubscribe from this group and stop receiving emails from it, send an email to openaip+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/openaip/e1ec6c47-e55d-4825-9875-de291e0591cen%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Rafael Santos]

I'm doing it now.

Could you attach the sprite.json file here to adapt it to Maplibre?
And the glyphs too.

I've done any test handly and the style works ok, but it's very large and there are a lot of icons and diferents specs...

I can't download this, obviously:

  "sprite": "mapbox://sprites/webmaster-openaip/ckn740ghl0xv717p1jc6wi59p/f1swxnvf2nax17nl4agef47uc",
  "glyphs": "mapbox://fonts/webmaster-openaip/{fontstack}/{range}.pbf",

Regards.

[Rafael Santos]

I've downloaded all icons from here:

https://github.com/openAIP/mapstyles

But I need the sprite.json too.

[Michael Haberler]

I'll give it a spin and report what I can come up with

current goal is a flight display for hot air ballooning, including the capability to display the current airspace and airspace stack below/above plus ephemeral data like radio frequency if available

I am aware of ballometer.io but not ready to bite the react learning curve bullet just for a map embed ;)

- Michael

[Michael Haberler]

forked https://github.com/maplibre/maplibre-gl-leaflet 

adapted example to use OpenAIP vector maps, and added a Maptiler vector map which works just fine

changes: https://github.com/mhaberler/maplibre-gl-leaflet/blob/main/examples/openaip.html#L45-L68

try it out:  https://static.mah.priv.at/public/maplibre-gl-leaflet/examples/openaip.html

this fails with "URL scheme "mapbox" is not supported."

Fetch API cannot load mapbox://fonts/webmaster-openaip/Open Sans Regular,Arial Unicode MS Regular/0-255.pbf. URL scheme "mapbox" is not supported.

Fetch API cannot load mapbox://sprites/webmaster-openaip/ckn740ghl0xv717p1jc6wi59p/f1swxnvf2nax...@2x.json. URL scheme "mapbox" is not supported.
Fetch API cannot load mapbox://mapbox.mapbox-terrain-v2,mapbox.mapbox-streets-v8. URL scheme "mapbox" is not supported.

Fetch API cannot load mapbox://mapbox.mapbox-terrain-dem-v1. URL scheme "mapbox" is not supported.

not sure how to go from here - complete noob at style massage

- Michael

[OpenAIP]

The mapbox style is an "all-in-one" style. For openaip, several of the required parts of the openaip style is hosted at mapbox, e.g. the sprites and fonts since we also use a mapbox base map style. Those parts are downloaded by the map client. In the style, the sprite and font is specified using the mapbox:// notation since we are hosting our assets at mapbox. I suppose that for your style to work in your client, you must generate your own basemap and sprites and fonts and host them on your own server or use some free available assets that can be downloaded using http or https notation. Never used maplibre so I cannot provide much help here...sorry.

 

--
You received this message because you are subscribed to the Google Groups "OpenAIP - Aviation Data Platform" group.
To unsubscribe from this group and stop receiving emails from it, send an email to openaip+u...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/openaip/619efcd7-f7ac-4604-a206-4d57b9047323n%40googlegroups.com.