Skip to content

Instantly share code, notes, and snippets.

@frogcat

frogcat/20170414.md

Last active June 25, 2018 07:41
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save frogcat/d3b9c8039f13b0603120ddf7a2edfb0c to your computer and use it in GitHub Desktop.
Save frogcat/d3b9c8039f13b0603120ddf7a2edfb0c to your computer and use it in GitHub Desktop.
Download ZIP
CSS filter and map tile
Raw
20170414.md

CSS filter and map tile

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
<title>CSS filter and map tile</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-hash/leaflet-hash.js"></script>
<style>
#mixer {
position: absolute;
top: 10px;
left: 10px;
width: auto;
height: auto;
background: rgba(0, 0, 0, 0.8);
color: white;
z-index: 10000;
border-radius: 5px;
}
</style>
</head>
<body>
<div id="map" style="position:absolute;top:0;left:0;right:0;bottom:0;"></div>
<div id="mixer">
<dl style="margin:10px;">
<dt>grayscale <code>#</code></dt>
<dd><input type="range" id="grayscale" min="0" max="100" value="0" /></dd>
<dt>sepia <code>#</code></dt>
<dd><input type="range" id="sepia" min="0" max="100" value="0" /></dd>
<dt>saturate <code>#</code></dt>
<dd><input type="range" id="saturate" min="0" max="500" value="100" /></dd>
<dt>hue-rotate <code>#</code></dt>
<dd><input type="range" id="hue-rotate" min="0" max="360" value="0" /></dd>
<dt>contrast <code>#</code></dt>
<dd><input type="range" id="contrast" min="0" max="300" value="100" /></dd>
<dt>brightness <code>#</code></dt>
<dd><input type="range" id="brightness" min="0" max="300" value="100" /></dd>
<dt>invert <code>#</code></dt>
<dd><input type="range" id="invert" min="0" max="100" value="0" /></dd>
</dl>
</div>
<script>
var map = L.map("map", L.extend({
minZoom: 0,
maxZoom: 18,
zoom: 8,
center: [35.658342, 139.701462]
}, L.Hash.parseHash(location.hash)));
L.hash(map);
map.zoomControl.setPosition("bottomright");
map.attributionControl.addAttribution("<a href='http://maps.gsi.go.jp/development/ichiran.html'>地理院タイル</a>");
L.control.layers({
"標準地図": L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png", {
minZoom: 2,
maxNativeZoom: 16,
maxZoom: 18,
attribution: "標準地図"
}),
"淡色地図": L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png", {
minZoom: 2,
maxNativeZoom: 16,
maxZoom: 18,
attribution: "淡色地図"
}),
"傾斜量図": L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/slopemap/{z}/{x}/{y}.png", {
minZoom: 2,
maxNativeZoom: 16,
maxZoom: 18,
attribution: "傾斜量図"
}),
"陰影起伏図": L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/hillshademap/{z}/{x}/{y}.png", {
minZoom: 2,
maxNativeZoom: 14,
maxZoom: 18,
attribution: "陰影起伏図"
}).addTo(map)
}, {}, {
collapsed: false
}).addTo(map);
$("#mixer input").on("input", function() {
var filter = [];
$("#mixer input").each(function() {
var key = $(this).attr("id");
var val = $(this).val() + (key === "hue-rotate" ? "deg" : "%");
$(this).parent("dd").prev("dt").children("code").text(val);
filter.push(key + "(" + val + ")");
});
$(".leaflet-tile-pane").css("filter", filter.join(" "));
}).eq(1).trigger("input");
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment