Sigfox Coverage Map이란?

Sigfox사가 지도 어플리케이션이나 웹사이트에 임베드하는 것을 목적으로 API 제공하고 있는 커버리지 맵입니다.
아래 URL에서 타일 이미지를 얻을 수 있습니다.https://tiles.sigfox.com/{TOKEN}/{z}/{x}/{y}.png

TOKEN 취득

지도를 얻기 위한 토큰입니다. 만료일은 72시간이므로 적시에 갱신해야 합니다.
토큰을 얻는 방법은 아래 URL에서 GET 요청을 합니다.https://api.sigfox.com/v2/tiles/public-coverage응답은 다음과 같은 JSON이므로,

tiles-public-coverage.json

{
 "baseImgUrl":"https://tiles.sigfox.com/***",
 "tmsTemplateUrl":"https://tiles.sigfox.com/***/{z}/{x}/{y}.png",
 "bounds":{"sw":{"lat":-80.0,"lng":-180.0},"ne":{"lat":80.0,"lng":180.0}}
}

이 *** 부분이 토큰이 됩니다.

타일 이미지 불러오기

토큰을 취득하면, 앞서 설명한 Sigfox Tiles 서버 URL의 {TOKEN} 부분에 취득한 토큰을 붙여 붙여, 이미지 타일에 대응한 지도 어플리케이션으로부터 호출할 뿐입니다.

Google Maps API에서 타일 이미지 레이어 추가

먼저 기본 Google Maps Javascript API를 사용하여 지도를 웹 브라우저에 표시해 보겠습니다.
샘플 코드는 Google에서 제공하는 자습서( 여기 )를 그대로 사용해 봅니다. 만약을 위해 소스 코드는 아래와 같습니다.

google-map.html

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 35.6384, lng: 139.7343},
          zoom: 8
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>
  </body>
</html>

Sigfox Coverage Tile 레이어 추가

위 예제 코드의 initMap()에 아래 코드를 추가하십시오.

Sigfox-Tile.js

var tileLayer = new google.maps.ImageMapType({
  name: 'SigfoxCoverage',
  getTileUrl: function(coord, zoom) {
    var url = 'https://tiles.sigfox.com/{TOKEN}/{z}/{x}/{y}.png'
              .replace('{x}', coord.x)
              .replace('{y}', coord.y)
              .replace('{z}', zoom);
    return url;
  },
  tileSize: new google.maps.Size(256, 256),
  opacity: 0.7
});
map.overlayMapTypes.insertAt(0, tileLayer);

opacity는 추가할 이미지 타일 레이어의 투명도입니다. 이것을 설정하지 않으면 배경지도가 보이지 않게 됩니다.

Sigfox Coverage Map 확인

성공하면 다음과 같이 Google Map에 적용 범위 지도가 표시됩니다.

표시 범위를 제한하려는 경우

만약, 지도의 표시 범위를 제한하고 싶은 경우는 google.maps.MapRestriction 인터페이스를 사용해 아래와 같이 위도 경도(사각형) 지정으로 표시 제한을 붙일 수도 있습니다.

restriction.js

restriction: {
  latLngBounds: {
    north: 45.60,
    south: 20.42,
    west: 122.93,
    east: 153.99
  },
  strictBounds: false
}

위도경도는, 적당히 일본의 동서남북단점의 좌표를 쓰고 있습니다.

다만, 만약, 보다 정확하게 하려고 했을 경우, 예를 들어, 사각형 정의(Bounds 정의)에서는 부족한 경우, drag 이벤트의 청취자를 사용해, 폴리곤의 내외 판정에 의한 표시 제한을 하는 것이 좋을지도 모르겠네요.

Sigfox Japan KCCS

Tweets by ghibi

Reference

이 문제에 관하여(Sigfox Coverage Map을 Google Maps API로 표시), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ghibi/items/a32a6a71066e12c10eda

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다

Sigfox Coverage Map을 Google Maps API로 표시