felixpalmer / Procedural Gl Js
Licence: mpl-2.0
Mobile-first 3D mapping engine with emphasis on user experience
Stars: ✭ 1,036
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Procedural Gl Js
Droneworld
droneWorld: a 3D world map and a three.js playground
Stars: ✭ 197 (-80.98%)
Mutual labels: webgl, map
Ol3echarts
🌏 📊 ol3Echarts | a openlayers extension to echarts
Stars: ✭ 229 (-77.9%)
Mutual labels: webgl, map
L7
🌎 Large-scale WebGL-powered Geospatial Data Visualization analysis framework which relies on Mapbox GL or AMap to render basemaps.
Stars: ✭ 2,517 (+142.95%)
Mutual labels: webgl, map
Openglobus
JavaScript 3d maps and geospatial data visualization engine library.
Stars: ✭ 199 (-80.79%)
Mutual labels: webgl, map
Tangram
WebGL map rendering engine for creative cartography
Stars: ✭ 1,964 (+89.58%)
Mutual labels: webgl, map
Dc Sdk
DC-SDK 是基于 Cesium 进行二次开发的2、3D一体 WebGis 应用框架,该框架优化了 Cesium 的使用方式和增添了一些额外功能，旨在为开发者快速构建 WebGis 应用。🌎
Stars: ✭ 206 (-80.12%)
Mutual labels: webgl, map
Vts Browser Js
JavaScript WebGL 3D map rendering engine
Stars: ✭ 148 (-85.71%)
Mutual labels: webgl, map
Webgl Wind
Wind power visualization with WebGL particles
Stars: ✭ 601 (-41.99%)
Mutual labels: webgl, map
React Map Gl
React Component Library for Mapbox GL JS
Stars: ✭ 298 (-71.24%)
Mutual labels: webgl, map
angular-mapboxgl-directive
AngularJS directive for Mapbox GL
Stars: ✭ 43 (-95.85%)
Mutual labels: map, webgl
React Map Gl
React friendly API wrapper around MapboxGL JS
Stars: ✭ 6,244 (+502.7%)
Mutual labels: webgl, map
Mapbox Gl Js
Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL
Stars: ✭ 8,017 (+673.84%)
Mutual labels: webgl, map
Libgenerics
libgenerics is a minimalistic and generic library for C basic data structures.
Stars: ✭ 42 (-95.95%)
Mutual labels: map
Googlemapview
android google map view - imageView to make the map display process easier by entering latitude and longitude only by static map
Stars: ✭ 36 (-96.53%)
Mutual labels: map
Jquery Mapael
jQuery plugin based on raphael.js that allows you to display dynamic vector maps
Stars: ✭ 981 (-5.31%)
Mutual labels: map
Fortnite Maps
🗺️ Calculate distance and estimated arrival with FortniteMaps
Stars: ✭ 43 (-95.85%)
Mutual labels: map
procedural-gl.js
Procedural GL JS is a library for creating 3D map experiences on the web, written in JavaScript and WebGL. It is built on top of THREE.js.
It provides an easy-to-use, but powerful framework to allow beautiful landscapes of the outdoors to be embedded into web pages. It loads super-fast and is optimized for mobile devices.
Demo | Docs | Overlay playground | Elevation data | Source
Key features
- Novel GPU powered level-of-detail system gives butter-smooth rendering, including on mobile
- Stream in standard raster imagery tiles. Supports map tiles from a variety of providers
- Easily include elevation data for 3D terrain
- Powerful overlay capabilities. Draw crisp markers and lines
- Well-thought-out API, complex applications can be built without needing to deal with 3D concepts
- Great UX and intuitive controls, mouse-based on desktop & touch-based on mobile
- Tiny filesize means library is parsed fast. Package size is less than THREE.js thanks to code stripping
Screenshots
Install
npm install procedural-gl
Usage
import Procedural from 'procedural-gl';
// Choose a DOM element into which the library should render
const container = document.getElementById( 'container' );
// Configure datasources
const datasource = {
provider: 'maptiler',
// To get a free key, use https://cloud.maptiler.com/account/?ref=procedural
apiKey: 'GET_AN_API_KEY_FROM_MAPTILER'
};
// Initialize library and optionally add UI controls
Procedural.init( { container, datasource } );
Procedural.setRotationControlVisible( true );
// Load real-world location
const montBlanc = { latitude: 45.8326364, longitude: 6.8564201 };
Procedural.displayLocation( montBlanc );
Connecting to a datasource
To actually load data using a library you will need to connect to a source of data. The quickest way to get setup is to register for a free account with MapTiler and then use the API key as shown above.
For detailed instructions for setting up the datasource, see this page in the wiki
Examples
Sponsor
If this library is useful to you, please consider sponsoring the project.
Blog posts / Guides
License
Procedural GL JS is licensed under the Mozilla Public License Version 2.0.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].