Skip to content

Instantly share code, notes, and snippets.

@frogcat
Last active April 15, 2017 06:13
Show Gist options
  • Save frogcat/f2b080fcbb397081a199bca2621d6382 to your computer and use it in GitHub Desktop.
Save frogcat/f2b080fcbb397081a199bca2621d6382 to your computer and use it in GitHub Desktop.
OSM + GSI Shade

OSM + GSI Shade

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
<title>OSM + GSI Shade</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;
}
.hillshademap {
mix-blend-mode: multiply;
}
</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>invert <code>#</code></dt>
<dd><input type="range" id="invert" min="0" max="100" value="0" /></dd>
<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="0" /></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="50" /></dd>
<dt>brightness <code>#</code></dt>
<dd><input type="range" id="brightness" min="0" max="300" value="200" /></dd>
<dt>opacity <code>#</code></dt>
<dd><input type="range" id="opacity" min="0" max="100" value="80" /></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");
L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
attribution: "&copy; <a href='http://osm.org/copyright'>OpenStreetMap</a> contributors",
className: "osm"
}).addTo(map);
L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/hillshademap/{z}/{x}/{y}.png", {
minZoom: 2,
maxNativeZoom: 14,
maxZoom: 18,
attribution: "<a href='http://maps.gsi.go.jp/development/ichiran.html'>地理院タイル・陰影起伏図</a>",
className: "hillshademap"
}).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 + ")");
});
$(".hillshademap").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