procedural-gl-js
maplibre-gl-js
Our great sponsors
procedural-gl-js | maplibre-gl-js | |
---|---|---|
11 | 55 | |
1,266 | 5,712 | |
- | 3.6% | |
0.0 | 9.9 | |
almost 3 years ago | about 23 hours ago | |
JavaScript | TypeScript | |
Mozilla Public License 2.0 | GNU General Public License v3.0 or later |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
procedural-gl-js
-
Recreating Real-World Terrain with React, Three.js and WebGL Shaders
Nice writeup, I always like it when the shaders are highlighted like this. I got started in a similar way 7 years ago and have been making 3D terrains with THREE.js & WebGL since.
The real fun begins when you need to implement some sort of Level-of-Detail system and streaming in data to give the illusion of high detail everywhere without sacrificing performance.
Last year I released an open-source framework (https://github.com/felixpalmer/procedural-gl-js) for creating 3D terrains for web applications, you can see Uluru here: https://www.procedural.eu/map/?longitude=131.036&latitude=-2... (unfortunately the aerial imagery from our default provider isn't as high resolution as other places in Europe)
-
Visualization of 40M Cell Towers
Great visualization and approach with compressing the tile data. Do you have a comparison of how much smaller the payload ends up being compared to simply sending PNG files?
I use PNGs to encode elevation data in my 3D mapping library (https://github.com/felixpalmer/procedural-gl-js/) and this does a pretty good job of compressing the data, for example in the ocean the PNG files are also very small as the image is mostly black. Different use case I now as your data is much more sparse, but I wonder how close the PNG compression would be compared to your approach.
-
React Component for 3D Maps
Yeah, the React parts of this are very minimal. I'm not really sure what using it gets you, since it just manages a single div.
The _actual_ library that does all the work is here: https://github.com/felixpalmer/procedural-gl-js
-
Ask HN: What Are You Working On?
- Tiny filesize means library is parsed fast. Package size is less than THREE.js thanks to code stripping
Check it out on Github: https://github.com/felixpalmer/procedural-gl-js/
-
Mountain Peaks in WebGL
The imagery comes from the Orthofoto dataset on https://www.basemap.at/ - the actual texturing is done by the Procedural GL JS library https://github.com/felixpalmer/procedural-gl-js
maplibre-gl-js
-
Protomaps β A free and open source map of the world
(.shp .gpkg ...) | ogr2ogr -> .geojson | tippecanoe -> .pmtiles
for OpenStreetMap data there's planetiler[4], and and openmaptiles[5] styles that work with Maplibre
with those combinations you've got a great start to something you can host for pennies on AWS S3+CloudFront or Cloudflare R2, with an open source data pipeline
[1] https://maplibre.org/
- GPSJam: Daily maps of possible GPS interference
-
Building a Map Application with MapLibre GL JS and Svelte
MapLibre GL JS v3.3.1
-
New Map APIs from Google
Does anyone else have a solution for the satellite layer? I was using MapLibre [0] then needed direct-on-the-ground images which made me convert to Google Maps.
[0] https://maplibre.org/
- The OpenTF Manifesto
-
Use 3D map library with API key function of Amazon Location Service
When using the Amazon Location Service, I recommend MapLibre GL JS, which I introduced in my previous article, "Amazon Location Service and AWS Amplify to Use Various Map Library," but you can also use any map library you like, including iTowns this time. I hope you will choose the map library of your choice, including iTowns!
-
Using Lidar to map tree shadows
Your browser has a very powerful image decoder built into it, offloading the PNG decoding into Javascript is very resource hungry.
Using maplibre (or any map viewer) you can load blobs of image data out of a tiff and use `Image` or `Canvas` to render the data onto a map.
Its even easier if the tiffs are already Cloud optimized as they perfectly align to a 1-to-1 map tile and they don't need to be rescaled, you can then just render the images onto the map. eg here is a viewer that loads webps out of a 15GB tiff and uses Canvas to render them onto a map [1]
Unless you are trying to layer all your maps together, you also could stop reprojecting them into webmercator, or if your goal is to layer them, then storing them in webmercator would save a ton of user's compute time.
There are a bunch of us that talk web maping and imagery in the #maplibre and #imagery slack channels in OSMUS's slack [2]
[1] https://blayne.chard.com/cogeotiff-web/index.html?view=cog&i...
[2] https://github.com/maplibre/maplibre-gl-js#getting-involved
- Apache Baremaps: online maps toolkit
-
[OC] A new map of GitHub made from 350M stars, shows 460,000 projects
The map is rendered by https://maplibre.org/, you can see how it is used here https://github.com/anvaka/map-of-github
-
[OC] I made a map of GitHub. It lets you find related projects with ease
Kudos to https://maplibre.org/ - amazing library
What are some alternatives?
suncalc - A tiny JavaScript library for calculating sun/moon positions and phases.
Leaflet - π JavaScript library for mobile-friendly interactive maps πΊπ¦
rnnoise - Recurrent neural network for audio noise reduction
mapbox-gl-js - Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL
ffprobe-wasm - A Web-based FFProbe. Powered by FFmpeg, Vue and Web Assembly!
OpenLayers3 - OpenLayers
atbswp - A minimalist macro recorder
leaflet-geoman - ππΊοΈ The most powerful leaflet plugin for drawing and editing geometry layers
auto-editor - Auto-Editor: Effort free video editing!
folium - Python Data. Leaflet.js Maps.
rust-starter - Rust Starter Project
ol-mapbox-style - Use Mapbox Style objects with OpenLayers