Created
July 13, 2016 13:37
-
-
Save smellman/ac91ce855a611c13eede5f64cc768228 to your computer and use it in GitHub Desktop.
leaflet + template tag
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>leaflet + template tag</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://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> | |
| <template id="popup"> | |
| <h1 id="popup_title"></h1> <span id="popup_recorded_at"></span> | |
| <iframe id="popup_video" width="420" height="315" src="" frameborder="0" allowfullscreen></iframe> | |
| <code id="popup_coordinates"></code> | |
| <style scoped> | |
| :scope { | |
| display: block; | |
| } | |
| h1 { | |
| font-size: 10pt; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| </style> | |
| </template> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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); | |
| var getYoutubeEmbed = function(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; | |
| }; | |
| 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"); | |
| var video_src = getYoutubeEmbed(marker.feature.properties["動画"]); | |
| if ('content' in document.createElement('template')) { | |
| var t = document.querySelector("#popup"); | |
| t.content.querySelector("#popup_title").textContent = marker.feature.properties.name; | |
| t.content.querySelector("#popup_recorded_at").textContent = marker.feature.properties["撮影日"] + " 撮影"; | |
| t.content.querySelector("#popup_coordinates").textContent = marker.feature.geometry.coordinates; | |
| t.content.querySelector("#popup_video").src = video_src; | |
| var clone = document.importNode(t.content, true); | |
| div.appendChild(clone); | |
| } else { | |
| div.textContent = "templateをサポートしていません"; | |
| } | |
| 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