Is it possible to create 3D maps using a combination of Three.js and leaflet

Creating 3D maps with Leaflet can be quite the challenge, but I'm determined to make it happen. My goal is to display buildings in a three-dimensional perspective using Leaflet as my foundation.

I've dabbled with OSM Buildings, but they fell short of providing the true 3D effect I'm seeking. ReadyMap from Pelican Mapping seemed promising since it already integrates with Leaflet, however, outdated API updates have hindered my progress. Despite reaching out for assistance on Github, I've hit a standstill in getting ReadyMap to function correctly. The complexity of their source code only adds to my frustration, and I'm unsure if OSM Buildings is even compatible with ReadyMap.

With these hurdles in mind, I'm now exploring other options. My top considerations are Cesium AGI and Three.js.

The end result I envision would resemble something like this:

To see an example, visit this site and click on "Earth" on the right side of the page.

If anyone has insights or recommendations on achieving this 3D mapping goal, I would immensely appreciate your help!

javascriptdictionary3dthree.jsleaflet

Answer №1

Check out the maptalks JavaScript library for building 2D/3D maps.

(I'm the primary creator of maptalks)

Answer №2

During a collaborative effort with some colleagues, we developed a 3D-Plugin for Leaflet as part of a university project.

If you're interested in checking it out, feel free to click on the following link: (Look for the 3D Button in the top left corner).

This plugin was built using WebGL, which is essentially Three.js with fewer additional components. For those curious about the mathematical principles behind the placement of 3D elements, check out this resource: http://bl.ocks.org/Sumbera/c6fed35c377a46ff74c3

The 3D models used in this plugin are either generated from OSM data or created in Blender. The rendering technique involves simple flat-shading lighting, with numerous tutorials available for further guidance.

If you have any specific inquiries or require more information, feel free to reach out.

Answer №3

Have you heard of the F4 Map? It's a project that is not widely known, but you can find some information about it on the OSM wiki.

For an example of what the map looks like, you can check out this link to view a map of Moscow

Answer №4

For those interested in 3D mapping, it is recommended to explore the updated iteration of OSMBuildings, offering a truly immersive experience.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issues with OrbitControls in THREE.js are preventing proper functionality

After setting up my JavaScript code to utilize Three.js OrbitControls, I thought I had everything in place: <script>"OrbitControls.js"></script> As well as: var cameraControls; cameraControls = new THREE.OrbitControls(camera, renderer.dom ...

javascriptanimationthree.jsrotationorbit.js

Validation of passwords in reactive forms using Angular Material Design Lite

I have a password field with specific validation requirements: The password must be alphanumeric It cannot consist solely of characters or numbers <p> <mdl-textfield label="Password" ...

javascriptangularangular-mdl

What is the mechanism through which the subtraction operator initiates the conversion of an array to a

Here are a couple of examples showcasing my code. Let's start with the first one: console.log([4] + 10); //"410" It is commonly known that the addition operator can only work with numbers and strings. Therefore, in this case, [4] needs to b ...

javascriptarraysstringnumbers

What causes the "Cannot read properties of undefined" error in Vue when an array is initialized and output is still being displayed?

I am working with two vue files, namely App.vue and a component called UsersPage.vue. UsersPage.vue: <script> export default { data:() =>({ usersList : [] }), methods:{ async createUsersList(){ this.usersLi ...

javascriptvue.jsvuejs3

In what way can I indicate parsing "per dataset" using Chart.js?

I'm currently exploring the usage of the yAxisKey option in ChartJS while defining a dataset. However, I'm encountering difficulties in replicating this specific example from the documentation. Despite my efforts to search for issues related to y ...

javascriptchart.js

Creating a gradient border that rotates 360 degrees on mouse hover

.brand-img::after { content: ''; position: relative; background-image: url('https://i.sstatic.net/Y2vyB.png'); background-repeat: no-repeat; float: left; margin-left: 15px; transition: all 1.8s ease; width: 135px; height: 135px ...

javascriptjquerycsshtml

Proper Structure for Node System (BASIC)

Overview Recently, I entered the world of Node.js and built some basic back end functionality. However, I realized that everything was clustered in one file (index.js) which led me to explore tutorials on using express router middleware and adapting a mod ...

javascriptnode.jsexpressmodel-view-controllermodule

Value of an object passed as a parameter in a function

I am trying to use jQuery to change the color of a link, but I keep getting an error when trying to reference the object. Here is my HTML : <a onmouseover="loclink(this);return false;" href="locations.html" title="Locations" class="nav-link align_nav" ...

javascriptjqueryhtmlcss

Adjusting Image Size based on Window Width for Internet Explorer

Based on the provided code snippet <style> .x{ background: url('img.jpg') no-repeat; background-size: contain; height: 100%; } </style> <div class="x"></div> It is functioning correctly in Chrome and Firef ...

javascriptjqueryinternet-explorercss

What is the best way to populate an AngularJS list using a for loop or an array?

After reviewing this code that has been hard coded, I have identified the following: $scope.years = [ {id:curryear, name: curryear} {id:curryear - 1, name: curryear - 1} {id:curryear - 2, name: curryear -2} ]; My current task involves populating ...

javascripthtmlangularjs

Using node.js to set the billing address while confirming a Stripe Payment intent

Is there a way to specify the billing address of a payment intent with Node.js? When using the Stripe.js browser-side framework, I can easily accomplish this by utilizing Stripe elements and the stripe.confirmPayment function, which automatically captures ...

javascriptnode.jstypescriptstripe-payments

Select checkboxes by clicking a button that matches the beginning of a string in JavaScript

I have a form with a list of users and checkboxes below their names. Each user has a button that should select all checkboxes assigned to them. Below is the code for the dynamically created buttons and checkboxes. The included function takes the form name ...

javascriptphpjqueryhtmlcheckbox

I am facing an issue while attempting to connect to Mongo Atlas with the provided code. Unfortunately, I am unable to successfully create a

const { MongoClient } = require("mongodb"); const url = "mongodb+srv://user:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="96e6f7e5e5e1f9e4f2d6f5fae3e5e2f3e4a6b8a4a3e6fce0f1eeb8fbf9f8f1f9f2f4b8f8f3e2">[email ...

javascriptnode.jsmongodbaws-documentdb-mongoapi

Determine in JavaScript whether a character is 32-bit or not

Is there a way to determine if a specific character is 32 bits using JavaScript? I attempted to use charCodeAt() but it was unsuccessful for identifying 32-bit characters. Any guidance or assistance on this matter would be greatly valued. ...

javascriptunicode

JavaScript - Automatic memory management following the execution of functions

After doing some research on garbage collection in JavaScript, I came across information stating that local variables of functions are collected once the function has returned (except for cyclical references which require breaking circles for the GC to fun ...

javascriptgarbage-collection

The clearfix feature is ineffective when using AngularJS

<ul class="dropdown-menu wm_search_div" ng-show="searchDivShow"> <li ng-repeat="user in searchUserList"> <a href="javascript:void(0);" class="wm_clearfix3"> <img ng-src="{{user.faceIcon}}" class="pull-left wm_se ...

javascripthtmlcssangularjs

Leveraging Enjoyhint within nextJS

I am attempting to create a code tour using EnjoyHint, but encountered an error after installing the xbs-enjoyhint library. The error reads: Server Error - ReferenceError: CanvasRenderingContext2D is not defined. This issue is within the jquery.enjoyhint ...

javascriptjqueryreactjsenjoyhint

Troubleshooting a unique CSS bug in jQuery mouseover functionality

Check out this pen: https://codepen.io/anon/pen/eKzEVX?editors=1111 I recently created a Form Select in Laravel: {!! Form::select('status_id', $statuses, $post->status_id, ['class' => 'form-control post-sub-items-label &apo ...

javascriptjqueryhtmlcssmouseover

Include personalized headers to the 'request'

I have configured my express server to proxy my API using the following setup: // Proxy api calls app.use('/api', function (req, res) { let url = config.API_HOST + req.url req.pipe(request(url)).pipe(res) }) In this instance, confi ...

javascriptnode.jsexpresshttp-headershttprequest

Display a popup on a button click or icon click in ASP.NET

On Facebook, you may notice that you have 4 friend requests or notifications in the small mail icon on the right side. When you click on it, a pop-up appears with an accept button, and once you accept, it disappears and the remaining three requests are sho ...

javascriptajaxasp-classic