CINXE.COM
OSM Community Index
<!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <title>OSM Community Index</title> <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/> <script src='https://cdn.jsdelivr.net/npm/mapbox-gl@2.15.0/dist/mapbox-gl.min.js'></script> <link href='https://cdn.jsdelivr.net/npm/mapbox-gl@2.15.0/dist/mapbox-gl.min.css' rel='stylesheet'/> <style> body { margin: 0; padding: 0; } h2 { margin: 10px; font-size: 1.2em; } a { text-decoration: none; } a:visited, a { color: #67e; font-weight: bold; } a:hover { color: #56a; } .resource { margin: 10px; font-size: 1em; display: flex; flex-flow: row nowrap; align-items: center; } .resource .icon { width: 24px; } .resource .label { margin-left: 8px; } .map-overlay { position: absolute; top: 0; right: 0; background: rgba(255, 255, 255, 0.8); margin-right: 20px; font-family: Arial, sans-serif; overflow: auto; border-radius: 3px; } #map { position:absolute; top: 0; bottom: 0; width: 100%; } #features { top: 0; margin-top: 20px; width: 350px; } </style> </head> <body> <script>var $buoop={required:{i:15,e:-4,f:-3,o:-3,s:-1,c:-3},reminder:0,noclose:true,no_permanent_hide:true,insecure:true,api:2021.06};</script> <script src='https://browser-update.org/update.js'></script> <div id='map'></div> <div class='map-overlay' id='features'><h2>OSM Communities</h2><div id='resultPane'></div></div> <script> mapboxgl.accessToken = 'pk.eyJ1IjoiYmhvdXNlbCIsImEiOiJjbGZ1NG5qbTgwMzJyM3JydmJoY3ZvdDZzIn0.45qwn8YXGm4QofNsZryK4g'; var cdnBase = 'https://cdn.jsdelivr.net/gh/osmlab/osm-community-index@main/dist/'; // create map var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/light-v11', projection: 'mercator', center: [0,0], zoom: 1 }); var previous = ''; var flying = false; // wait for map to load before adjusting it map.on('load', function() { var dataURL = cdnBase + 'completeFeatureCollection.min.json'; map.addSource('osm-community-index', { type: 'geojson', data: dataURL }); map.addLayer({ 'id': 'osm-community-index', 'type': 'fill', 'source': 'osm-community-index', 'paint': { 'fill-color': 'hsla(243, 93%, 64%, 0.24)', 'fill-opacity': 1 } }); // make a pointer cursor map.getCanvas().style.cursor = 'default'; // change info window on click map.on('click', function(e) { serveClick(e.point, e.lngLat); }); if (getParameterByName("map") != "" && getParameterByName("map") !== null) { var iZoom = 7; if (getParameterByName("zoom") != "" && getParameterByName("zoom") !== null) { iZoom = parseInt(getParameterByName("zoom")); if (isNaN(iZoom)) { iZoom = 7; } } var coords = getParameterByName("map").split(/\,/); flying = true; map.flyTo({center: [coords[1], coords[0]], zoom: iZoom, essential: true}); } }); map.on('moveend', function(e) { if (flying) { flying = false; map.fire('flyend'); } }); map.on('flyend', function(e) { serveClick(new mapboxgl.Point(document.getElementById('map').offsetWidth / 2, document.getElementById('map').offsetHeight / 2), map.getCenter()); }); function serveClick(ePoint, eLatLng) { var hits = map.queryRenderedFeatures(ePoint, { layers: ['osm-community-index'] }); var seen = {}; // to ignore duplicate results from queryRenderedFeatures - #360 var communities = []; // gather the communities from the result hits.forEach(function(hit) { var props = hit.properties || {}; var resources = {}; try { resources = JSON.parse(props.resources || '{}'); } catch (e) { } for (var k in resources) { if (seen[k]) continue; seen[k] = true; var community = resources[k]; communities.push({ 'area': props.area || Infinity, 'order': community.order || 0, 'community': community }); } }); // sort by feature area ascending, community order descending communities.sort(function(a, b) { return a.area - b.area || b.order - a.order; }); // display var inner = ''; communities.forEach(function(c) { var community = c.community; var iconURL = cdnBase + 'img/' + community.type + '.svg'; var url = community.url || community.resolved.url; var name = community.name || community.resolved.name; var properName = name.charAt(0).toUpperCase() + name.slice(1); // capitalize inner += '<div class="resource">' + '<img class="icon" src="' + iconURL + '"/>' + '<a class="label" target="_blank" href="' + url + '">' + properName + '</a>' + '</div>'; }); // show permalink var lat = eLatLng.lat.toFixed(5); var lng = eLatLng.lng.toFixed(5); var zoom = map.getZoom().toFixed(2); var iconURL = cdnBase + 'img/url.svg'; inner += '<hr style="border:1px solid #67e;color:#67e"/><div class="resource"><img class="icon" src="' + iconURL + '"/><a class="label" target="_blank" href="?map=' + lat + ',' + lng + '&zoom=' + zoom + '">Permalink to this position</a></div>'; if (inner !== previous) { previous = inner; document.getElementById('resultPane').innerHTML = inner; } } function getParameterByName(name) { name = name.replace(/[\[\]]/g, '\\$&'); var url = window.location.href; var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'); var results = regex.exec(url); if (!results) return null; if (!results[2]) return ''; return decodeURIComponent(results[2].replace(/\+/g, ' ')); } </script> <a href="https://github.com/osmlab/osm-community-index" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; left: 0; transform: scale(-1, 1);" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style></a> </body> </html>