Demo of Singapore buildings 3D tiles from OneMap on Mapbox GL JS.

Last update: Nov 6, 2021

Overview

Singapore buildings 3D Tiles from OneMap 3D on Mapbox GL JS

This is a demo of Singapore buildings 3D tiles from OneMap 3D on Mapbox GL JS.

Development

# install dependencies
npm i

# Start local server
npm start

# Download tiles from OneMap to ./tiles/*
# Roughly 700-800 MB
npm run fetch-tiles

# Generate optimized tiles into ./optimized-tiles/*
# Roughly 50-60 MB
npm run optimize-tiles

This uses Deck.gl's Tile3DLayer to render 3D Tiles.

The files in ./tiles and ./optimized-tiles/*.glb are excluded from this repository because they takes up too much space and unnecessary for this demo.

Copyright

@ SLA @ OneMap

Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL

Mapbox GL JS is a JavaScript library for interactive, customizable vector maps on the web. It takes map styles that conform to the Mapbox Style Specif

Jan 7, 2023

Mapbox JavaScript API, a Leaflet Plugin

mapbox.js A Mapbox plugin for Leaflet, a lightweight JavaScript library for traditional raster maps. For the state-of-the-art Mapbox vector maps libra

Dec 23, 2022

Draw tools for mapbox-gl-js

@mapbox/mapbox-gl-draw Adds support for drawing and editing features on mapbox-gl.js maps. See a live example here Requires mapbox-gl-js. Compatible v

Jan 2, 2023

Mapbox Visual for Power BI - High performance, custom map visuals for Power BI dashboards

Mapbox Visual for Microsoft Power BI Make sense of your big & dynamic location data with the Mapbox Visual for Power BI. Quickly design high-performan

Nov 22, 2022

Vuejs 2 components for interacting with mapbox-gl-js

VueMapbox Combine powers of Vue.js and Mapbox Gl JS Vue-mapbox is wrapper around Mapbox GL JS library that provides vueish-way to interact with the ma

Dec 26, 2022

(IDW) Interpolated Heatmap Layer for mapbox-gl

Mapbox :: Interpolated Heatmap(s) InterpolateHeatmapLayer is a minimalist JavaScript library for rendering temperature maps (or interpolate heatmaps)

Dec 15, 2022

MERN stack travel app using mapbox API, Travel and drop pin , share reviews and rate the location

MERN-Travel-Map Travel Map Pin A single page application built with MERN Stack from scratch (MongoDB + Mongoose, Express, React & NodeJs) Table of Con

Dec 29, 2022

Cross provider map drawing library, supporting Mapbox, Google Maps and Leaflet out the box

Terra Draw Frictionless map drawing across mapping providers. TerraDraw centralises map drawing logic and provides a host of out the box drawing modes

Dec 31, 2022

Nftix-demo-ui - Demo UI used in my NFT course on Egghead.io

NFTix Demo UI This repository contains the UI used for my Egghead course on building a NFT ticketing system 🥚 🤓 If you're watching the videos, use t

Dec 17, 2022

DOMPurify - a DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML, MathML and SVG. DOMPurify works with a secure default, but offers a lot of configurability and hooks. Demo:

DOMPurify DOMPurify is a DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML, MathML and SVG. It's also very simple to use and get started with

Jan 7, 2023

HTML5 rich text editor. Try the demo integration at

Squire Squire is an HTML5 rich text editor, which provides powerful cross-browser normalisation in a flexible lightweight package (only 16.5KB of JS a

Dec 28, 2022

Unite Gallery - Responsive jQuery Image and Video Gallery Plugin. Aim to be the best gallery on the web on it's kind. See demo here:

##Unite Gallery - Responsive jQuery Gallery Plugin Product Link: unitegallery.net This gallery has commercial versions for: WordPress , Joomla! , Pres

Oct 24, 2022

A Google Clone which built with ReactJS. You can click the demo and search whatever you want!

Google Clone with ReactJS A small web app that imitate the desktop web version of google site, you can search whatever you want. Google Clone Demo Lin

Aug 14, 2022

A Node JS Express/Serverless demo application that creates a slideshow video using the Pexels image library and Shotstack video editing API.

Shotstack Pexels Slideshow Video Demo This project demonstrates how to use the Shotstack cloud video editing API to create a video using an HTML form

Dec 9, 2022

The deck, starter project, & final demo for @lachlanjc’s talk at PrideMakers 2021.

PrideMakers 2021 The deck, starter project, & final demo for @lachlanjc’s talk at PrideMakers 2021. Starter on Glitch: https://glitch.com/~pridemakers

Sep 24, 2021

This is a demo sample of linking NODEJS via ORM and MYSQL

Demons(Demo of Nodejs with SQL) This is a demo sample of linking NODEJS with ORM and MYSQL Connecting Node to SQL is a hard task and not much help is

Apr 14, 2022

微信小程序状态管理的 demo

微信小程序状态管理基于发布订阅模式、小程序自定义组件behaviors配置实现数据的状态管理。这个作为demo稍微有点复杂。精简版可看实现应用场景原生微信小程序开发解决问题和实现目的全局共享的状态管理组件与页面都可订阅状态按需订阅支持异步编程不依赖插件准备工作小程序开发者

Feb 16, 2022

A demo of LaunchDarkly, React, and Vite, using the Pokémon API!

Pokémon Feature Flags demo Here's a demo for integrating feature flags into a React project! Built with React, Vite, the PokeAPI, and LaunchDarkly! Wh

Jan 5, 2022

Demo of the tutorial on how to craft a fullscreen SVG crosshair mouse cursor with a special distortion effect on hover.

Crosshair Mouse Cursor Distortion Demo of the tutorial on how to craft a fullscreen SVG crosshair mouse cursor with a special distortion effect on hov

Sep 23, 2022

Comments

No roof display

Hi, thanks for the great idea I tried with data that is part of Singapore region from source OSM The results I see do not show roof data. Is it because of the data structure or something else? Looking forward to hearing from you soon. Thank you

question

opened by duongnv1989 5

Owner

Chee Aun

Product-first Front-end Engineer. Interested in design, dataviz, maps, public transport & stickers.

GitHub https://cheeaun.github.io/om3d/

Demo of Singapore buildings 3D tiles from OneMap on Mapbox GL JS.

Related tags

Overview

Singapore buildings 3D Tiles from OneMap 3D on Mapbox GL JS

Development

Copyright

You might also like...

Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL

Mapbox JavaScript API, a Leaflet Plugin

Draw tools for mapbox-gl-js

Mapbox Visual for Power BI - High performance, custom map visuals for Power BI dashboards

Vuejs 2 components for interacting with mapbox-gl-js

(IDW) Interpolated Heatmap Layer for mapbox-gl

MERN stack travel app using mapbox API, Travel and drop pin , share reviews and rate the location

Cross provider map drawing library, supporting Mapbox, Google Maps and Leaflet out the box

Nftix-demo-ui - Demo UI used in my NFT course on Egghead.io

DOMPurify - a DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML, MathML and SVG. DOMPurify works with a secure default, but offers a lot of configurability and hooks. Demo:

HTML5 rich text editor. Try the demo integration at

Unite Gallery - Responsive jQuery Image and Video Gallery Plugin. Aim to be the best gallery on the web on it's kind. See demo here:

A Google Clone which built with ReactJS. You can click the demo and search whatever you want!

A Node JS Express/Serverless demo application that creates a slideshow video using the Pexels image library and Shotstack video editing API.

The deck, starter project, & final demo for @lachlanjc’s talk at PrideMakers 2021.

This is a demo sample of linking NODEJS via ORM and MYSQL

微信小程序状态管理的 demo

A demo of LaunchDarkly, React, and Vite, using the Pokémon API!

Demo of the tutorial on how to craft a fullscreen SVG crosshair mouse cursor with a special distortion effect on hover.

Comments

No roof display

Owner

Chee Aun

Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL

Mapbox JavaScript API, a Leaflet Plugin

Draw tools for mapbox-gl-js

Mapbox Visual for Power BI - High performance, custom map visuals for Power BI dashboards

Vuejs 2 components for interacting with mapbox-gl-js

(IDW) Interpolated Heatmap Layer for mapbox-gl

MERN stack travel app using mapbox API, Travel and drop pin , share reviews and rate the location

What's Happening in Singapore

Explore Alveus Sanctuary with an interactive map and find out more about the different buildings on the property.

Implements the tilelive API for generating vector tiles from PostGIS