質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Leaflet

Leafletは、Web上で地図を作成するためのJavaScriptライブラリ。人気のあるJavaScript地図ライブラリのうちの一つでオープンソースです。軽量でインタラクティブな地図を手軽に表示することができます。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

2895閲覧

leafletを用いてデータをヒートマップで表示したい

kokokop

総合スコア12

Leaflet

Leafletは、Web上で地図を作成するためのJavaScriptライブラリ。人気のあるJavaScript地図ライブラリのうちの一つでオープンソースです。軽量でインタラクティブな地図を手軽に表示することができます。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/04/26 11:55

編集2019/04/26 11:59

前提・実現したいこと

leafletを用いてjsファイル内の行動データをヒートマップという形で表示しようとしています。

発生している問題・エラーメッセージ

データをうまく読み込んでもらえない。

Uncaught Error: Invalid LatLng object: (undefined, undefined) leaflet.js:5

該当のソースコード

javascript

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <title>Leaflet.heat demo</title> 5<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.3.1/leaflet.css" /> 6<script src="http://cdn.leafletjs.com/leaflet/v1.3.1/leaflet.js"></script> 7<style> 8 #map { width: 800px; height: 600px; } 9 body { font: 16px/1.4 "Helvetica Neue", Arial, sans-serif; } 10 .ghbtns { position: relative; top: 4px; margin-left: 5px; } 11 a { color: #0077ff; } 12</style> 13 14 <meta charset="utf-8"> 15 <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script> 16 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.8.9/jquery.csv.min.js"></script> 17 <body> 18 <div id="map"></div> 19 <script src="../dist/leaflet-heat.js"></script> 20 <script src="http://leaflet.github.io/Leaflet.markercluster/example/realworld.10000.js"></script> 21 22 <!-- 行動データファイルの読み込み --> 23 <script src="../move_stay_data/data.js"> 24 console.log(data); 25 </script> 26 27 <script> 28 29 var map = L.map('map').setView([35.288742, 136.875091], 18); 30 31 var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 32 attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors', 33 }).addTo(map); 34 35 // データをマップに適用 36 37 var alldata = data.map( function (p) {return [p[5], p[7]];}); 38 L.heatLayer(alldata).addTo(map); 39 40 console.log(alldata); 41 42 </script> 43 </body> 44</html> 45

javascript

