Skip to content

Instantly share code, notes, and snippets.

@frogcat
Created July 13, 2016 11:33
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save frogcat/ed45f9dd07ba1867de6602329e6cfdff to your computer and use it in GitHub Desktop.
leaflet+riot
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>leaflet + riot</title>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" href="https://npmcdn.com/leaflet@1.0.0-rc.1/dist/leaflet.css" />
<script src="https://npmcdn.com/leaflet@1.0.0-rc.1/dist/leaflet.js"></script>
<script type="riot/tag" src="my-popup.tag"></script>
<script src="https://cdn.jsdelivr.net/riot/2.5/riot+compiler.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/3.2.2/es6-promise.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/1.0.0/fetch.min.js"></script>
</head>
<body>
<div id="map" style="position:absolute;top:0;left:0;bottom:0;right:0;"></div>
<script src="script.js"></script>
</body>
</html>
<my-popup>
<h1>{opts.properties.name}</h1> <span>{opts.properties["撮影日"]} 撮影</span>
<iframe width="420" height="315" src="{src}" frameborder="0" allowfullscreen></iframe>
<code>{opts.geometry.coordinates}</code>
<script>
function getYoutubeEmbed(html) {
var div = document.createElement("div");
div.innerHTML = html;
var href = div.querySelector("a").href;
if (href.indexOf("https://youtu.be/") == 0)
return href.replace("https://youtu.be/", "https://www.youtube.com/embed/");
else if (href.indexOf("https://www.youtube.com/watch?v=") == 0)
return href.replace("https://www.youtube.com/watch?v=", "https://www.youtube.com/embed/");
return null;
}
this.src = getYoutubeEmbed(this.opts.properties["動画"]);
</script>
<style scoped>
:scope {
display: block;
}
h1 {
font-size: 10pt;
margin: 0;
padding: 0;
}
</style>
</my-popup>
var map = L.map("map").setView([35.362222, 138.731389], 5);
L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png", {
attribution: "<a href='http://maps.gsi.go.jp/development/ichiran.html'>淡色地図 (地理院タイル)</a>"
}).addTo(map);
fetch("https://cyberjapandata.gsi.go.jp/xyz/20160414kumamoto_0416uav/2/3/1.geojson")
.then(function(a) {
return a.json();
})
.then(function(geojson) {
var layer = L.geoJson(geojson, {
pointToLayer: function(feature, latlng) {
return L.marker(latlng, {
title: feature.properties.name
}).bindPopup(function(marker) {
var div = document.createElement("div");
riot.mount(div, "my-popup", marker.feature);
return div;
}, {
maxWidth: 420,
minWidth: 420
});
}
});
map.addLayer(layer).fitBounds(layer.getBounds());
})
.catch(function() {
console.log(arguments);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment