• ホーム
  • HS品目表
  • 日本地図
  • 世界地図
  • タイムライン
  • カレンダー
  • お問い合わせ
  • 運営者情報

HTS macam-macam

  • ホーム
  • HS品目表
  • 日本地図
  • 世界地図
  • タイムライン
  • カレンダー
  • お問い合わせ
  • 運営者情報

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"
      }
    },

< 地図表示例>

 

共有:

  • クリックして Twitter で共有 (新しいウィンドウで開きます)
  • Facebook で共有するにはクリックしてください (新しいウィンドウで開きます)

関連

2020-05-10 API Leaflet
コメントはまだありません

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

2020年版 UNLO地名コード

コメントを残す コメントをキャンセル

コメントを投稿するにはログインしてください。

カテゴリー

  • API (16)
    • FORSQUARE (1)
    • Google Vision (1)
    • googleMap (4)
      • Geocorder (1)
    • Holidays (1)
    • IP GeoLocation (1)
    • Leaflet (2)
    • OpenCage Geocorder (1)
    • RESAS (内閣府 地方創生推進室) (2)
    • teraren.com (1)
    • Yahoo!スタティックマップAPI (1)
  • Database (36)
    • Firebird (4)
    • MySQL (32)
    • Oracle (2)
    • PostgreSQL (2)
    • SQLAnyWhere (1)
    • sqlite (3)
  • Info Site (3)
    • Geomedian (1)
    • 地図蔵 (1)
    • 開店閉店.com (1)
  • Java (43)
    • groovy (2)
    • gson (9)
    • jps jstat (1)
    • JSoup (2)
    • JSP (4)
    • MyBatis (8)
    • Reflection (1)
    • Selenium (2)
    • Servlet (3)
    • Swing (1)
    • Tomcat (7)
  • JavaScript (63)
    • Class (2)
    • dropzone (1)
    • iziToast (1)
    • jqGrid (26)
    • jQuery (7)
    • jQuery-ui (17)
      • AutoComplete (1)
      • conTextMenu (1)
      • Dialog (3)
      • LightBox (2)
      • Lity (1)
      • multipleSelect (5)
      • Slick (1)
    • JSON (1)
    • Numeral (2)
    • Tippy (2)
    • toastr (1)
  • Linux (16)
    • Apache (5)
    • bash (1)
    • CentOS (3)
    • curl (1)
    • Fedora (1)
    • inotify (1)
    • jq (1)
  • PHP (16)
    • GD (11)
    • PDO (2)
  • Public Data (1)
    • 郵便番号 (1)
  • Tools (16)
    • favicon抽出 (1)
    • google-images-download (1)
    • Heidi SQL (1)
    • HTML (1)
    • HttpFox (1)
    • Javascript Obfuscator (1)
    • JSON Pretty Liner (1)
    • SSL Check (1)
    • Unix Timestamp (1)
    • whois geoIP (1)
    • XShell (1)
    • ZBarImg (1)
    • フリーアイコン (1)
    • 画像 (2)
  • Trouble (9)
  • Windows (2)
    • PowerShell (1)
    • コマンドプロンプト (1)
  • WordPress (1)
  • アプリケーション (4)
  • バドミントン (3)
  • リリースニュース (7)
  • 偉人名言集 (42)
    • Steeve Jobs (1)
    • アインシュタイン (1)
    • 三島由紀夫 (2)
    • 井上ひさし (1)
    • 井深大 (1)
    • 夏目漱石 (1)
    • 大隈重信 (4)
    • 小松左京 (1)
    • 山本五十六 (1)
    • 手塚治虫 (1)
    • 星新一 (1)
    • 本田宗一郎 (3)
    • 杉原千畝 (1)
    • 松本清張 (1)
    • 樋口一葉 (1)
    • 武者小路実篤 (1)
    • 湯川秀樹 (1)
    • 石ノ森 章太郎 (1)
    • 福沢諭吉 (14)
    • 赤塚不二夫 (2)
  • 情報システム (3)
  • 書評 (1)
  • 未分類 (1)
  • 海上輸送 (3)
  • 軍事研究 (2)
    • 宇宙 (2)
  • 連絡 (3)

アーカイブ

  • 2020年5月
  • 2020年3月
  • 2020年2月
  • 2019年12月
  • 2019年11月
  • 2019年10月
  • 2019年9月
  • 2019年8月
  • 2019年7月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月

最近の投稿

  • date.nager.at (祝日)
  • Javascript ES2015 で連想配列を検索
  • jQuery Chosen でセレクトボックス
  • 輸出入品目表
  • 日本地図

翻訳

Proudly powered by WordPress | テーマ: Neblue by NEThemes.