Mapray JS. An open-source library for interactive high quality 3D globes and maps

Published in

The 3D Globe is beautiful

2 min readMar 25, 2019

Mapray build customized GIS contents that bring the real world to your users with 3D maps. Mapray has two part services. One is mapray JS and the other is mapray cloud.

Today, I would like to explain mapray JS. it is javascript library for a high quality interactive 3D globes and map on the web. It lets you customize 3D maps with your own content for display on web pages. The following is sample code. You can execute this code to draw an interactive beautiful 3D globe on your web browser.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello Globe</title>
    <script src="https://api.mapray.com/mapray-js/v0.5.1/mapray.js"></script>
</head>
<style>
    html, body {
        height: 100%;
        margin: 0;
    }
    div#mapray-container {
        display: flex;
        height: 100%;
    }
</style>
<body>
    <div id="mapray-container"></div>
</body>
</html>

<script>
     // Set Access Token for mapray cloud
       var accessToken = "<your access token here>";

       // For Image tiles
       var imageProvider = new mapray.StandardImageProvider( "https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/", ".jpg", 256, 0, 18 );

       // Create viewer
       var viewer = new mapray.Viewer(
           "mapray-container", {
               image_provider: imageProvider,
               dem_provider: new mapray.CloudDemProvider(accessToken)
           }
       );

       // Setting the position of camera
       var home_pos = { longitude: 138.247739, latitude: 35.677604, height: 3000 };

       var home_view_to_gocs = mapray.GeoMath.iscs_to_gocs_matrix( home_pos, mapray.GeoMath.createMatrix());

       var cam_pos = mapray.GeoMath.createVector3( [-3000, 2600, 1000] );
       var cam_end_pos    = mapray.GeoMath.createVector3( [0, 0, 0] );
       var cam_up         = mapray.GeoMath.createVector3( [0, 0, 1] );

       var view_to_home = mapray.GeoMath.createMatrix();
       mapray.GeoMath.lookat_matrix(cam_pos, cam_end_pos, cam_up, view_to_home);

       var view_to_gocs = viewer.camera.view_to_gocs;
       mapray.GeoMath.mul_AA( home_view_to_gocs, view_to_home, view_to_gocs );

       viewer.camera.near = 30;
       viewer.camera.far = 500000;
</script>

We have implemented various optimization algorithms on mapray JS and cloud. Optimized terrain data delivered from mapray cloud will be rendered precisely in mapray JS. Developer can use any non-commercial or commercial map tile data and mapray JS render any tile data as beautiful as possible.

Mapray JS is open-source software. Please use it if you are interested.

Github repository is here.

Mapray website is here.

Mapray JS. An open-source library for interactive high quality 3D globes and maps

Written by Daisuke Matsumoto