Monthly Archives: 5月 2015

Markdown #001 – 記述方法

Markdownとは

文書を記述するための軽量マークアップ言語です。
テキストレベルの文章も見出しなどを付けて、
読みやすい文章を作成することができます。

 

下記にMarkdownの記述方法を記載します。
※記号の「\」が出ている場合は除外して考えます。

 

見出し

先頭に「#」を記述


# 見出し h1
## 見出し h2
### 見出し h3
#### 見出し h4


見出し h1

見出し h2

見出し h3

見出し h4


 

見出し2

次行に「==」「–」を記述


見出し h1
\==

見出し h2
--


見出し h1

見出し h2


 

段落

次行に空白行を追加


段落

段落


 

改行

行末に半角スペースを2つ追加


改行
改行


 

水平線

「—」「***」「___」を記述


-–
***
___






 

斜体 (何故か表示されない)

「*」「_」で文字を囲む


*斜体*
_斜体_


斜体
斜体


 

強調

「**」「__」で文字を囲む


**強調**
__強調__


強調
強調


 

打消し線 (何故か表示されない)

「~~」で文字を囲む


\~~打ち消し~~


~~打ち消し~~


 

記号のエスケープ

行頭に「\」で認識する記号を除外


\### エスケープ


### エスケープ


 

引用

行頭に「>」を記述


> 引用
>> 引用


引用

引用


 

ソースコード(タブが何故か表示されない)

」かタブで記述


`i = 0


i = 0


\ i = 0
\ j = 0


i = 0
j = 0


 

リスト 箇条書き

行頭に「*」「+」「-」を記述


* リスト 1
* リスト 2
* リスト 3


  • リスト 1
  • リスト 2
  • リスト 3

+ リスト 1
+ リスト 2
+ リスト 3


  • リスト 1
  • リスト 2
  • リスト 3

- リスト 1
\ – リスト 2
\ – リスト 3


  • リスト 1
    • リスト 2
    • リスト 3

 

リスト 数字

行頭に「〇.」を記述


\1. リスト 1
\2. リスト 1
\3. リスト 1


  1. リスト 1
  2. リスト 1
  3. リスト 1

\1. リスト 1
\1. リスト 1
\1. リスト 1


  1. リスト 1
  2. リスト 1
  3. リスト 1

 

テーブル

「|」「-」で記述


| 1 | 2 | 3 |
|—-|—-|—-|
| 4 | 5 | 6 |
| 7 | 8 | 9 |
| 10 | 11 | 12 |


1 2 3
4 5 6
7 8 9
10 11 12

 

リンク

「<>」「[]()」で記述


https://day-journal.com

[dayjournal](https://day-journal.com)


https://day-journal.com

dayjournal


 

画像リンク

「![]()」「[![]()]()」で記述


![画像](https://day-journal.com/blog/wp-content/uploads/2015/01/cake.jpg)

[![画像](https://day-journal.com/blog/wp-content/uploads/2015/01/cake.jpg)](https://day-journal.com)


画像

画像


 

  • 参考文献

日本語Markdownユーザー会
KOJIKA17

 
 

 
 

SourceTree #004 – プルする方法

SourceTreeで、プルするには下記方法でおこないます。

プルとはGitでホスト先のリポジトリをローカルのリポジトリにダウンロードすることです。

 

「プル」

SourceTree_004_01

 

プル対象を選択 → 「OK」

SourceTree_004_02

これで、ホスト先のリポジトリがローカル上のリポジトリにダウンロードされてお互いが最新の状態になります。

 
 

 
 

SourceTree #003 – プッシュする方法

SourceTreeで、プッシュするには下記方法でおこないます。

プッシュとはGitでローカルのリポジトリをホスト先のリポジトリにアップロードすることです。

 

リポジトリが更新されているのを確認 → 「プッシュ」

SourceTree_003_01

 

プッシュ対象を選択 → 「OK」

SourceTree_003_02
 

これで、ローカル上のリポジトリがホスト先のリポジトリにアップロードされてお互いが最新の状態になります。

 
 

 
 

SourceTree #002 – コミットする方法

SourceTreeで、コミットするには下記方法でおこないます。

コミットとはGitでファイルの変更をリポジトリに格納することです。

 

各作業ファイルの保存を終えてSourceTreeを起動します。
「作業ツリーのファイル」に更新されたファイル群が表示されるので、
各ファイルのチェックボックスONにします。

SourceTree_002_01

 

ファイルが「Indexにステージしたファイル」に移動したのを確認 →
「コミット」

SourceTree_002_02

 

更新情報のコメントを入力 → 「コミット」

SourceTree_002_03

 

これで、ローカル上のGitがコミットされ更新情報がローカル内に格納されます。

 
 

 
 

SourceTree #001 – リポジトリを作成する方法

SourceTreeで、リポジトリを作成するには下記方法でおこないます。

リポジトリとは、Gitでファイルやディレクトリの状態を記録する場所です。

 

「新規/クローンを作成する」 → 「リポジトリをクローン」タブ →
「地球マーク」

SourceTree_001_01

 

ホストされているリポジトリの一覧が表示されるので、
「新規リポジトリを作成」 → リポジトリ名・所有者の入力 →
「リポジトリを作成」 → 作成したリポジトリを選択して「OK」

SourceTree_001_02
 

「先のパス/URL」のリポジトリのパスの表示を確認して、
「保存先のパス」を設定 → 「クローン」

SourceTree_001_03

 

これで、ホスト先とローカルに同一のリポジトリが作成されます。

<SourceTree_001_04

 
 

 
 

Soft #005 – Bracketsのエクステンション

今日は、「Brackets」のエクステンションについて紹介します。
とりあえず、すぐ使いそうなのをピックアップしました。

 

①Shizimily Multiencoding for Brackets
文字コードがUTF-8以外も対応になります。

デフォルトだとUTF-8以外は開けません。
Soft_005_01

Soft_005_02

 

②Extensions Rating
エクステンションを探す時の条件の情報が増えます。

Soft_005_03

Soft_005_04

 

③Sidebar Plus
サイドバーを隠したり開いたりすることができます。

Soft_005_05

 

④Tabs – Custom Working
ファイルをタブ表示することができます。

Soft_005_06

Soft_005_07
 

⑤Brackets File Icons
ファイル名の横にアイコンを表示することができます。

Soft_005_08

Soft_005_09

 

⑥Indent Guides
インデントを表示します。

Soft_005_10

Soft_005_12

 

⑦Show Whitespace
半角スペースを表示します。

Soft_005_11

Soft_005_13

 

⑧Brackets Outline List
ファイルの構造をアウトライン表示します。

Soft_005_14

Soft_005_15

 

⑨Overscroll
最終行より下までスクロール可能になります。

Soft_005_16

Soft_005_17

 

⑩Paste and Indent
コピーしたコードを自動でインデントします。

Soft_005_18

 

⑪Brackets Css Color Preview
色設定を行番号に表示します。

Soft_005_19

Soft_005_20

 

⑫colorHints
ファイルで指定した色をヒントで表示します。

Soft_005_21

Soft_005_22

 

⑬Emmet
Emmetが使用できるようになります。
記述後に「Tab」キーを押すと展開されます。

Soft_005_23

 

⑭W3CValidation
コードの記述が問題ないか検証してくれます。

Soft_005_24

Soft_005_25

 

⑮Rename JavaScript Identifier
変数の箇所で「Ctrl+R」押すと同一の変数を一括で変更します。

Soft_005_26

 

⑯Theseus for Brackets
Javascriptのデバッグをできます。

Soft_005_27

 

⑰Markdown Preview
Markdownファイルをライブプレビューできるようになります。

Soft_005_28

 

下記の「Brackets おすすめエクステンション集・解説(Qiita)」はかなり詳しくて勉強になりました。ほとんどここから使うものをピックアップしています。

 

 
 

 
 

Soft #004 – Brackets

今日は、「Brackets」を紹介します。

Bracketsとはオープンソースの無償で利用できるコードエディタです。
HTML/CSS/JavaScriptを記述するのに特化していてWeb開発用に作られています。(他の言語にも結構対応されています)
Brackets自体もHTML/CSS/JavaScriptで作られています。
テキストエディタとIDEの中間あたりの位置にいるのかな。
オープンソースではありますが、ソース自体はAdobeに管理されています。

まずBracketsのインストールします。
Download Bracketsからインストーラーをダウンロードします。

Brackets

Soft_004_01

インストーラーをダウンロードしたら実行します。

Soft_004_02

Soft_004_03

Soft_004_04

Soft_004_05

比較的簡単にインストールできます。

 

インストールされたBracketsを実行してみます。

Soft_004_06

 

まずは基本機能でカスタマイズしてみます。

①テーマ・フォントサイズ・フォント種類の設定

表示 → テーマ

Soft_004_07

 

②2つのファイルを並べて表示

表示 → 左右分割

Soft_004_08
 

③アクティブな行をハイライト

表示 → アクティブな行をハイライト

Soft_004_09

 

④PSDの読み込み

表示 → Extract for Bracketsを表示

Soft_004_10

 

⑤ライブプレビュー

ファイル → ライブプレビュー

Soft_004_11

 

HTML/CSS/JavaScriptを作るにはかなり使いやすそうです。
次回はエクステンションについて調べてみたいと思います。

 

  • 参考文献

Brackets
Bracketsの機能紹介、使い方解説(Qiita)

 
 

 
 

Leaflet #016 – 背景地図(GoogleMap)の表示2

Leaflet #002 – 背景地図(GoogleMap)の表示」とは別の方法を記載します。

この方法の方が描画が早い気がします。

 

Leafletで背景にGoogleMapを表示するためには下記のように記述します。

index.html


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>sample</title>

    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
    <script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
    <script src="./plugin/leaflet-plugins-master/layer/tile/Google.js"></script>
    <link href="./css/stylesheet.css" rel="stylesheet" />

</head>

<body>

    
    <div id="map"></div>

    <script src="./js/script.js"></script>

</body>

</html>


 

stylesheet.css


        html, body {
            width: 100%;
            height: 100%;

        }

        #map {
            width: 100%;
            height: 100%;
        }

 

script.js


var map = L.map('map');

var googlemap = new L.Google('ROADMAP');
map.addLayer(googlemap);

map.setView([35.681382, 139.766084], 15);

 

index.htmlを実行すると下記のようにブラウザで表示されます。

 

読み込む地図の種類を変えたい時:
L.Google~の部分の記述を変更します。

GoogleMapオルソ


var googlemap = new L.Google('SATELLITE');
map.addLayer(googlemap);

GoogleMapハイブリッド


var googlemap = new L.Google('HYBRID');
map.addLayer(googlemap);

 

初期表示位置・縮尺を変えたい時:
map.setView~の部分の記述を変更します。

日本全体表示


map.setView([35.999887, 138.75], 5);

 
 

 
 

[adsense]

 
 

Leaflet #015 – ダウンロードデータのリンクを利用

LeafletでCDNを利用しないでダウンロードデータのリンクで利用するためには下記のように記述します。

index.html


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>sample</title>

    <script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>

    <script src="./plugin/leaflet-0.7.3/leaflet.js"></script>
    <script src="./plugin/leaflet-plugins-master/layer/tile/Google.js"></script>
    <script src="./plugin/leaflet-plugins-master/layer/tile/Bing.js"></script>

    <script src="./gj/sample.geojson"></script>

    <link href="./plugin/leaflet-0.7.3/leaflet.css" rel="stylesheet" />
    <link href="./css/stylesheet.css" rel="stylesheet" />
    
</head>

<body>

    <div id="map"></div>

    <script src="./js/script.js"></script>

</body>

</html>

 

stylesheet.css


        html, body {
            height: 100%;
            padding: 0;
            margin: 0;
        }

        #map {
            z-index: 0;
            height: 100%;
        }

        .leaflet-google-layer {
            z-index: 1;
        }

        .leaflet-map-pane {
            z-index: 2;
        }

 

sample.geojson


var pointdata = {
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
                                                                                
"features": [
{ "type": "Feature", "properties": { "id": 5 }, "geometry": { "type": "Point", "coordinates": [ 139.73025667682498, 35.684728657838271 ] } },
{ "type": "Feature", "properties": { "id": 4 }, "geometry": { "type": "Point", "coordinates": [ 139.7404818862039, 35.630246376589362 ] } },
{ "type": "Feature", "properties": { "id": 3 }, "geometry": { "type": "Point", "coordinates": [ 139.77705667359774, 35.713791961149241 ] } },
{ "type": "Feature", "properties": { "id": 2 }, "geometry": { "type": "Point", "coordinates": [ 139.76722474150262, 35.68153424228494 ] } },
{ "type": "Feature", "properties": { "id": 1 }, "geometry": { "type": "Point", "coordinates": [ 139.7001709646139, 35.690318577295173 ] } }
]
};

 

script.js




var t_std = new L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
    attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>"
});

var t_pale = new L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
    attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>"
});

var t_ort = new L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', {
    attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>"
});

var o_std = new L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
});

var g_roadmap = new L.Google('ROADMAP');

var g_satellite = new L.Google('SATELLITE');

var g_hybrid = new L.Google('HYBRID');


var map = L.map('map', {
    center: [35.6831925, 139.7511307],
    zoom: 13,
    zoomControl: false,
    layers: [t_pale]
});

var geoJson_sample = L.geoJson(pointdata).addTo(map);


var Map_b = {
    "地理院地図 標準": t_std,
    "地理院地図 淡色": t_pale,
    "地理院地図 オルソ": t_ort,
    "OpenStreetMap 標準": o_std,
    "GoogleMap 標準": g_roadmap,
    "GoogleMap オルソ": g_satellite,
    "GoogleMap ハイブリッド": g_hybrid,
};

var Map_o = {
    "sample": geoJson_sample,
};


L.control.scale({ maxWidth: 250, imperial: false }).addTo(map);

L.control.layers(Map_b, Map_o, { collapsed: false }).addTo(map);

 

index.htmlを実行すると下記のようにブラウザで表示されます。
※「この地図は、国土地理院長の承認を得て、同院発行の電子地形図(タイル)を複製したものである。 (承認番号 平27情複、 第224号)」

Leaflet_015_01

 

※GeoJSONのオブジェクトはWebサーバーにアップロードしないと表示されないようです。

 
 

 
 

Leaflet #014 – ズームバーを非表示

Leafletでズームバーを非表示にするためには下記のように記述します。

index.html


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>sample</title>


    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
    <script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
    <script src="http://matchingnotes.com/javascripts/leaflet-google.js"></script>

    <script src="./gj/sample.geojson"></script>

    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
    <link href="CSS/stylesheet.css" rel="stylesheet" />
    
</head>

<body>

    <div id="map"></div>

    <script src="./js/script.js"></script>

</body>

 

stylesheet.css


        html, body {
            height: 100%;
            padding: 0;
            margin: 0;
        }

        #map {
            z-index: 0;
            height: 100%;
        }

        .leaflet-google-layer {
            z-index: 1;
        }

        .leaflet-map-pane {
            z-index: 2;
        }

 

sample.geojson


var pointdata = {
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
                                                                                
"features": [
{ "type": "Feature", "properties": { "id": 5 }, "geometry": { "type": "Point", "coordinates": [ 139.73025667682498, 35.684728657838271 ] } },
{ "type": "Feature", "properties": { "id": 4 }, "geometry": { "type": "Point", "coordinates": [ 139.7404818862039, 35.630246376589362 ] } },
{ "type": "Feature", "properties": { "id": 3 }, "geometry": { "type": "Point", "coordinates": [ 139.77705667359774, 35.713791961149241 ] } },
{ "type": "Feature", "properties": { "id": 2 }, "geometry": { "type": "Point", "coordinates": [ 139.76722474150262, 35.68153424228494 ] } },
{ "type": "Feature", "properties": { "id": 1 }, "geometry": { "type": "Point", "coordinates": [ 139.7001709646139, 35.690318577295173 ] } }
]
};

 

script.js




var t_std = new L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
    attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>"
});

var t_pale = new L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
    attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>"
});

var t_ort = new L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', {
    attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>"
});

var o_std = new L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
});

var g_roadmap = new L.Google('ROADMAP');

var g_satellite = new L.Google('SATELLITE');

var g_hybrid = new L.Google('HYBRID');


var map = L.map('map', {
    center: [35.6831925, 139.7511307],
    zoom: 13,
    zoomControl: false,
    layers: [t_pale]
});

var geoJson_sample = L.geoJson(pointdata).addTo(map);


var Map_b = {
    "地理院地図 標準": t_std,
    "地理院地図 淡色": t_pale,
    "地理院地図 オルソ": t_ort,
    "OpenStreetMap 標準": o_std,
    "GoogleMap 標準": g_roadmap,
    "GoogleMap オルソ": g_satellite,
    "GoogleMap ハイブリッド": g_hybrid,
};

var Map_o = {
    "sample": geoJson_sample,
};


L.control.scale({ maxWidth: 250, imperial: false }).addTo(map);

L.control.layers(Map_b, Map_o, { collapsed: false }).addTo(map);

 

index.htmlを実行すると下記のようにブラウザで表示されます。
※「この地図は、国土地理院長の承認を得て、同院発行の電子地形図(タイル)を複製したものである。 (承認番号 平27情複、 第224号)」

Leaflet_015_01

 

ズームバーを非表示にしたい場合:
var map = L.map~の部分の記述を変更します。


var map = L.map('map', {
    center: [35.6831925, 139.7511307],
    zoom: 13,
    zoomControl: false,
    layers: [t_pale]
});

 
zoomControl: false = ズームバー非表示
zoomControl: true = ズームバー表示

 

※GeoJSONのオブジェクトはWebサーバーにアップロードしないと表示されないようです。

 
 

 
 

 
 

Leaflet #013 – マーカーをレイヤに表示

Leafletでマーカーをレイヤに表示するためには下記のように記述します。

index.html


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>sample</title>


    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
    <script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
    <script src="http://matchingnotes.com/javascripts/leaflet-google.js"></script>

    <script src="./gj/sample.geojson"></script>

    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
    <link href="CSS/stylesheet.css" rel="stylesheet" />
    
</head>

<body>

    <div id="map"></div>

    <script src="./js/script.js"></script>

</body>

 

stylesheet.css


        html, body {
            height: 100%;
            padding: 0;
            margin: 0;
        }

        #map {
            z-index: 0;
            height: 100%;
        }

        .leaflet-google-layer {
            z-index: 1;
        }

        .leaflet-map-pane {
            z-index: 2;
        }

 

sample.geojson


var pointdata = {
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
                                                                                
"features": [
{ "type": "Feature", "properties": { "id": 5 }, "geometry": { "type": "Point", "coordinates": [ 139.73025667682498, 35.684728657838271 ] } },
{ "type": "Feature", "properties": { "id": 4 }, "geometry": { "type": "Point", "coordinates": [ 139.7404818862039, 35.630246376589362 ] } },
{ "type": "Feature", "properties": { "id": 3 }, "geometry": { "type": "Point", "coordinates": [ 139.77705667359774, 35.713791961149241 ] } },
{ "type": "Feature", "properties": { "id": 2 }, "geometry": { "type": "Point", "coordinates": [ 139.76722474150262, 35.68153424228494 ] } },
{ "type": "Feature", "properties": { "id": 1 }, "geometry": { "type": "Point", "coordinates": [ 139.7001709646139, 35.690318577295173 ] } }
]
};

 

script.js




var t_std = new L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
    attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>"
});

var t_pale = new L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
    attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>"
});

var t_ort = new L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', {
    attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>"
});

var o_std = new L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
});

var g_roadmap = new L.Google('ROADMAP');

var g_satellite = new L.Google('SATELLITE');

var g_hybrid = new L.Google('HYBRID');


var map = L.map('map', {
    center: [35.6831925, 139.7511307],
    zoom: 13,
    layers: [t_pale]
});

var geoJson_sample = L.geoJson(pointdata).addTo(map);


var Map_b = {
    "地理院地図 標準": t_std,
    "地理院地図 淡色": t_pale,
    "地理院地図 オルソ": t_ort,
    "OpenStreetMap 標準": o_std,
    "GoogleMap 標準": g_roadmap,
    "GoogleMap オルソ": g_satellite,
    "GoogleMap ハイブリッド": g_hybrid,
};

var Map_o = {
    "sample": geoJson_sample,
};


L.control.scale({ maxWidth: 250, imperial: false }).addTo(map);

L.control.layers(Map_b, Map_o, { collapsed: false }).addTo(map);

 

index.htmlを実行すると下記のようにブラウザで表示されます。
※「この地図は、国土地理院長の承認を得て、同院発行の電子地形図(タイル)を複製したものである。 (承認番号 平27情複、 第224号)」

Leaflet_013_01

 

レイヤ名を変更したい場合:
var Map_o = ~の部分の記述を変更します。


var Map_o = {
    "ポイントデータ": geoJson_sample,
};

 

※GeoJSONのオブジェクトはWebサーバーにアップロードしないと表示されないようです。

 
 

 
 

 
 

Leaflet #012 – 外部ファイルのGeoJSONでマーカー表示2

Leaflet #008 – 外部ファイルのGeoJSONでマーカー表示」とは違う方法の別ファイルにGeoJSONを保存して外部から読み込む方法を記載します。

GeoJSONのデータを用意するための方法は「Leaflet #007 – GeoJSONでマーカー表示」を参照。

この方法も、GeoJSONのオブジェクトはWebサーバーにアップロードしないと表示されないようです。

 

Leafletで外部ファイルのGeoJSONでマーカー表示するためには下記のように記述します。

index.html


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>sample</title>


    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
    <script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
    <script src="http://matchingnotes.com/javascripts/leaflet-google.js"></script>

    <script src="./gj/sample.geojson"></script>

    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
    <link href="CSS/stylesheet.css" rel="stylesheet" />
    
</head>

<body>

    <div id="map"></div>

    <script src="./js/script.js"></script>

</body>

</html>

 

stylesheet.css


         html, body {
            height: 100%;
            padding: 0;
            margin: 0;
        }

        #map {
            z-index: 0;
            height: 100%;
        }

        .leaflet-google-layer {
            z-index: 1;
        }

        .leaflet-map-pane {
            z-index: 2;
        }

 

sample.geojson


var pointdata = {
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
                                                                                
"features": [
{ "type": "Feature", "properties": { "id": 5 }, "geometry": { "type": "Point", "coordinates": [ 139.73025667682498, 35.684728657838271 ] } },
{ "type": "Feature", "properties": { "id": 4 }, "geometry": { "type": "Point", "coordinates": [ 139.7404818862039, 35.630246376589362 ] } },
{ "type": "Feature", "properties": { "id": 3 }, "geometry": { "type": "Point", "coordinates": [ 139.77705667359774, 35.713791961149241 ] } },
{ "type": "Feature", "properties": { "id": 2 }, "geometry": { "type": "Point", "coordinates": [ 139.76722474150262, 35.68153424228494 ] } },
{ "type": "Feature", "properties": { "id": 1 }, "geometry": { "type": "Point", "coordinates": [ 139.7001709646139, 35.690318577295173 ] } }
]
};

 

script.js



var t_std = new L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
    attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>"
});

var t_pale = new L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
    attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>"
});

var t_ort = new L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', {
    attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>"
});

var o_std = new L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
});

var g_roadmap = new L.Google('ROADMAP');

var g_satellite = new L.Google('SATELLITE');

var g_hybrid = new L.Google('HYBRID');


var map = L.map('map', {
    center: [35.6831925, 139.7511307],
    zoom: 13,
    layers: [t_pale]
});

var geoJson_sample = L.geoJson(pointdata).addTo(map);


var Map_b = {
    "地理院地図 標準": t_std,
    "地理院地図 淡色": t_pale,
    "地理院地図 オルソ": t_ort,
    "OpenStreetMap 標準": o_std,
    "GoogleMap 標準": g_roadmap,
    "GoogleMap オルソ": g_satellite,
    "GoogleMap ハイブリッド": g_hybrid,
};

L.control.scale({ maxWidth: 250, imperial: false }).addTo(map);

L.control.layers(Map_b, null, { collapsed: false }).addTo(map);

 

index.htmlを実行すると下記のようにブラウザで表示されます。
※「この地図は、国土地理院長の承認を得て、同院発行の電子地形図(タイル)を複製したものである。 (承認番号 平27情複、 第224号)」

Leaflet_012_01

 

表示させるファイルを変更したい場合:
./gj/sample.geojson~のリンク先と、
var geoJson_sample~の部分の記述を変更します。


<script src="./gj/data.geojson"></script>


var geoJson_sample = L.geoJson(newdata).addTo(map);

 

この方法で読み込む場合はGeoJSONを変数に格納する必要があるため、頭に「var 変数名 = 」最後に「;」を記述します。

 
 

 

Soft #003 – Visual Studio CommunityでWebの発行

Visual Studio CommunityでWebデータを外部のWebサーバーにアップロードしたい場合には下記方法でおこないます。

 

①メニュー → ビルド → 〇〇発行を実行します。

 

②プロファイルでカスタムを押してプロファイルを新規作成します。
Soft_003_01

 

③接続でFTPの各項目を入力します。
Soft_003_02

 

④設定で「Release」を選択します。
Soft_003_03

 

⑤プレビューで発行先に問題なければ「発行」を実行します。
Soft_003_04

 

⑥正常に接続されるとデータがWebサーバーにアップロード後、宛先URLが表示されます。

 
 

 
 
 

 
 

CSS3 #001 – 背景に上塗り表示

CSS3で背景に上塗り表示したい場合は下記のように記述します。

index.html


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>sample</title>

    <script src="./js/leaflet-0.7.3/leaflet.js"></script>
    <link href="./js/leaflet-0.7.3/leaflet.css" rel="stylesheet" />
    <link href="./css/stylesheet.css" rel="stylesheet" />

</head>

<body>

    <div id="nuri"></div>

    <div id="map"></div>

    <script src="js/script.js"></script>

</body>

</html>

 

stylesheet.css


        html, body {
            height: 100%;
            padding: 0;
            margin: 0;
        }

        #map {
            z-index: 0;
            height: 100%;
        }

        #nuri {
            z-index: 1;
            bottom: 0;
            width: 100%;
            height: 100%;
            position: absolute;
            background-color: rgba(128, 128, 128,0.7);
        }

 

script.js


var map = L.map('map');

L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
    attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>"
}).addTo(map);

map.setView([35.681382, 139.766084], 15);

 

index.htmlを実行すると下記のようにブラウザで表示されます。
※「この地図は、国土地理院長の承認を得て、同院発行の電子地形図(タイル)を複製したものである。 (承認番号 平27情複、 第224号)」

CSS3_001_01

 

表示順序を指定したい時:
数字が大きいほど一番上に表示されます。

z-index: 1;

 

色と透過率を変更したい場合:

background-color: rgba(128, 128, 128,0.7);

 
 

 
 

 
 

Leaflet #011 – 背景地図(BingMap)の表示

Leafletで背景にBingMapを表示するためには準備作業が2つ必要です。

①BingMapを表示するためにkeyを作成します。
まず、「bing Maps Dev Center」にアクセスします。

Microsoft accountでログインし、Maps Dev Centerに登録をします。

登録が完了したらMY account → Create or view keys

Leaflet_011_03

keyの登録情報を記入して実行します。
※Key typeは「Basic」にします。

Leaflet_011_02

実行されるとkeyが作成されるのでコード内の「取得したKeyを入力」に貼り付けます。

 

②Leafletのプラグインの1つである「leaflet-plugins」を使用します。
プラグインをダウンロードしたらその中にある「Bing.js」を読み込みます。

    <script src="./plugin/leaflet-plugins-master/layer/tile/Bing.js"></script>

 
 

Leafletで背景にBingMapを表示するためには下記のように記述します。

index.html


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>sample</title>

    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
    <script src="./plugin/leaflet-plugins-master/layer/tile/Bing.js"></script>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
    <link href="stylesheet.css" rel="stylesheet" />

</head>

<body>

    
    <div id="map"></div>

    <script src="script.js"></script>

</body>

</html>


 

stylesheet.css


        html, body {
            width: 100%;
            height: 100%;

        }

        #map {
            width: 100%;
            height: 100%;
        }

 

script.js


var map = L.map('map');

var BingMap = new L.BingLayer("取得したKeyを入力", { type: 'Road' });
map.addLayer(BingMap);

map.setView([35.681382, 139.766084], 15);

 

index.htmlを実行すると下記のようにブラウザで表示されます。

 

読み込む地図の種類を変えたい時:
L.BingLayer~の部分の記述を変更します。

BingMapオルソ


var BingMap = new L.BingLayer("取得したKeyを入力", { type: 'Aerial' });
map.addLayer(BingMap);

 

初期表示位置・縮尺を変えたい時:
map.setView~の部分の記述を変更します。

日本全体表示


map.setView([35.999887, 138.75], 5);

 
 

 
 

[adsense]