Previous Page Next Page
オープンソースによる地図表示（Leaflet編）５／９
2019/4/26 by T. Fujita
４、マーカーの表示
４－１、基本マーカーの表示
まずは、基本地図である『Leaflet_Tutrial_101.html』を元に地図上にマーカーを表示させてみます。
以下に 表示例とそのソースファイルの内容を示します。
ここで表示するマーカーの位置はJR東京駅を指定していますが、表示するマーカーについては特に指定していませんのでデフォルトのマーカーが表示されます。
また、マーカーをクリックするとポップアップが表示され、JR東京駅へのリンクが可能なようにしました。
単独で基本マーカーを表示する場合は、
『
Leaflet_Tutrial_401.html 』をクリックして下さい。
基本マーカーの表示例
『 Leaflet_Tutrial_401.html 』のソースファイル内容
001 <!DOCTYPE html>
002 <html>
003 <head>
004 <title> Leaflet_Tutrial_401.html 2019/4/26 by T. Fujita </title>
005 <meta charset="utf-8" />
006 <link rel = "stylesheet" href = "https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
007 <script src = "https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
008 <script>
009
010 function init() {
011 var Layer_401 = new Array();
012 var map_401 = L.map('map_401').setView([35.65809922, 139.74135747], 8);
013 mapLink = '<a href="https://openstreetmap.org">OpenStreetMap</a>';
014 L.tileLayer(
015 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
016 attribution: 'Map data © ' + mapLink,
017 maxZoom: 18
018 }).addTo(map_401);
019 Leaflet_Marker_401();
020
021 function Leaflet_Marker_401() // マーカー設置
022 {
023 var Markers_shape = new Array();
024 var Markers_shape_pos = new Array();
025 var Markers_shape_nam = new Array();
026 var Markers_shape_lnk = new Array();
027 Markers_shape_pos[ 0 ] = [35.68109, 139.76717];
028 Markers_shape_nam[ 0 ] = "東京駅";
029 Markers_shape_lnk[ 0 ] = "<a href= 'https://www.jreast.co.jp/estation/stations/1039.html' target='_blank'>東京駅情報にリンク</a>";
030 Markers_shape[ 0 ] = L.marker([ Markers_shape_pos[ 0 ][ 0 ], Markers_shape_pos[ 0 ][ 1 ] ]);
031 Markers_shape[ 0 ].bindPopup(Markers_shape_nam[ 0 ] + "<br>" + Markers_shape_lnk[ 0 ]).openPopup();
032 Layer_401[ 0 ] = Markers_shape[ 0 ];
033 Layer_401[ 0 ].addTo(map_401);
034 }
035 }
036
037 </script>
038 </head>
039 <body onload="init()">
040 <div id="map_401" style="width: 100%; height: 400px; border: solid 1px"></div>
041 </body>
042 </html>
ここで、赤字の部分がマーカー表示用の記述です。 １１行目でマーカー用のレイヤーを新たに設定し、２１行目から３４行目でマーカーの設置位置やタイトル、リンク先等を指定しています。
なお、１９行目で関数『Leaflet_Marker_401()』を呼び出してマーカーを表示させています。
４－２、複数マーカーの表示
マーカーが一種類のみでは面白くありませんので、数種類のマーカーを追加してみます。
マーカーは、サンプルとしてPNG形式のアイコンを使用しましたが、JPEG形式でもGIF形式あるいはSVG形式でも同様です。
以下に 複数マーカーの表示例とそのソースファイルの内容を示します。
単独で複数マーカーを表示する場合は、『
Leaflet_Tutrial_402.html 』をクリックして下さい。
なお、ここで使用しているアイコン素材は、
FLAT ICON DESIGN および
ICOON MONO
から取得しており、これらアイコン素材データの著作権は TopeconHeroes が保持しています。
複数マーカーの表示例
次の『Leaflet_Tutrial_402.html』において、赤字の部分がマーカーを追加した箇所です。 ２７行目でアイコンのURLを収容するための配列を準備し、それぞれアイコンについてサイズや表示位置（アンカー位置）、
ポップアップが表示される位置を指定しています。 なお、東京駅のマーカーについても変更しています。
『 Leaflet_Tutrial_402.html 』のソースファイル内容
001 <!DOCTYPE html>
002 <html>
003 <head>
004 <title> Leaflet_Tutrial_402.html 2019/4/26 by T. Fujita </title>
005 <meta charset="utf-8" />
006 <link rel = "stylesheet" href = "https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
007 <script src = "https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
008 <script>
009
010 function init() {
011 var Layer_402 = new Array();
012 var map_402 = L.map('map_402').setView([35.0, 137.0], 6);
013 mapLink = '<a href="https://openstreetmap.org">OpenStreetMap</a>';
014 L.tileLayer(
015 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
016 attribution: 'Map data © ' + mapLink,
017 maxZoom: 18,
018 }).addTo(map_402);
019 Leaflet_Marker_402();
020
021 function Leaflet_Marker_402() // マーカー設置
022 {
023 var Markers_shape = new Array();
024 var Markers_shape_pos = new Array();
025 var Markers_shape_nam = new Array();
026 var Markers_shape_lnk = new Array();
027 var Markers_shape_icn = new Array();
028 Markers_shape_pos[ 0 ] = [35.68109, 139.76717];
029 Markers_shape_nam[ 0 ] = "東京駅";
030 Markers_shape_lnk[ 0 ] = "<a href= 'https://www.jreast.co.jp/estation/stations/1039.html' target='_blank'>東京駅情報にリンク</a>";
031 Markers_shape_icn[ 0 ] = L.icon({
032 iconUrl: "../ICONS/Flat_Icons/s64_f_business_76_0nbg.png",
033 iconSize: [32, 32],
034 iconAnchor: [16, 32],
035 popupAnchor: [0, -16]
036 });
037
038 Markers_shape_pos[ 1 ] = [34.98540, 135.75829];
039 Markers_shape_nam[ 1 ] = "京都駅";
040 Markers_shape_lnk[ 1 ] = "<a href= 'https://www.jr-odekake.net/eki/premises.php?id=0610116' target='_blank'>京都駅情報にリンク</a>";
041 Markers_shape_icn[ 1 ] = L.icon({
042 iconUrl: "../ICONS/Flat_Icons/s64_f_traffic_45_0nbg.png",
043 iconSize: [32, 32],
044 iconAnchor: [0, 32],
045 popupAnchor: [16, -16]
046 });
047
048 Markers_shape_pos[ 2 ] = [33.59010, 130.42065];
049 Markers_shape_nam[ 2 ] = "博多駅";
050 Markers_shape_lnk[ 2 ] = "<a href= 'https://www.jr-odekake.net/eki/premises.php?id=0910127' target='_blank'>博多駅情報にリンク</a>";
051 Markers_shape_icn[ 2 ] = L.icon({
052 iconUrl: "../ICONS/BW_Icon/BW_Icons_64/icon_000220_64.png",
053 iconSize: [32, 32],
054 iconAnchor: [0, 32],
055 popupAnchor: [16, -16]
056 });
057 for ( i = 0; i < Markers_shape_pos.length; i++ )
058 {
059 if( Markers_shape_pos[ i ] != null ) {
060 Markers_shape[ i ] = L.marker([ Markers_shape_pos[ i ][ 0 ], Markers_shape_pos[ i ][ 1 ] ],
061 {icon: Markers_shape_icn[ i ]});
062 Markers_shape[ i ].bindPopup(Markers_shape_nam[ i ] + "<br>" + Markers_shape_lnk[ i ]).openPopup();
063 Layer_402[ i ] = Markers_shape[ i ];
064 Layer_402[ i ].addTo(map_402);
065 }
066 }
067 }
068 }
069
070 </script>
071 </head>
072 <body onload="init()">
073 <div id="map_402" style="width: 100%; height: 400px; border: solid 1px"></div>
074 ここで使用しているアイコン素材は、<A HREF = "http://flat-icon-design.com/" target="_blank"> FLAT ICON DESIGN </A>および
075 <A HREF = "http://icooon-mono.com/" target="_blank"> ICOON MONO </A>から取得しており、<BR>
076 これらアイコン素材データの著作権は TopeconHeroes が保持しています。
077 </body>
078 </html>
４－３、移動可能マーカーの表示
さらに、移動可能なマーカー（人型のアイコン）を追加してみましょう。
次の『 Leaflet_Tutrial_403.html 』のソースファイル内容で赤字の部分が移動可能マーカーを追加した箇所です。
以下に 移動可能マーカーの表示例とそのソースファイルの内容を示します。 単独で移動可能マーカーと地図を表示する場合は、
『
Leaflet_Tutrial_403.html 』をクリックして下さい。
移動可能マーカーの表示例
『 Leaflet_Tutrial_403.html 』のソースファイル内容
001 <!DOCTYPE html>
002 <html>
003 <head>
004 <title> Leaflet_Tutrial_403.html 2019/4/26 by T. Fujita </title>
005 <meta charset="utf-8" />
006 <link rel = "stylesheet" href = "https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
007 <script src = "https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
008 <script>
009
010 function init() {
011 var Layer_403 = new Array();
012 var map_403 = L.map('map_403').setView([35.0, 137.0], 6);
013 mapLink = '<a href="https://openstreetmap.org">OpenStreetMap</a>';
014 L.tileLayer(
015 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
016 attribution: 'Map data © ' + mapLink,
017 maxZoom: 18,
018 }).addTo(map_403);
019 Leaflet_Marker_403();
020
021 function Leaflet_Marker_403() // マーカー設置
022 {
023 var Markers_shape = new Array();
024 var Markers_shape_pos = new Array();
025 var Markers_shape_nam = new Array();
026 var Markers_shape_lnk = new Array();
027 var Markers_shape_icn = new Array();
028 var Drag_Markers_shape = new Array();
029 var Drag_Markers_shape_pos = new Array();
030 var Drag_Markers_shape_nam = new Array();
032 var Drag_Markers_shape_lnk = new Array();
033 var Drag_Markers_shape_icn = new Array();
034
035 Markers_shape_pos[ 0 ] = [35.68109, 139.76717];
036 Markers_shape_nam[ 0 ] = "東京駅";
037 Markers_shape_lnk[ 0 ] = "<a href= 'https://www.jreast.co.jp/estation/stations/1039.html' target='_blank'>東京駅情報にリンク</a>";
038 Markers_shape_icn[ 0 ] = L.icon({
039 iconUrl: "../ICONS/Flat_Icons/s64_f_business_76_0nbg.png",
040 iconSize: [32, 32],
041 iconAnchor: [16, 32],
042 popupAnchor: [0, -16]
043 });
044
045 Markers_shape_pos[ 1 ] = [34.98540, 135.75829];
046 Markers_shape_nam[ 1 ] = "京都駅";
047 Markers_shape_lnk[ 1 ] = "<a href= 'https://www.jr-odekake.net/eki/premises.php?id=0610116' target='_blank'>京都駅情報にリンク</a>";
048 Markers_shape_icn[ 1 ] = L.icon({
049 iconUrl: "../ICONS/Flat_Icons/s64_f_traffic_45_0nbg.png",
050 iconSize: [32, 32],
051 iconAnchor: [0, 32],
052 popupAnchor: [16, -16]
053 });
054
055 Markers_shape_pos[ 2 ] = [33.59010, 130.42065];
056 Markers_shape_nam[ 2 ] = "博多駅";
057 Markers_shape_lnk[ 2 ] = "<a href= 'https://www.jr-odekake.net/eki/premises.php?id=0910127' target='_blank'>博多駅情報にリンク</a>";
058 Markers_shape_icn[ 2 ] = L.icon({
059 iconUrl: "../ICONS/BW_Icon/BW_Icons_64/icon_000220_64.png",
060 iconSize: [32, 32],
061 iconAnchor: [0, 32],
062 popupAnchor: [16, -16]
063 });
064
065 Drag_Markers_shape_pos[ 0 ] = [37, 134];
066 Drag_Markers_shape_nam[ 0 ] = "移動可能マーカー#1";
067 Drag_Markers_shape_lnk[ 0 ] = " ";
068 Drag_Markers_shape_icn[ 0 ] = L.icon({
069 iconUrl: "../ICONS/Flat_Icons/s64_f_object_116_1nbg.png",
070 iconSize: [48, 48],
071 iconAnchor: [24, 24],
072 popupAnchor: [0, 0]
073 });
074
075 Drag_Markers_shape_pos[ 1 ] = [35, 142];
076 Drag_Markers_shape_nam[ 1 ] = "移動可能マーカー#2";
077 Drag_Markers_shape_lnk[ 1 ] = " ";
078 Drag_Markers_shape_icn[ 1 ] = L.icon({
079 iconUrl: "../ICONS/Flat_Icons/s64_f_object_115_0nbg.png",
080 iconSize: [48, 48],
081 iconAnchor: [24, 24],
082 popupAnchor: [0, 0]
083 });
084
085 Drag_Markers_shape_pos[ 2 ] = [33, 137];
086 Drag_Markers_shape_nam[ 2 ] = "移動可能マーカー#3";
087 Drag_Markers_shape_lnk[ 2 ] = "<A HREF = 'http://icooon-mono.com/' target='_blank'> ICOON MONO にリンク</A>";
088 Drag_Markers_shape_icn[ 2 ] = L.icon({
089 iconUrl: "../ICONS/BW_Icon/BW_Icons_64/icon_128020_64.png",
090 iconSize: [48, 48],
091 iconAnchor: [24, 24],
092 popupAnchor: [0, 0]
093 });
094
095 for ( i = 0; i < Markers_shape_pos.length; i++ )
096 {
097 if( Markers_shape_pos[ i ] != null ) {
098 Markers_shape[ i ] = L.marker([ Markers_shape_pos[ i ][ 0 ], Markers_shape_pos[ i ][ 1 ] ],
099 {icon: Markers_shape_icn[ i ]});
100 Markers_shape[ i ].bindPopup(Markers_shape_nam[ i ] + "<br>" + Markers_shape_lnk[ i ]).openPopup();
101 Layer_403[ i ] = Markers_shape[ i ];
102 Layer_403[ i ].addTo(map_403);
103 }
104 }
105 for ( i = 0; i < Drag_Markers_shape_pos.length; i++ )
106 {
107 if( Drag_Markers_shape_pos[ i ] != null ) {
108 Drag_Markers_shape[ i ] = L.marker([ Drag_Markers_shape_pos[ i ][ 0 ], Drag_Markers_shape_pos[ i ][ 1 ] ],
109 {icon: Drag_Markers_shape_icn[ i ], draggable: true});
110 Drag_Markers_shape[ i ].bindPopup(Drag_Markers_shape_nam[ i ] + "<BR>" + Drag_Markers_shape_lnk[ i ]);
111 Layer_403[ i ] = Drag_Markers_shape[ i ];
112 Layer_403[ i ].addTo(map_403);
113 }
114 }
115 }
116 }
117
118 </script>
119 <body onload="init()">
120 <div id="map_403" style="width: 100%; height: 400px; border: solid 1px"></div>
121 ここで使用しているアイコン素材は、<A HREF = "http://flat-icon-design.com/" target="_blank"> FLAT ICON DESIGN </A>および
122 <A HREF = "http://icooon-mono.com/" target="_blank"> ICOON MONO </A>から取得しており、<BR>
123 これらアイコン素材データの著作権は TopeconHeroes が保持しています。
124 </body>
125 </html>
ここで、マーカーを移動可能にしているのは、１０９行目の『draggable: true』という記述です。 これを『draggable: false』と変更することでマーカーは固定になります。
Previous Page Next Page