Last active
May 9, 2017 18:17
-
-
Save ubergesundheit/f6d1da4e1dbc9c7b901b2138ca6eaca9 to your computer and use it in GitHub Desktop.
Event API Locations
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
| license: mit |
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> | |
| <title>Event API Locations</title> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" /> | |
| <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" /> | |
| <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.de-DE,fetch"></script> | |
| <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> | |
| <style>body { padding: 0; margin: 0; } html, body, #map { height: 100vh; width: 100vw; }</style> | |
| </head> | |
| <body> | |
| <div id='map'></div> | |
| <script> | |
| var eventToMarker = function (event) { | |
| var geo = event.location.geo; | |
| var lat = parseFloat(geo.latitude); | |
| var lon = parseFloat(geo.longitude); | |
| if (isNaN(lat) || isNaN(lon)) { | |
| throw new Error('coordinates must be numbers or parseable as numbers'); | |
| } | |
| var coordinates = [ lat, lon ]; | |
| var name = event.name; | |
| var marker = L.marker(coordinates) | |
| marker.bindTooltip(name); | |
| return marker; | |
| } | |
| var map = L.map('map').fitWorld(); | |
| L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { | |
| maxZoom: 17, | |
| attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' | |
| }).addTo(map); | |
| fetch('https://event-api.codeformuenster.org/v0/events') | |
| .then(function(response) { | |
| if(response.ok) { | |
| return response.json(); | |
| } | |
| throw new Error('Network response was not ok.'); | |
| }) | |
| .then(function(json) { | |
| json.forEach(function (event) { | |
| eventToMarker(event).addTo(map); | |
| }); | |
| map.setView([51.96,7.62], 11); | |
| }) | |
| .catch(function(error) { | |
| console.log('There has been a problem with your fetch operation: ' + error.message); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment