Leaflet.jsをちょこっと試してみた。MenuOpenなGISのことGISに関する実験的研究Leaflet.jsをちょこっと試してみた。on07/31/2013Leaflet.jsをちょこっと試してみた。OpenLayersネタばかりではなんなので、Leafletについてちょっと試してみました。なんと言っても軽量です。容量が小さいのにはびっくりです。その代わりOpenLayersのように何でもてんこ盛りでなく、必要最低限の機能を持ち合わせています。HPを参照してください。tutorialもあるので、実際に使うには問題ないと思います。今回は、超~~簡単なLeafletのexampleを3つほど作成してみました。OpenStreetmapを表示してみる。OpenStreetMapをLeafletを使って表示してみましょう。codeは、以下のcodeを入力します。保存先は、c:¥ms4w¥apache¥htdocs¥leaflet¥にしておきます。ファイル名は、leaflet_example_01.htmlで保存します。#999;’></div></body></html>[/html]Leafletのobjectを使う場合、必ずLとなります。ここでOpenLayersと違うのは、tileの呼び出しは自前で作成する必要があります。contributors'});の部分になります。11);のようにOpenLayersとは逆になります。後は、LeafletのAPIなどをみれば難しいcodeではありません。保存後、FireFoxを立ち上げて、http://localhost/leaflet/leaflet_example_01.htmlと入力すると、ようにOpenStreetMapが表示されます。基盤地図情報25000を表示してみる。次に、農研機構が提供している基盤地図情報25000をLeafletを使って表示してみましょう。ここのサンプルをcopyして、若干手をくわえました。codeは、以下のcodeを入力します。保存先は、c:¥ms4w¥apache¥htdocs¥leaflet¥にしておきます。ファイル名は、leaflet_example_02.htmlで保存します。#999;’></div></body></html>[/html]Leafletのobjectを使う場合、必ずLとなります。ここでOpenLayersと違うのは、tileの呼び出しは自前で作成する必要があります。18}).addTo(map);の部分になります。ここでは、基盤地図情報と地名のtileを使います。保存後、FireFoxを立ち上げて、http://localhost/leaflet/leaflet_example_02.htmlと入力すると、ように基盤地図情報が表示されます。電子国土を表示してみる次に、国土地理院が提供している電子国土をLeafletを使って表示してみましょう。電子国土タイルにタイル仕様が書かれていますので、一度目を通してください。codeは、Leafletで電子国土タイルを使う場合のシンプルサンプルを参考にしました。codeは、以下のcodeを入力します。保存先は、c:¥ms4w¥apache¥htdocs¥leaflet¥にしておきます。ファイル名は、leaflet_example_03.htmlで保存します。500px;’></div></body></html>[/html]Leafletのobjectを使う場合、必ずLとなります。ここでOpenLayersと違うのは、tileの呼び出しは自前で作成する必要があります。layer.getTileUrlで呼び出すタイルのURLを作成しています。保存後、FireFoxを立ち上げて、http://localhost/leaflet/leaflet_example_03.htmlと入力すると、ように基盤地図情報が表示されます。exampleを参考に載せておきます。controlを増やしたり、いろいろとOptionsを付け加えたりしてください。今回のまとめLeaflet.jsについて基本中の基本について試してみました。exampleを使って見て、いろいろとテストしてみてください。OpenLayersに比べて軽量かどうかは、今回のexampleでは判断できせんが、GeoJSONなども読み込むことができるので、また試してみましょう。本blogは、htmlやCSSやJavaScriptの基本的なことはある程度理解している前提で話を進めています。誤字、脱字、spell間違いや勘違いも多々出てくると考えられます。それは違うじゃん!!とかいろんな意見をいただければと思います。OpenLayersで複数のMapを使ってみる。34]MapBox.jsをちょこっと試してみた。水文水理解析ソフトウェアの販売セール後1日です。水文水理解析ソフトウェアの販売PythonでMySQLを使ってみる。4]PythonでGUIを試してみる。第1弾ExcelでPythonを使ってみる。ExcelでPythonを動かす。3]PythonでExcelを読み書きする。PythonでGeocodingする。2]Pythonで水文水理解析をやってみる。AB-WebLog.com.。