1/* 2 (c) 2014, Vladimir Agafonkin 3 simpleheat, a tiny JavaScript library for drawing heatmaps with Canvas 4 https://github.com/mourner/simpleheat 5*/ 6! function() { 7 "use strict"; 8 9 function t(i) { 10 return this instanceof t ? (this._canvas = i = "string" == typeof i ? document.getElementById(i) : i, this._ctx = i.getContext("2d"), this._width = i.width, this._height = i.height, this._max = 1, void this.clear()) : new t(i) 11 } 12 t.prototype = { 13 defaultRadius:10, 14 defaultGradient: { 15 .1: "blue", 16 .4: "cyan", 17 .5: "lime", 18 .6: "yellow", 19 1: "red" 20 }, 21 data: function(t, i) { 22 return this._data = t, this 23 }, 24 max: function(t) { 25 return this._max = t, this 26 }, 27 add: function(t) { 28 return this._data.push(t), this 29 }, 30 clear: function() { 31 return this._data = [], this 32 }, 33 radius: function(t, i) { 34 i = i || 20; 35 var a = this._circle = document.createElement("canvas"), 36 s = a.getContext("2d"), 37 e = this._r = t + i; 38 return a.width = a.height = 2 * e, s.shadowOffsetX = s.shadowOffsetY = 200, s.shadowBlur = i, s.shadowColor = "black", s.beginPath(), s.arc(e - 200, e - 200, t, 0, 2 * Math.PI, !0), s.closePath(), s.fill(), this 39 }, 40 gradient: function(t) { 41 var i = document.createElement("canvas"), 42 a = i.getContext("2d"), 43 s = a.createLinearGradient(0, 0, 0, 256); 44 i.width = 1, i.height = 256; 45 for (var e in t) s.addColorStop(e, t[e]); 46 return a.fillStyle = s, a.fillRect(0, 0, 1, 256), this._grad = a.getImageData(0, 0, 1, 256).data, this 47 }, 48 draw: function(t) { 49 this._circle || this.radius(this.defaultRadius), this._grad || this.gradient(this.defaultGradient); 50 var i = this._ctx; 51 i.clearRect(0, 0, this._width, this._height); 52 for (var a, s = 0, e = this._data.length; e > s; s++) a = this._data[s], i.globalAlpha = Math.max(a[2] / this._max, t || .05), i.drawImage(this._circle, a[0] - this._r, a[1] - this._r); 53 var n = i.getImageData(0, 0, this._width, this._height); 54 return this._colorize(n.data, this._grad), i.putImageData(n, 0, 0), this 55 }, 56 _colorize: function(t, i) { 57 for (var a, s = 3, e = t.length; e > s; s += 4) a = 4 * t[s], a && (t[s - 3] = i[a], t[s - 2] = i[a + 1], t[s - 1] = i[a + 2]) 58 } 59 }, window.simpleheat = t 60}(), 61/* 62 (c) 2014, Vladimir Agafonkin 63 Leaflet.heat, a tiny and fast heatmap plugin for Leaflet. 64 https://github.com/Leaflet/Leaflet.heat 65*/ 66L.HeatLayer = (L.Layer ? L.Layer : L.Class).extend({ 67 initialize: function(t, i) { 68 this._latlngs = t, L.setOptions(this, i) 69 }, 70 setLatLngs: function(t) { 71 return this._latlngs = t, this.redraw() 72 }, 73 addLatLng: function(t) { 74 return this._latlngs.push(t), this.redraw() 75 }, 76 setOptions: function(t) { 77 return L.setOptions(this, t), this._heat && this._updateOptions(), this.redraw() 78 }, 79 redraw: function() { 80 return !this._heat || this._frame || this._map._animating || (this._frame = L.Util.requestAnimFrame(this._redraw, this)), this 81 }, 82 onAdd: function(t) { 83 this._map = t, this._canvas || this._initCanvas(), t._panes.overlayPane.appendChild(this._canvas), t.on("moveend", this._reset, this), t.options.zoomAnimation && L.Browser.any3d && t.on("zoomanim", this._animateZoom, this), this._reset() 84 }, 85 onRemove: function(t) { 86 t.getPanes().overlayPane.removeChild(this._canvas), t.off("moveend", this._reset, this), t.options.zoomAnimation && t.off("zoomanim", this._animateZoom, this) 87 }, 88 addTo: function(t) { 89 return t.addLayer(this), this 90 }, 91 _initCanvas: function() { 92 var t = this._canvas = L.DomUtil.create("canvas", "leaflet-heatmap-layer leaflet-layer"), 93 i = L.DomUtil.testProp(["transformOrigin", "WebkitTransformOrigin", "msTransformOrigin"]); 94 t.style[i] = "50% 50%"; 95 var a = this._map.getSize(); 96 t.width = a.x, t.height = a.y; 97 var s = this._map.options.zoomAnimation && L.Browser.any3d; 98 L.DomUtil.addClass(t, "leaflet-zoom-" + (s ? "animated" : "hide")), this._heat = simpleheat(t), this._updateOptions() 99 }, 100 _updateOptions: function() { 101 this._heat.radius(this.options.radius || this._heat.defaultRadius, this.options.blur), this.options.gradient && this._heat.gradient(this.options.gradient), this.options.max && this._heat.max(this.options.max) 102 }, 103 _reset: function() { 104 var t = this._map.containerPointToLayerPoint([0, 0]); 105 L.DomUtil.setPosition(this._canvas, t); 106 var i = this._map.getSize(); 107 this._heat._width !== i.x && (this._canvas.width = this._heat._width = i.x), this._heat._height !== i.y && (this._canvas.height = this._heat._height = i.y), this._redraw() 108 }, 109 _redraw: function() { 110 var t, i, a, s, e, n, h, o, r, d = [], 111 _ = this._heat._r, 112 l = this._map.getSize(), 113 m = new L.Bounds(L.point([-_, -_]), l.add([_, _])), 114 c = void 0 === this.options.max ? 1 : this.options.max, 115 u = void 0 === this.options.maxZoom ? this._map.getMaxZoom() : this.options.maxZoom, 116 f = 1 / Math.pow(2, Math.max(0, Math.min(u - this._map.getZoom(), 12))), 117 g = _ / 2, 118 p = [], 119 v = this._map._getMapPanePos(), 120 w = v.x % g, 121 y = v.y % g; 122 for (t = 0, i = this._latlngs.length; i > t; t++) 123 if (a = this._map.latLngToContainerPoint(this._latlngs[t]), m.contains(a)) { 124 e = Math.floor((a.x - w) / g) + 2, n = Math.floor((a.y - y) / g) + 2; 125 var x = void 0 !== this._latlngs[t].alt ? this._latlngs[t].alt : void 0 !== this._latlngs[t][2] ? +this._latlngs[t][2] : 1; 126 r = x * f, p[n] = p[n] || [], s = p[n][e], s ? (s[0] = (s[0] * s[2] + a.x * r) / (s[2] + r), s[1] = (s[1] * s[2] + a.y * r) / (s[2] + r), s[2] += r) : p[n][e] = [a.x, a.y, r] 127 } for (t = 0, i = p.length; i > t; t++) 128 if (p[t]) 129 for (h = 0, o = p[t].length; o > h; h++) s = p[t][h], s && d.push([Math.round(s[0]), Math.round(s[1]), Math.min(s[2], c)]); 130 this._heat.data(d).draw(this.options.minOpacity), this._frame = null 131 }, 132 _animateZoom: function(t) { 133 var i = this._map.getZoomScale(t.zoom), 134 a = this._map._getCenterOffset(t.center)._multiplyBy(-i).subtract(this._map._getMapPanePos()); 135 L.DomUtil.setTransform ? L.DomUtil.setTransform(this._canvas, a, i) : this._canvas.style[L.DomUtil.TRANSFORM] = L.DomUtil.getTranslateString(a) + " scale(" + i + ")" 136 } 137}), L.heatLayer = function(t, i) { 138 return new L.HeatLayer(t, i) 139}; 140

