投稿から2週間、とりあえず締切とさせていただきます。
実際に可能となったら日記か山ノートでつぶやきたいと思います。

tancro

V4以降では，国土地理院は地図のタイル画像を標準的な形式で提供されて，
描画や画面周りは，OpenLayersなどの出来合いのライブラリを使って行うようになっていると思います．

例えば，国土地理院のOpenLayers2による構築サンプル
http://portal.cyberjapan.jp/help/development/sample.html#sample-ol2131

ですと，次のようなJavaScriptを追加すれば，線を表示できると思います．
-------------------------
var points = [];
// 線のポイントの緯度経度 (3ポイント以上でも可)
points.push(new OpenLayers.Geometry.Point(135.50766,34.662234).transform(projection4326,projection3857));
points.push(new OpenLayers.Geometry.Point(139.820535,35.658671).transform(projection4326,projection3857));

var lineString = new OpenLayers.Geometry.LineString(points);

// 線の書式
var style = {strokeColor:"#ff0000",strokeOpacity:1,strokeWidth:5};

var lineFeature = new OpenLayers.Feature.Vector(lineString, null, style);

// レイヤーを作成
var lines = new OpenLayers.Layer.Vector("Lines");
lines.addFeatures([lineFeature]);

// マップにレイヤーを追加
map.addLayer(lines);
-------------------------
OpenLayersの機能になりますので，
「OpenLayers 直線」あたりで検索されると，他にも情報が見つかると思います．

OpenLayersは汎用的で色々なことができるのですが，そこがかえって手を付けにくいというところはあるかも知れません．．．

たぶんご満足いただける回答にはならないと思いますが、悪しからずご了承下さい。

地理院サイト、ウォッチ図等を山行計画に過去に利用しておりました。新VERに移行してから使い勝手が悪くなったので現在はカシミールで地理院地形図+5m・10mメッシュ高度基準データを開き、場合によっては航空写真をレイヤー重ねして山に持って行く地形図データを作成しています。

描画するものは予定トラック、地形図にない新道やポイント、幕営予定箇所、危険箇所等です。そのままオーバーレイするものは参考にしたい他の方のGPSトラック（ヤマレコ、WEBでDLしたGPSファイル）です。

カシミールで開きドロー処理したものはマップカッターで切り出し、ストレージ容量や処理能力に見合ったサイズの形式にタイル化してGPSに転送して現地で使っています。

難点はカシミールがスマホに対応していない。事前処理に時間と手間がかかることです。

公的なサイトにユーザー視点の機能を期待するだけ無駄なことは解っていますのでさっさとそっちは見切ってカシミールで今は充分満足しています。

ジャバスクリプト等の難しい事はわかりません。

PS。地北線を描くとありますが磁北線ではないでしょうか？緯経度による微妙な磁北偏差はカシミールでは自動計算されて表示されます。