<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel='stylesheet prefetch' href='https://api.tiles.mapbox.com/mapbox.js/v2.0.1/mapbox.css'> <style type="text/css"> body { color: #404040; font: 400 15px/22px 'Source Sans Pro', 'Helvetica Neue', Sans-serif; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } h1 { font-size: 22px; margin: 0; font-weight: 400; } a { color: #404040; text-decoration: none; } a:hover { color: #101010; } .sidebar { position: absolute; width: 25%; height: 100%; top: 0; left: 0; overflow: hidden; border-right: 1px solid rgba(0, 0, 0, 0.25); } .pad2 { padding: 20px; } .quiet { color: #888; } .map { position: absolute; left: 25%; width: 75%; top: 0; bottom: 0; } .heading { background: #fff; border-bottom: 1px solid #eee; height: 60px; line-height: 60px; padding: 0 10px; } .listings { height: 100%; overflow: auto; padding-bottom: 60px; } .listings .item { display: block; border-bottom: 1px solid #eee; padding: 10px; text-decoration: none; } .listings .item:last-child { border-bottom: none; } .listings .item .title { display: block; color: #ba222b; font-weight: 700; } .listings .item .title small { font-weight: 400; } .listings .item.active .title, .listings .item .title:hover { color: #bbb; } .listings .item.active { background-color: #f8f8f8; } ::-webkit-scrollbar { width: 3px; height: 3px; border-left: 0; background: rgba(0, 0, 0, 0.1); } ::-webkit-scrollbar-track { background: none; } ::-webkit-scrollbar-thumb { background: #ba222b; border-radius: 0; } .clearfix { display: block; } .clearfix:after { content: '.'; display: block; height: 0; clear: both; visibility: hidden; /* Marker tweaks */ } .leaflet-popup-close-button { display: none; } .leaflet-popup-content { font: 400 15px/22px 'Source Sans Pro', 'Helvetica Neue', Sans-serif; padding: 0; width: auto; } .leaflet-popup-content-wrapper { padding: 0; } .leaflet-popup-content h3 { background: #ba222b; color: #fff; margin: 0; display: block; padding: 10px; border-radius: 3px 3px 0 0; font-weight: 700; margin-top: -15px; } .leaflet-popup-content div { padding: 10px; } .leaflet-container .leaflet-marker-icon { cursor: pointer; } </style> </head> <body> <div class='sidebar'> <div class='heading'> <h1>Comfort splints</h1> </div> <div id='listings' class='listings'></div> </div> <div id='map' class='map'></div> <script src='https://api.tiles.mapbox.com/mapbox.js/v2.0.1/mapbox.js'></script> <script type="application/javascript"> // Replace this accessToken with you own. L.mapbox.accessToken = 'pk.eyJ1IjoiZ2xpZGV3ZWxsIiwiYSI6Iko0S0NFWTAifQ.p-gTWya0pvtUkSvKHg-dZg'; // Replace 'examples.map-i80bb8p3' with your own Map ID var map = L.mapbox.map('map', 'glidewell.jno36i2l') .setView([37.143, -96.614], 4); var listings = document.getElementById('listings'); var locations = L.mapbox.featureLayer().addTo(map); locations.loadURL('https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-26/comfortSplintsfinal.geojson'); function setActive(el) { var siblings = listings.getElementsByTagName('div'); for (var i = 0; i < siblings.length; i++) { siblings[i].className = siblings[i].className .replace(/active/, '').replace(/\s\s*$/, ''); } el.className += ' active'; } locations.on('ready', function() { locations.eachLayer(function(locale) { // Shorten locale.feature.properties to just `prop` so we're not // writing this long form over and over again. var prop = locale.feature.properties; // Each marker on the map. var popup = '<h3>' + prop.name + '</h3><div>' + prop.address + '<br>' + prop.city + ', ' + prop.state + '<br>' + prop.phone + '<br>' + '<a href="http://' + prop.website + '" target="_blank">' + prop.website + '</a>'; var listing = listings.appendChild(document.createElement('div')); listing.className = 'item'; var link = listing.appendChild(document.createElement('a')); link.href = '#'; link.className = 'title'; link.innerHTML = prop.name; if (prop.crossStreet) { link.innerHTML += '<br /><small class="quiet">' + prop.crossStreet + '</small>'; popup += '<br /><small class="quiet">' + prop.crossStreet + '</small>'; } var details = listing.appendChild(document.createElement('div')); details.innerHTML = prop.city; if (prop.phone) { details.innerHTML += ' · ' + prop.state; } link.onclick = function() { setActive(listing); // When a menu item is clicked, animate the map to center // its associated locale and open its popup. map.setView(locale.getLatLng(), 16); locale.openPopup(); return false; }; // Marker interaction locale.on('click', function(e) { // 1. center the map on the selected marker. map.panTo(locale.getLatLng()); // 2. Set active the markers associated listing. setActive(listing); }); popup += '</div>'; locale.bindPopup(popup); }); }); locations.on('layeradd', function(e) { var marker = e.layer; marker.setIcon(L.icon({ iconUrl: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-26/marker.png', iconSize: [56, 56], iconAnchor: [28, 28], popupAnchor: [0, -34] })); }); </script> </body> </html>
mapbox之javafx
最新推荐文章于 2023-02-14 14:50:59 发布