Change the style of a text entity¶

Add a text entity using the Entity API and change its style

custom_text_style.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Change the style of a text entity</title>
  <meta property="og:description" content="Add a text entity using the Entity API and change its style" />
  <script src="https://resource.mapray.com/mapray-js/v0.9.6/mapray.min.js"></script>
  <script src="https://resource.mapray.com/ui/v0.9.6/maprayui.min.js"></script>
  <link rel="stylesheet" href="https://resource.mapray.com/styles/v1/mapray.css">
  <style>
    body {margin: 0; padding: 0;}
    html, body, div#mapray-container { height: 100%; }
    .map-overlay { 
        font: 12px/20px "Robot", sans-serif;
        position: absolute;
        width: 200px;
        top: 0;
        left: 0;
        padding: 10px;
    }
    .map-overlay .map-overlay-inner {
        background-color: #fff;
        color: #000;
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
        border-radius: 3px;
        padding: 10px;
        margin-bottom: 10px;
    }
    .map-overlay-inner .select-fieldset {
        display: block;
    }
    .map-overlay-inner fieldset {
      border: none;
        padding: 0;
        margin: 0 0 10px;
    }
    .map-overlay-inner fieldset:last-child {
        margin: 0;
    }

    .map-overlay-inner select {
        width: 100%;
    }

    .map-overlay-inner label {
        display: block;
        font-weight: bold;
        margin: 0 0 5px;
    }

    .map-overlay-inner button {
        display: inline-block;
        width: 36px;
        height: 20px;
        border: none;
        cursor: pointer;
    }

    .map-overlay-inner button:focus {
        outline: none;
    }

    .map-overlay-inner button:hover {
        box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.1);
    }
  </style>
</head>

<body>
  <div id="mapray-container"></div>
  <div class="map-overlay top">
      <div class="map-overlay-inner">
          <fieldset class="select-fieldset">
              <label for="fontPreset">Select font styles</label>
              <select id="fontPreset" name="fontPreset">
                  <option value="normal">normal</option>
                  <option value="italic">italic</option>
                  <option value="oblique">oblique</option>
              </select>
          </fieldset>
          <fieldset>
              <label>Choose a color</label>
              <div id="swatches"></div>
          </fieldset>
      </div>
  </div>
</body>
</html>

<script>
  // Set up your access token, which can be created in Mapray Cloud.
  var apikey= "<YOUR_MAPRAY_API_KEY>";

  // The StandardUIView in the ui package includes mouse-based camera manipulation.
  const uiviewer = new maprayui.StandardUIViewer( "mapray-container", apikey);

  uiviewer.setCameraPosition({
    longitude: 139.766365,
    latitude: 35.657281,
    height: 500
  });

  uiviewer.setLookAtPosition({
    longitude: 139.745340,
    latitude: 35.658694,
    height: 0
  });

  // Define Colors [Red, Green, Blue]
  const colors = [
    [247, 189, 143],
    [201, 247, 143],
    [143, 247, 190],
    [143, 201, 247],
    [190, 143, 247],
    [ 39, 146, 195],
    [ 88,  39, 194],
    [194,  39, 145],
    [145, 194,  39],
    [ 39, 194,  88],
  ];

// Create TextEntity
  var entity = new mapray.TextEntity( uiviewer.viewer.scene );
  entity.addText( "Tokyo Tower",  new mapray.GeoPoint( 139.745340, 35.658694, 100 ) );

  // Set Font Style
  entity.setColor( mapray.Color.createOpaqueColorFromBytes( colors[0] ) );
  entity.setFontSize( 50 );
  entity.setFontStyle( "normal" );

  uiviewer.viewer.scene.addEntity( entity );

  const layer = document.getElementById('layer');

  // Create UI
  // - create color pallet
  // - update styles depending on the UI control
  const swatches = document.getElementById('swatches');

  for ( const color of colors ) {
    const swatch = document.createElement('button');
    swatch.style.backgroundColor = 'rgb(' + color.join( ',' ) + ')';
    swatch.setAttribute('aria-label', 'Set color to rgb(' + color.join( ',' ) + ')');
    swatch.onclick = function() {
        entity.setColor( mapray.Color.createOpaqueColorFromBytes( color ) );
    };
    swatches.appendChild( swatch );
  }

  document
    .getElementById('fontPreset')
    .addEventListener('change', function() {
        entity.setFontStyle( this.value );
    });
</script>

Info

このサンプルコードは、<YOUR_MAPRAY_API_KEY>を、あなたのMapray CloudアカウントのAPI Keyに置き換えるまで、期待通りに動作しません。