diff --git a/c116041-thesis.pdf b/c116041-thesis.pdf index d4e302a..7569dc8 100644 --- a/c116041-thesis.pdf +++ b/c116041-thesis.pdf Binary files differ diff --git a/c116041-thesis.tex b/c116041-thesis.tex index 8370b98..e827a91 100644 --- a/c116041-thesis.tex +++ b/c116041-thesis.tex @@ -139,7 +139,7 @@ \item JavaScript \par Web上で動的な表現を行うためのプログラミング言語。2010年以降からはライブラリ機能が現れ、Web開発のすべての領域で扱われるようになった。本研究では、LeafletやJQueryの母体としてハザードマップの移動やマーカーの切り替えを行う役目を担っている。 \item HTML5 \par - HTMLの５回目の改訂版のことで、従来のSGML宣言が不要になった。\footnote[4]{SGML文書の先頭にあって、SGML文書で使用するオプションを記述したもの。} + 2014年に更新された最新版のHTMLのことである。スマホ対応が簡易になり、音声や動画を埋め込むことが可能となった。また、SGML(Standard Generalized Markup Language)文書を用いたSGML宣言を行う必要もなくなった。 \item CSS3 \par HTML内で背景を描くためのW3C\footnote[5]{World wide webによる各種技術の標準化を推奨するために設立された非営利団体。}による仕様の一つ。本研究では、ハザードマップを表示するための「leaflet.css」として使用されている。 \end{description} diff --git a/copy.png b/copy.png new file mode 100644 index 0000000..8b7a8b9 --- /dev/null +++ b/copy.png Binary files differ diff --git a/dist/.gitkeep b/dist/.gitkeep new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/dist/.gitkeep diff --git a/dist/leaflet.sprite.js b/dist/leaflet.sprite.js new file mode 100644 index 0000000..b5bbb38 --- /dev/null +++ b/dist/leaflet.sprite.js @@ -0,0 +1,41 @@ +(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;oMapQuest — Map data © OpenStreetMap contributors', + subdomains: '1234' + }).addTo(m); + + L.marker([42, -71], { + icon: L.spriteIcon() + }).addTo(m); + + L.marker([42, -71.5], { + icon: L.spriteIcon("red") + }).addTo(m); + + L.marker([42, -72], { + icon: L.spriteIcon("green") + }).addTo(m); + + L.marker([42, -72.5], { + icon: L.spriteIcon("orange") + }).addTo(m); + + L.marker([42.5, -72.5], { + icon: L.spriteIcon("purple") + }).addTo(m); + + L.marker([42.5, -72], { + icon: L.spriteIcon("violet") + }).addTo(m); + + L.marker([42.5, -71.5], { + icon: L.spriteIcon("yellow") + }).addTo(m); + + L.marker([42.5, -71]).addTo(m); +}()); \ No newline at end of file diff --git a/map.html b/map.html index 727efd7..53968db 100644 --- a/map.html +++ b/map.html @@ -2,6 +2,8 @@ + + 酒田市内Webハザードマップ @@ -19,14 +21,14 @@ + + diff --git a/src/blank.png b/src/blank.png new file mode 100644 index 0000000..8d26ad1 --- /dev/null +++ b/src/blank.png Binary files differ diff --git a/src/sprite.js b/src/sprite.js new file mode 100644 index 0000000..092cd6a --- /dev/null +++ b/src/sprite.js @@ -0,0 +1,37 @@ + + +var L = global.L || require('leaflet'); + +var fs = require('fs'); + +var sources = { + blank: 'data:image/png;base64,' + fs.readFileSync(__dirname + '/blank.png', 'base64'), + sprite: 'data:image/png;base64,' + fs.readFileSync(__dirname + '/sprite.png', 'base64') +}; +function css(string) { + var tag = document.createElement('style'); + tag.innerHTML = string; + document.getElementsByTagName("head")[0].appendChild(tag); +} + +L.spriteIcon = function(color) { + color = color || 'blue'; + return L.icon({ + className: "leaflet-sprite leaflet-sprite-" + color, + iconSize: [24, 41], + shadowsize: [41, 41], + iconAnchor: [12, 41], + iconUrl: sources.blank, + shadowUrl: L.Icon.Default.imagePath + "/marker-shadow.png" + }); +}; + +var cssRegular = ".leaflet-sprite{background:url(" + sources.sprite + ") no-repeat top left;}\n.leaflet-sprite-blue{ background-position: 0 -132px; width: 41px; height: 41px; } \n.leaflet-sprite-green{ background-position: 0 -355px; width: 41px; height: 41px; } \n.leaflet-sprite-orange{ background-position: 0 -578px; width: 41px; height: 41px; } \n.leaflet-sprite-purple{ background-position: 0 -801px; width: 41px; height: 41px; } \n.leaflet-sprite-red{ background-position: 0 -1024px; width: 41px; height: 41px; } \n.leaflet-sprite-violet{ background-position: 0 -1247px; width: 41px; height: 41px; } \n.leaflet-sprite-yellow{ background-position: 0 -1470px; width: 41px; height: 41px; } "; + +var cssRetina = ".leaflet-sprite{\nbackground:url(" + sources.sprite + ") no-repeat top left;\nbackground-size:41px, 41px\n}\n .leaflet-sprite-blue{ background-position: 0 0; width: 41px; height: 41px; } \n .leaflet-sprite-green{ background-position: 0 -111px; width: 41px; height: 41px; } \n .leaflet-sprite-orange{ background-position: 0 -223px; width: 41px; height: 41px; } \n .leaflet-sprite-purple{ background-position: 0 -334px; width: 41px; height: 41px; } \n .leaflet-sprite-red{ background-position: 0 -446px; width: 41px; height: 41px; } \n .leaflet-sprite-violet{ background-position: 0 -557px; width: 41px; height: 41px; } \n .leaflet-sprite-yellow{ background-position: 0 -669px; width: 41px; height: 41px; } "; + +if (L.Browser.retina) { + css(cssRetina); +} else { + css(cssRegular); +} \ No newline at end of file diff --git a/src/sprite.png b/src/sprite.png new file mode 100644 index 0000000..b3dadc4 --- /dev/null +++ b/src/sprite.png Binary files differ