日本地図

市区町村や郵便番号を選んで、選んだ地区を中心とした地図を表示します。

Bootstrap4を使ってるのでレスポンシブです。

データはRESAS (内閣府地域経済分析システム)のAPIなどを使ってます。

< URL >

https://psn.saoline.co/jpinfo/

< 機能 >

  1.  地区選択を市区町村と郵便番号別地区で切替え
  2.  地図は、Leflet, Gppgle, Bing, Openlayerが選べる
  3.  Leafletは多数のレイヤーを切替え出来る
  4. GeoJSONのマーカーを選んで表示出来る
  5. 調べた場所の現在の天気と天気予報がわかる

< 画面例 >

Leaflet: グーグル衛星レイヤー

 

 

 

Leaflet : オープンストリートマップ

 

郵便番号検索タイプ : BingMap

 

 

 

 

GoogleMap : 航空写真ラベルなし : 東京近辺自衛隊駐屯地マーカー

2020年版 UNLO地名コード

同様のものは昔作りましたが、データが古くなってきて新しく増えた都市や港がないので、最新のデータを利用しました。

Bootstrap4を使ったので、レスポンシブです。

セルクリックで地図、天気予報を下に表示します。

地図は、Leaflet, Yahoo, Bing, Google, OpenLayers, MapBox を選べますので、好み、用途に対応してます。

天気予報データは、OpenWeatherMapのAPIを使ってます。

ジオコーダーは、OpenCageのAPIを使ってます。

現在時刻用のタイムゾーンは、ipgeolocation.ioのAPIを使ってます。

APIは全てフリーライセンスのプランなので、利用リミットに達した場合、処理出来ないことがありますので、ご了承下さい。

< URL >

https://psn.saoline.co/unlo20/

[ セルクリックの動作 ]

UNLOコード列 : 天気予報を表示

地名列 : クリックした地名でジオコーダーして得た経緯度を中心とした地図を表示

ロケーション列 : 表示されている経緯度を中心とした地図を表示

< 画面例 >

 

 

 

 

 

 

 

 

 

 

 

Leaflet で GeoJSON のマーカーを表示

GeoJSONを使って多数のマーカーを地図で高速に表示出来るので、GoogleMapのAPIで使ってましたが、課金が多くなって来るので、Leafletへの代替中で調べて試したところ、下のようなので出来ました。

< コード例 >


      // ローカルのGeoJSONを読込 //
      const fnm = "GeoJSON/" + this.geojsonnm + ".json";
      
      // -- featuresを走査 -- //  
      $.getJSON(fnm, function (data) {
        let popuphtml = "";
        let icn;
        let geojson = L.geoJson(data, {
          onEachFeature: function (feature, layer) {
            // ポップアップのHTML //
            popuphtml = feature.properties.name + "<br>" +
                    feature.properties.zip + "<br>" +
                    feature.properties.addr + "<br>" +
                    feature.properties.tel;
            // HTMLをレイヤーにバインドする //
            layer.bindPopup(popuphtml);

            // PCの場合、マウスオーバーでポップアップさせる //
            if (!IS_TABLETUSER) {
              layer.on('mouseover', function (e) {
                this.openPopup();
              });
              layer.on('mouseout', function (e) {
                this.closePopup();
              });
            }

          }
          // マーカーをプロパティで記述したアイコンに変更 //
          , pointToLayer: function (feature, latlng) {

            if (feature.properties.icon !== "") {
              icn = L.icon({
                iconUrl: feature.properties.icon,
                //shadowUrl: 'leaf-shadow.png',
                iconSize: [20, 20]
              });

            }
            return L.marker(latlng, {icon: icn});
          }


        });
        // マップに追加 //
        geojson.addTo(lmap);

      });

< GeoJSON例 >

