JavaScript WordPressの記事内でJavaScriptを実行する方法
私のOpenLayersの記事は、その記事の中でJavaScriptを実行して、実際の動作が確認できるようになっています。・OpenLayersで図形を描画する方法今回はその方法についてお伝えいたします。手順①記事投稿画面の̟⊕メニューから...
JavaScript
JavaScript 
JavaScript 線のスタイルを設定する方法～OpenLayersで図形を描画する⑭
今までの記事においてOpenLayersで図形を描画する方法についてお伝えしました。しかし、描画された図形の線の色は「赤」、線幅は「2px」で固定されていました。描画前および描画後に、線のスタイル変更ができるように修正を行ってまいります。動...
JavaScript OpenLayersで地図コントロール上に独自のボタンを配置する
前回の記事でWebページ上に地図を表示させる方法をお伝えしました。今回は表示した地図上にオリジナルのボタンを配置します。実際にやってみた前回の記事内のソースコードにボタンについての追記を行いました。 <meta http-equiv="X-...
JavaScript OpenLayersで描画した図形をJSONで保存する方法～OpenLayersで図形を描画する⑫
今までの記事で、図形を描画する方法についてお伝えしてきました。地図上に線を引いたり、円を描いたり、マーカーを配置することにより、ある地点を強調することが可能になります。業務系のアプリケーションにおいて、一度描画した図形はファイルやデータベー...
JavaScript 図形の色を設定する方法～OpenLayersで図形を描画する⑮
今までの記事において、OpenLayersで図形を描画する方法についてお伝えしました。しかし、描画された図形の色は「赤」、透過性は「0.3」で固定されていました。※本投稿では図形の色のことをfillColor、透過性のことをOpacityと...
JavaScript OpenLayersでミニマップを表示する方法
OpenLayersで地図を表示する際、画面の隅にミニマップ（俯瞰図、OverviewMap）を表示することができます。ミニマップを表示することができれば、「現在表示されている地点が、全体のどの部分かを把握することができる」というメリットが...
JavaScript 矢印で強調する方法～OpenLayersで図形を描画する④
地図を表示する際、ある地点を強調したくなるときがあります。マーカーを使用することで目印とすることができますが、矢印をしようするとさらに強調することができます。実際にやってみた実行結果はこんな感じになります。鳥取砂丘に配置されたマーカーを矢印...
JavaScript Webページ上にに地図を表示する（OpenLayers）【無料】
ブログ内でお店の宣伝をするとき、地図をWebページ上に載せたくなるときがあります。今回の方法を用いることで、手軽にWebページに地図を表示させることができます。実際にやってみた以下のHTMLをWebページに記載するだけです。地図データはオー...
JavaScript 図形を削除する方法～OpenLayersで図形を描画する⑬
今までの記事で、図形を描画する方法についてお伝えしてきました。 今回は誤って描画してしまった図形を削除する方法をお伝えします。動作確認まずは結果をご覧ください。実際に触れます ↓ ↓ ↓ ↓ ↓ // 図形を採番するための変数 var fe...
JavaScript 図形を変形する方法～OpenLayersで図形を描画する⑨
一度描画した線や円などの図形を変形させる場合はmodifyを使用します。modifyを使用すると、形を確定させた後でも図形描画のやりなおしができます。動作確認まずは結果をご確認ください。描画した線や多角形を変形できることを確かめられます。 ...