mapray-js

    0.7.3 • Public • Published

    Mapray

    Build Status

    maprayJS is a JavaScript library for a high quality interactive 3D globes and map on the web. It is based on WebGL. WebSite

    Installation

    CDN

      <script src="https://resource.mapray.com/mapray-js/v0.7.3/mapray.js"></script> 

    npm

    npm install --save mapray-js

    Usage

    World Terrain data hosted by mapray cloud platform. Access Token is required to access to mapray cloud, it is under Closed Alpha Test and is released to a limited number of end-users. Mapray cloud managed by Sony Network Communications Inc. If you have any questions about the access token of mapray cloud or the services of mapray cloud, please contact us from the contact page.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Hello Globe</title>
        <link rel="stylesheet" href="https://resource.mapray.com/styles/v1/mapray.css">
    </head>
    <style>
        htmlbody {
            height: 100%;
            margin: 0;
        }
        div#mapray-container {
            display: flex;
            height: 100%;
        }
    </style> 
    <body>
        <div id="mapray-container"></div>
    </body>
    </html>
    <script src="https://resource.mapray.com/mapray-js/v0.7.3/mapray.js"></script>
    <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)
               }
           );
           viewer.attribution_controller.addAttribution({
               display: "国土地理院",
               link: "http://maps.gsi.go.jp/development/ichiran.html"
            });
           // Setting the position of camera
           var home_pos = { longitude: 138.247739, latitude: 35.677604, height: 3000 };
     
           var home_view_geoPoint = new mapray.GeoPoint( home_pos.longitude, home_pos.latitude, home_pos.height );
           var home_view_to_gocs = home_view_geoPoint.getMlocsToGocsMatrix( 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> 

    Documentation

    All documents only support Japanese.

    Documentation on Mapray official website

    API documents

    npm run jsdoc

    License

    maprayJS is licensed under the MIT license.

    Install

    npm i mapray-js

    DownloadsWeekly Downloads

    5

    Version

    0.7.3

    License

    MIT

    Unpacked Size

    1.37 MB

    Total Files

    153

    Last publish

    Collaborators

    • daisuke201