{
  "features": [
    {
      "type": "Feature",
      "properties": {
        "zip": "162-0845",
        "addr_e": "",
        "icon": "Img/lmapicon/targetplace.png",
        "name": "防衛省本庁",
        "unlo": "",
        "tel": "",
        "id": "28741",
        "tp": "",
        "addr": "新宿区市谷本村町5-1",
        "name_e": "",
        "url": ""
      },
      "geometry": {
        "coordinates": [
          139.7288,
          35.6928
        ],
        "type": "Point"
      }
    },
    {
      "type": "Feature",
      "properties": {
        "zip": "239-0811",
        "addr_e": "",
        "icon": "Img/lmapicon/targetplace.png",
        "name": "防衛大学校",
        "unlo": "",
        "tel": "",
        "id": "28742",
        "tp": "",
        "addr": "横須賀市走水1-10-20",
        "name_e": "",
        "url": ""
      },
      "geometry": {
        "coordinates": [
          139.72196,
          35.25767
        ],
        "type": "Point"
      }
    },
    {
      "type": "Feature",
      "properties": {
        "zip": "359-0042",
        "addr_e": "",
        "icon": "Img/lmapicon/targetplace.png",
        "name": "防衛医科大学校",
        "unlo": "",
        "tel": "",
        "id": "28743",
        "tp": "",
        "addr": "所沢市並木3-2",
        "name_e": "",
        "url": ""
      },
      "geometry": {
        "coordinates": [
          139.46762,
          35.80379
        ],
        "type": "Point"
      }
    },

< 地図表示例>

 

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

独習JavaScript 新版 [ CodeMafia 外村 将大 ]
価格:3278円(税込、送料無料) (2023/1/1時点)

楽天で購入

 

 

Javascript ES6 テンプレートリテラル

JavascriptでES6を使い始めて、PHPのようにヒアドキュメントみたいなことが出来るのがわかり、使ってみました。

+ がなくなり、すっきりわかりやすくなったので、HTML tableタグの記述とかに使っていこうと思います。

< コード例 >


  /**
   * 中分類tableタグ
   * @param {type} caption
   * @returns {String}
   */
  getMiddleResultHTML (caption) {
    
    
       
    let html = `<table id='mrestbl' class='table table-striped table-bordered table-hover table-sm'>
    <caption style='caption-side: top;'>${caption}</caption>
    <thead>
    <tr style='text-align:center;' class='bg-dark text-white'>
    <th>No</th><th>CD</th><th>説明</th>
    </tr>
    </thead>
    <tbody>`;
    
    // tr走査してtd生成 //
    let curno;
    let curfunctitle = "";
    $.each(this.records, function (i, itm) {
      
      curno = Number(i + 1);
      
      let curhtml = `<tr class='curpo mtr'>
      <td class='text-right nocell' style='color:navy; border-right-color: #555555'>
      ${curno}
      </td>
      <td class='text-right' >${itm["itemCode2"]}</td>
      <td>${itm["itemName2"]}</td>
      </tr>`;
      
      html += curhtml;
      
    });
    html += "</tbody></table>" ;
    //console.log(html);
    
    return html;
    
  }

< JSONデータソース >

[
    {
        "itemCode1": 1,
        "itemName1": "動物(生きているものに限る。)及び動物性生産品",
        "itemCode2": 1,
        "itemName2": "動物(生きているものに限る。)"
    },
    {
        "itemCode1": 1,
        "itemName1": "動物(生きているものに限る。)及び動物性生産品",
        "itemCode2": 2,
        "itemName2": "肉及び食用のくず肉"
    },
    {
        "itemCode1": 1,
        "itemName1": "動物(生きているものに限る。)及び動物性生産品",
        "itemCode2": 3,
        "itemName2": "魚並びに甲殻類、軟体動物及びその他の水棲無脊椎動物"
    },
    {
        "itemCode1": 1,
        "itemName1": "動物(生きているものに限る。)及び動物性生産品",
        "itemCode2": 4,
        "itemName2": "酪農品、鳥卵、天然はちみつ及び他の類に該当しない食用の動物性生産品"
    },
    {
        "itemCode1": 1,
        "itemName1": "動物(生きているものに限る。)及び動物性生産品",
        "itemCode2": 5,
        "itemName2": "動物性生産品(他の類に該当するものを除く。)"
    }
]

RESAS 市区町村コード API

仕事で市区町村コードのデータが必要になり、ため込んで更新するのも面倒なので探してたところ見つけました。

https://opendata.resas-portal.go.jp/docs/api/v1/cities.html

RESAS 輸出入品目API

仕事でHSコード(輸出入品目)のデータが必要になり、探してましたところ見つけました。

https://opendata.resas-portal.go.jp/docs/api/v1/tradeInfoItemTypes/middle.html

4桁まで対応してます。

OpenCage Geocorder

GeocorderのAPIはGoogleを使ってましたが、課金されるので、フリーなのを探してたところ見つけました。

SDKも多数あってチュートリアルも詳しいです。https://opencagedata.com/code

経緯度を渡すと、タイムゾーンも取得できます。
日本の郵便番号を渡すと、誤結果が多いので地名で渡してます。

デモページでのレスポンス
OpenCage Geocorder : https://opencagedata.com/

HTTP Status code: 200

HTTP Headers:
  Content-Type: application/json; charset=utf-8
  access-control-allow-origin: *
  X-RateLimit-Limit: 2500
  X-RateLimit-Remaining: 2499
  X-RateLimit-Reset: 1589155200

Content:
{
  "documentation": "https://opencagedata.com/api",
  "licenses": [
    {
      "name": "see attribution guide",
      "url": "https://opencagedata.com/credits"
    }
  ],
  "rate": {
    "limit": 2500,
    "remaining": 2499,
    "reset": 1589155200
  },
  "results": [
    {
      "annotations": {
        "DMS": {
          "lat": "31° 47' 33.88056'' N",
          "lng": "35° 13' 4.46736'' E"
        },
        "MGRS": "36RYA0998619605",
        "Maidenhead": "KM71ot60dg",
        "Mercator": {
          "x": 3920439.541,
          "y": 3713626.637
        },
        "OSM": {
          "edit_url": "https://www.openstreetmap.org/edit?node=2754824262#map=17/31.79274/35.21791",
          "note_url": "https://www.openstreetmap.org/note/new#map=17/31.79274/35.21791&layers=N",
          "url": "https://www.openstreetmap.org/?mlat=31.79274&mlon=35.21791#map=17/31.79274/35.21791"
        },
        "UN_M49": {
          "regions": {
            "ASIA": "142",
            "IL": "376",
            "WESTERN_ASIA": "145",
            "WORLD": "001"
          },
          "statistical_groupings": [
            "MEDC"
          ]
        },
        "callingcode": 972,
        "currency": {
          "alternate_symbols": [
            "ש״ח",
            "NIS"
          ],
          "decimal_mark": ".",
          "html_entity": "₪",
          "iso_code": "ILS",
          "iso_numeric": "376",
          "name": "Israeli New Sheqel",
          "smallest_denomination": 10,
          "subunit": "Agora",
          "subunit_to_unit": 100,
          "symbol": "₪",
          "symbol_first": 1,
          "thousands_separator": ","
        },
        "flag": "🇮🇱",
        "geohash": "sv9hc7syhtphz8kd165p",
        "qibla": 157.26,
        "roadinfo": {
          "drive_on": "right",
          "road": "דויד חזן",
          "speed_in": "km/h"
        },
        "sun": {
          "rise": {
            "apparent": 1589078820,
            "astronomical": 1589073300,
            "civil": 1589077200,
            "nautical": 1589075340
          },
          "set": {
            "apparent": 1589127900,
            "astronomical": 1589133360,
            "civil": 1589129460,
            "nautical": 1589131380
          }
        },
        "timezone": {
          "name": "Asia/Jerusalem",
          "now_in_dst": 1,
          "offset_sec": 10800,
          "offset_string": "+0300",
          "short_name": "IDT"
        },
        "what3words": {
          "words": "とつじょ・はずれて・あなぐま"
        }
      },
      "bounds": {
        "northeast": {
          "lat": 31.7928446,
          "lng": 35.2180076
        },
        "southwest": {
          "lat": 31.7926446,
          "lng": 35.2178076
        }
      },
      "components": {
        "ISO_3166-1_alpha-2": "IL",
        "ISO_3166-1_alpha-3": "ISR",
        "_category": "building",
        "_type": "building",
        "city": "エルサレム",
        "continent": "Asia",
        "country": "イスラエル",
        "country_code": "il",
        "house_number": "11",
        "neighbourhood": "קרית בעלז",
        "road": "דויד חזן",
        "state": "מחוז ירושלים",
        "suburb": "הבוכרים"
      },
      "confidence": 10,
      "formatted": "דויד חזן 11, エルサレム, イスラエル",
      "geometry": {
        "lat": 31.7927446,
        "lng": 35.2179076
      }
    }
  ],
  "status": {
    "code": 200,
    "message": "OK"
  },
  "stay_informed": {
    "blog": "https://blog.opencagedata.com",
    "twitter": "https://twitter.com/OpenCage"
  },
  "thanks": "For using an OpenCage API",
  "timestamp": {
    "created_http": "Sun, 10 May 2020 01:59:15 GMT",
    "created_unix": 1589075955
  },
  "total_results": 1
}

 

フリーでの制限は、1リクエスト/秒, 2500リクエスト/日 となってます。