CODEWITHSUNDEEP
javascriptthree.jsleaflet
davepmiller
davepmiller

Reputation: 2708

Leaflet (OSM tiles) Shown as a ground plane in a 2D environment

I'd like to take a tile, which I'm pulling from Openstreetmaps and making it the ground plane for a 3D environment. I've looked into three.js which looks promising, but I feel I'm making this problem a little more complicated than it needs to be. 

var map = L.map('map').setView([46.742798, -116.988537], 18);

var tile = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {

        maxZoom: 18,
        id: 'examples.map-i86knfo3'

}).addTo(map);

var marker = L.marker( [ 46.742798, -116.988537 ] ).addTo( map )
        .bindPopup("<b> Hello World</b><br />").openPopup();


var popup = L.popup();

var ll = L.latLng( 46.742798, -116.988537 );
var polyline = L.polyline( ll, { color: 'green' } ).addTo( map );

var dragSwitch = false;

function onMapClick( e )
{
    popup
        .setLatLng( e.latlng )
        .setContent("You clicked the map at " + e.latlng.toString())
        .openOn( map );
}


try
{
    object.new_coord.connect( fnc );
}
catch ( e )
{
    print( e );
}

map.on('click', onMapClick);

So, taking the map variable in the code above and having that be the ground plane. Thanks in advance !

Upvotes: 1

Views: 860

Answers (1)

tmcw
tmcw

Reputation: 11882

Leaflet doesn't support 3D, and trying to make it support 3D would be more work than it's worth. There are other systems that support 3D already, like WebGL earth and Cesium, which you should start with.

Upvotes: 1

Related Questions