javascript

1var data = [ 2 [1,2017,15,2017,0,35.288742,"N",136.875088,"E",21,0], 3 [2,2017,15,2017,0,35.288757,"N",136.875058,"E",18.6,0], 4[3,2017,15,2017,0,35.288757,"N",136.875074,"E",18.6,2], 5[4,2017,15,2017,0,35.288749,"N",136.875119,"E",21.6,0], 6,,, 7];

試したこと

data.jsが13万ほどの行動データのため,少なくしてみて試したところ(1万弱のデータ)読み込めました。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

私の環境(Chrome,Firefox)で実行してみましたが、data.jsの長さについては、30万行まで増やしても読み込み成功して事象が再現しませんでした。

緯度経度に空白文字やアルファベットを入れた場合にはChromeで同じエラーが出るので、data.jsに不正な値が紛れ込んでいるのかもしれません。

投稿2019/04/26 13:19

tjmsy

総合スコア55

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kokokop

2019/04/26 16:17

大変お恥ずかしい限りです。。。。 行動データを確認し直してみたところ、とんでもない誤字がありました。 結果出力には成功しました。 回答のほど誠にありがとうございましす!助かりました。
tjmsy

2019/04/26 17:18

無事成功したようで何よりです。 「試したこと」に、失敗するパターンと成功するパターンの条件がある程度切り分けられて書いてあったことで、スムーズに回答することができました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問