map8.html

<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"/>
<meta name="viewport" content="width=device-width"/>

<title>マップアプリ8</title>

<link rel="apple-touch-icon" href="app-icon.png"/>
<meta property="og:image" content="ogp-image.jpg"/>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
<script src="https://code4fukui.github.io/egmapjs/egmap.js"></script>
<link rel="stylesheet" href="https://code4fukui.github.io/egmapjs/egmap.css"/>
<script src="https://fukuno.jig.jp/fukuno.js"></script>
<script src="https://code4fukui.github.io/egmapjs/sparql.js"></script>
<script>"use strict"

window.onload = function() {
	var map = initMap('mapid')
	map.setZoom(16)
	map.panTo([ 35.943560,136.188917 ]) // 鯖江駅
	map.addIcon(35.944571, 136.186228 , "Hana道場", "icon/hanadojo.png", 64)

	// SPARQLクエリー (参考データ https://fukuno.jig.jp/app/odp/finddata.html )
	var query = `
		prefix ic: <http://imi.go.jp/ns/core/rdf#>
		prefix xsd: <http://www.w3.org/2001/XMLSchema#>
		prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
		prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#>
		prefix geo: <http://www.w3.org/2003/01/geo/wgs84_pos#>
		prefix jrrk: <http://purl.org/jrrk#>

		select ?uri ?name ?lat ?lng ?plugs {
			?uri rdf:type <http://purl.org/jrrk#PublicWIFI>.
			?uri rdfs:label ?name.
			?uri geo:lat ?lat.
			?uri geo:long ?lng.
			?uri jrrk:hasPlugs ?plugs.
			filter(contains(str(?plugs),'有'))
			filter(
				xsd:float(?lat) < $LAT_MAX && xsd:float(?lng) > $LNG_MIN &&
				xsd:float(?lat) > $LAT_MIN && xsd:float(?lng) < $LNG_MAX
			)
		} limit 1000
	`
	var p = map.getCenter()
	const dl = 1 // 取得する広さ 大きいほど広く取得
	query = query.replace("$LAT_MAX", p.lat + dl)
	query = query.replace("$LAT_MIN", p.lat - dl)
	query = query.replace("$LNG_MAX", p.lng + dl)
	query = query.replace("$LNG_MIN", p.lng - dl)

	querySPARQL(query, function(data) {
		var items = data.results.bindings
		for (var i = 0; i < items.length; i++) {
			var item = items[i]
			var uri = item.uri.value
			var lat = item.lat.value
			var lng = item.lng.value
			var name = item.name.value
			var plugs = item.plugs.value
			map.addIcon(lat, lng, "<a href=" + uri + ">" + name + "</a>")
		}
	})

}

</script>
<style>

body { margin: 0; font-family: sans-serif; text-align: center; }
h1 { font-size: 5vw; margin: 0; }
#mapid { height: 60vh; }

</style></head><body>

<h1>電源マップ - egmapjs</h1>
<div id="mapid"></div>

<img id=qrcode><script>addEventListener("load", () => qrcode.src = "https://chart.apis.google.com/chart?chs=140x140&cht=qr&chl=" + encodeURIComponent(document.location))</script><br>

<a href=https://fukuno.jig.jp/2393>簡単地図アプリ egmapjs チュートリアル</a>

</body></html>