Built with blockbuilder.org
Created
February 4, 2018 22:00
-
-
Save mastersigat/c9fc487453d17a33015eec35ef21b4d1 to your computer and use it in GitHub Desktop.
#MapboxGL / Carte campus
This file contains 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 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
| <!-- This demo shows how to build the store listings. --> | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset='utf-8' /> | |
| <title>Store Locator</title> | |
| <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> | |
| <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.js'></script> | |
| <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.css' rel='stylesheet' /> | |
| <style> | |
| 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; | |
| } | |
| .sidebar { | |
| position:absolute; | |
| width:33.3333%; | |
| height:100%; | |
| top:0;left:0; | |
| overflow:hidden; | |
| border-right:1px solid rgba(0,0,0,0.25); | |
| } | |
| .pad2 { | |
| padding:20px; | |
| } | |
| .map { | |
| position:absolute; | |
| left:33.3333%; | |
| width:66.6666%; | |
| top:0;bottom:0; | |
| } | |
| h1 { | |
| font-size:22px; | |
| margin:0; | |
| font-weight:400; | |
| line-height: 20px; | |
| padding: 20px 2px; | |
| } | |
| a { | |
| color:#404040; | |
| text-decoration:none; | |
| } | |
| a:hover { | |
| color:#101010; | |
| } | |
| .heading { | |
| background:#fff; | |
| border-bottom:1px solid #eee; | |
| min-height:60px; | |
| line-height:60px; | |
| padding:0 10px; | |
| background-color: #00853e; | |
| color: #fff; | |
| } | |
| .listings { | |
| height:100%; | |
| overflow:auto; | |
| padding-bottom:60px; | |
| } | |
| .listings .item { | |
| display:block; | |
| border-bottom:1px solid #eee; | |
| padding:10px; | |
| text-decoration:none; | |
| h1 { | |
| font-size:22px; | |
| margin:0; | |
| font-weight:400; | |
| line-height: 20px; | |
| padding: 20px 2px; | |
| } | |
| a { | |
| color:#404040; | |
| text-decoration:none; | |
| } | |
| a:hover { | |
| color:#101010; | |
| } | |
| .heading { | |
| background:#fff; | |
| border-bottom:1px solid #eee; | |
| min-height:60px; | |
| line-height:60px; | |
| padding:0 10px; | |
| background-color: #00853e; | |
| color: #fff; | |
| } | |
| .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:#00853e; | |
| font-weight:700; | |
| } | |
| .listings .item .title small { font-weight:400; } | |
| .listings .item.active .title, | |
| .listings .item .title:hover { color:#8cc63f; } | |
| .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:#00853e; | |
| border-radius:0; | |
| } | |
| .marker { | |
| border: none; | |
| cursor: pointer; | |
| height: 56px; | |
| width: 56px; | |
| background-image: url(marker.png); | |
| background-color: rgba(0, 0, 0, 0); | |
| } | |
| .clearfix { display:block; } | |
| .clearfix:after { | |
| content:'.'; | |
| display:block; | |
| height:0; | |
| clear:both; | |
| visibility:hidden; | |
| } | |
| /* Marker tweaks */ | |
| .mapboxgl-popup { | |
| padding-bottom: 50px; | |
| } | |
| .mapboxgl-popup-close-button { | |
| display:none; | |
| } | |
| .mapboxgl-popup-content { | |
| font:400 15px/22px 'Source Sans Pro', 'Helvetica Neue', Sans-serif; | |
| padding:0; | |
| width:180px; | |
| } | |
| .mapboxgl-popup-content-wrapper { | |
| padding:1%; | |
| } | |
| .mapboxgl-popup-content h3 { | |
| background:#91c949; | |
| color:#fff; | |
| margin:0; | |
| display:block; | |
| padding:10px; | |
| border-radius:3px 3px 0 0; | |
| font-weight:700; | |
| margin-top:-15px; | |
| } | |
| .mapboxgl-popup-content h4 { | |
| margin:0; | |
| display:block; | |
| padding: 10px 10px 10px 10px; | |
| font-weight:400; | |
| } | |
| .mapboxgl-popup-content div { | |
| padding:10px; | |
| } | |
| .mapboxgl-container .leaflet-marker-icon { | |
| cursor:pointer; | |
| } | |
| .mapboxgl-popup-anchor-top > .mapboxgl-popup-content { | |
| margin-top: 15px; | |
| } | |
| .mapboxgl-popup-anchor-top > .mapboxgl-popup-tip { | |
| border-bottom-color: #91c949; | |
| } | |
| } | |
| .listings .item:last-child { border-bottom:none; } | |
| .listings .item .title { | |
| display:block; | |
| color:#00853e; | |
| font-weight:700; | |
| } | |
| .listings .item .title small { font-weight:400; } | |
| .listings .item.active .title, | |
| .listings .item .title:hover { color:#8cc63f; } | |
| .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:#00853e; | |
| border-radius:0; | |
| } | |
| .marker { | |
| border: none; | |
| cursor: pointer; | |
| height: 56px; | |
| width: 56px; | |
| background-image: url(marker.png); | |
| background-color: rgba(0, 0, 0, 0); | |
| } | |
| .clearfix { display:block; } | |
| .clearfix:after { | |
| content:'.'; | |
| display:block; | |
| height:0; | |
| clear:both; | |
| visibility:hidden; | |
| } | |
| /* Marker tweaks */ | |
| .mapboxgl-popup { | |
| padding-bottom: 50px; | |
| } | |
| .mapboxgl-popup-close-button { | |
| display:none; | |
| } | |
| .mapboxgl-popup-content { | |
| font:400 15px/22px 'Source Sans Pro', 'Helvetica Neue', Sans-serif; | |
| padding:0; | |
| width:180px; | |
| } | |
| .mapboxgl-popup-content-wrapper { | |
| padding:1%; | |
| } | |
| .mapboxgl-popup-content h3 { | |
| background:#91c949; | |
| color:#fff; | |
| margin:0; | |
| display:block; | |
| padding:10px; | |
| border-radius:3px 3px 0 0; | |
| font-weight:700; | |
| margin-top:-15px; | |
| } | |
| .mapboxgl-popup-content h4 { | |
| margin:0; | |
| display:block; | |
| padding: 10px 10px 10px 10px; | |
| font-weight:400; | |
| } | |
| .mapboxgl-popup-content div { | |
| padding:10px; | |
| } | |
| .mapboxgl-container .leaflet-marker-icon { | |
| cursor:pointer; | |
| } | |
| .mapboxgl-popup-anchor-top > .mapboxgl-popup-content { | |
| margin-top: 15px; | |
| } | |
| .mapboxgl-popup-anchor-top > .mapboxgl-popup-tip { | |
| border-bottom-color: #91c949; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class='sidebar'> | |
| <div class='heading'> | |
| <h1>Batiments</h1> | |
| </div> | |
| <div id='listings' class='listings'></div> | |
| </div> | |
| <div id='map' class='map'> </div> | |
| <script> | |
| if (!('remove' in Element.prototype)) { | |
| Element.prototype.remove = function() { | |
| if (this.parentNode) { | |
| this.parentNode.removeChild(this); | |
| } | |
| }; | |
| }mapboxgl.accessToken = 'pk.eyJ1IjoiZXhhbXBsZXMiLCJhIjoiY2lqbmpqazdlMDBsdnRva284cWd3bm11byJ9.V6Hg2oYJwMAxeoR9GEzkAA'; | |
| // This adds the map to your page | |
| var map = new mapboxgl.Map({ | |
| // container id specified in the HTML | |
| container: 'map', | |
| // style URL | |
| style: 'mapbox://styles/mapbox/light-v9', | |
| // initial position in [long, lat] format | |
| center: [-1.701, 48.119], | |
| bearing:-20, | |
| pitch: 50, | |
| zoom: 16 | |
| }); | |
| var stores = { | |
| "type": "FeatureCollection", | |
| "features": [ | |
| { | |
| "type": "Feature", | |
| "properties": { | |
| "full_id": "r1223213", | |
| "osm_id": 1223213, | |
| "name": "relation" | |
| }, | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [ | |
| -1.701577519623412, | |
| 48.12076436529518 | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "Feature", | |
| "properties": { | |
| "full_id": "r2881677", | |
| "osm_id": 2881677, | |
| "name": "relation" | |
| }, | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [ | |
| -1.698884635818622, | |
| 48.119256250226655 | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "Feature", | |
| "properties": { | |
| "full_id": "w81216524", | |
| "osm_id": 81216524, | |
| "name": "way" | |
| }, | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [ | |
| -1.701172941991025, | |
| 48.11996476678429 | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "Feature", | |
| "properties": { | |
| "full_id": "r5617644", | |
| "osm_id": 5617644, | |
| "name": "relation" | |
| }, | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [ | |
| -1.70385323423901, | |
| 48.11845331858342 | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "Feature", | |
| "properties": { | |
| "full_id": "w331094132", | |
| "osm_id": 331094132, | |
| "name": "way" | |
| }, | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [ | |
| -1.703449536622463, | |
| 48.11878653871865 | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "Feature", | |
| "properties": { | |
| "full_id": "w332028711", | |
| "osm_id": 332028711, | |
| "name": "way" | |
| }, | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [ | |
| -1.701151357415048, | |
| 48.119894323601905 | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "Feature", | |
| "properties": { | |
| "full_id": "w81216374", | |
| "osm_id": 81216374, | |
| "name": "way" | |
| }, | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [ | |
| -1.704017386767368, | |
| 48.119899403843384 | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "Feature", | |
| "properties": { | |
| "full_id": "w81216546", | |
| "osm_id": 81216546, | |
| "name": "way" | |
| }, | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [ | |
| -1.70323955, | |
| 48.11784655 | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "Feature", | |
| "properties": { | |
| "full_id": "w81216549", | |
| "osm_id": 81216549, | |
| "name": "way" | |
| }, | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [ | |
| -1.702290177702228, | |
| 48.11978953879256 | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "Feature", | |
| "properties": { | |
| "full_id": "w81216386", | |
| "osm_id": 81216386, | |
| "name": "way" | |
| }, | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [ | |
| -1.703317739548226, | |
| 48.11775022379483 | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "Feature", | |
| "properties": { | |
| "full_id": "w81216387", | |
| "osm_id": 81216387, | |
| "name": "way" | |
| }, | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [ | |
| -1.703478244967156, | |
| 48.11850887197555 | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "Feature", | |
| "properties": { | |
| "full_id": "w81216763", | |
| "osm_id": 81216763, | |
| "name": "way" | |
| }, | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [ | |
| -1.702567157273616, | |
| 48.11989320208812 | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "Feature", | |
| "properties": { | |
| "full_id": "w353210792", | |
| "osm_id": 353210792, | |
| "name": "way" | |
| }, | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [ | |
| -1.700874057493016, | |
| 48.11825292665532 | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "Feature", | |
| "properties": { | |
| "full_id": "w377055218", | |
| "osm_id": 377055218, | |
| "name": "way" | |
| }, | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [ | |
| -1.703600753647069, | |
| 48.119546786667584 | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "Feature", | |
| "properties": { | |
| "full_id": "w81216404", | |
| "osm_id": 81216404, | |
| "name": "way" | |
| }, | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [ | |
| -1.701771133291328, | |
| 48.11893688449117 | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "Feature", | |
| "properties": { | |
| "full_id": "w377120345", | |
| "osm_id": 377120345, | |
| "name": "way" | |
| }, | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [ | |
| -1.703076218749357, | |
| 48.120084735719566 | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "Feature", | |
| "properties": { | |
| "full_id": "w377446991", | |
| "osm_id": 377446991, | |
| "name": "way" | |
| }, | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [ | |
| -1.701715004653615, | |
| 48.11973266053334 | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "Feature", | |
| "properties": { | |
| "full_id": "w377446993", | |
| "osm_id": 377446993, | |
| "name": "way" | |
| }, | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [ | |
| -1.702090915541171, | |
| 48.12012738431449 | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "Feature", | |
| "properties": { | |
| "full_id": "w399122723", | |
| "osm_id": 399122723, | |
| "name": "way" | |
| }, | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [ | |
| -1.704050950464091, | |
| 48.12027648018863 | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "Feature", | |
| "properties": { | |
| "full_id": "w400856427", | |
| "osm_id": 400856427, | |
| "name": "way" | |
| }, | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [ | |
| -1.703324307923998, | |
| 48.120663171641716 | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "Feature", | |
| "properties": { | |
| "full_id": "w401735048", | |
| "osm_id": 401735048, | |
| "name": "way" | |
| }, | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [ | |
| -1.702580520208293, | |
| 48.118478564924985 | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "Feature", | |
| "properties": { | |
| "full_id": "w456378782", | |
| "osm_id": 456378782, | |
| "name": "way" | |
| }, | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [ | |
| -1.702476925069036, | |
| 48.11862509336109 | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "Feature", | |
| "properties": { | |
| "full_id": "w456378783", | |
| "osm_id": 456378783, | |
| "name": "way" | |
| }, | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [ | |
| -1.702517292876281, | |
| 48.118251824833166 | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "Feature", | |
| "properties": { | |
| "full_id": "w173206894", | |
| "osm_id": 173206894, | |
| "name": "way" | |
| }, | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [ | |
| -1.703978556408234, | |
| 48.12073929542416 | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "Feature", | |
| "properties": { | |
| "full_id": "w81216629", | |
| "osm_id": 81216629, | |
| "name": "way" | |
| }, | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [ | |
| -1.699460981428251, | |
| 48.11962283439005 | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "Feature", | |
| "properties": { | |
| "full_id": "w173206897", | |
| "osm_id": 173206897, | |
| "name": "way" | |
| }, | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [ | |
| -1.700347807610862, | |
| 48.11957079707403 | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "Feature", | |
| "properties": { | |
| "full_id": "w173213949", | |
| "osm_id": 173213949, | |
| "name": "way" | |
| }, | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [ | |
| -1.7031123464323, | |
| 48.11823087908469 | |
| ] | |
| } | |
| }, | |
| { | |
| "type": "Feature", | |
| "properties": { | |
| "full_id": "w173213953", | |
| "osm_id": 173213953, | |
| "name": "way" | |
| }, | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [ | |
| -1.702724022946864, | |
| 48.11770908326065 | |
| ] | |
| } | |
| } | |
| ] | |
| }; | |
| // APPEL DE LA CARTE | |
| map.on('load', function (e) { | |
| // Add the data to your map as a layer | |
| map.addLayer({ | |
| "id": "locations", | |
| "type": "symbol", | |
| // Add a GeoJSON source containing place coordinates and information. | |
| "source": { | |
| "type": "geojson", | |
| "data": stores | |
| } | |
| }); | |
| // Ajout batiments | |
| map.addSource('Batiments', { | |
| type: 'vector', | |
| url: 'mapbox://ninanoun.3nke6sl7'}); | |
| // Extrusion batiments | |
| map.addLayer({ | |
| 'id': 'Batiments', | |
| 'type': 'fill-extrusion', | |
| 'source': 'Batiments', | |
| 'source-layer': 'batirennes2-1aq4sg', | |
| 'layout': {'visibility': 'visible'}, | |
| 'paint': {'fill-extrusion-color': '#7575a3', | |
| 'fill-extrusion-height': [ | |
| "interpolate", ["linear"], ["zoom"], | |
| 15, 0, | |
| 15.05, ["get", "hauteur"]], | |
| 'fill-extrusion-base': [ | |
| "interpolate", ["linear"], ["zoom"], | |
| 15, 0, | |
| 15.05, ["get", "min_height"] | |
| ], | |
| 'fill-extrusion-opacity': .8} | |
| }); | |
| // Initialize the list | |
| buildLocationList(stores); | |
| }); | |
| // Configuration Pop-up | |
| map.on('click', function(e) { | |
| var features = map.queryRenderedFeatures(e.point, { | |
| layers: ['locations'] | |
| }); | |
| if (features.length) { | |
| var clickedPoint = features[0]; | |
| // 1. Fly to the point | |
| flyToStore(clickedPoint); | |
| // 2. Close all other popups and display popup for clicked store | |
| createPopUp(clickedPoint); | |
| // 3. Highlight listing in sidebar (and remove highlight for all other listings) | |
| var activeItem = document.getElementsByClassName('active'); | |
| if (activeItem[0]) { | |
| activeItem[0].classList.remove('active'); | |
| } | |
| var selectedFeature = clickedPoint.properties.full_id; | |
| for (var i = 0; i < stores.features.length; i++ ) { | |
| if (stores.features[i].properties.full_id === selectedFeature) { | |
| selectedFeatureIndex = i; | |
| } | |
| } | |
| var listing = document.getElementById('listing-' + selectedFeatureIndex); | |
| listing.classList.add('active'); | |
| } | |
| }); | |
| function flyToStore(currentFeature) { | |
| map.flyTo({ | |
| center: currentFeature.geometry.coordinates, | |
| zoom: 17 | |
| }); | |
| } | |
| function createPopUp(currentFeature) { | |
| var popUps = document.getElementsByClassName('mapboxgl-popup'); | |
| if (popUps[0]) popUps[0].remove(); | |
| var popup = new mapboxgl.Popup({closeOnClick: false}) | |
| .setLngLat(currentFeature.geometry.coordinates) | |
| .setHTML('<h3>' + currentFeature.properties.full_id + '</h3>'+ | |
| '<h4>' + currentFeature.properties.population + 'full_id</h4>') | |
| .addTo(map); | |
| } | |
| // Configuration listing | |
| function buildLocationList(data) { | |
| for (i = 0; i < data.features.length; i++) { | |
| // Create an array of all the stores and their properties | |
| var currentFeature = data.features[i]; | |
| // Shorten data.feature.properties to just `prop` so we're not | |
| // writing this long form over and over again. | |
| var prop = currentFeature.properties; | |
| // Select the listing container in the HTML | |
| var listings = document.getElementById('listings'); | |
| // Append a div with the class 'item' for each store | |
| var listing = listings.appendChild(document.createElement('div')); | |
| listing.className = 'item'; | |
| listing.id = "listing-" + i; | |
| // Create a new link with the class 'title' for each store | |
| // and fill it with the store address | |
| var link = listing.appendChild(document.createElement('a')); | |
| link.href = '#'; | |
| link.className = 'title'; | |
| link.dataPosition = i; | |
| link.innerHTML = 'Batiment - ' + prop.osm_id; | |
| // Create a new div with the class 'details' for each store | |
| // and fill it with the city and phone number | |
| var details = listing.appendChild(document.createElement('div')); | |
| details.innerHTML = 'ID OSM / '+ prop.full_id ; | |
| if (prop.name) { | |
| details.innerHTML += ' · ' + prop.name + ' Géometrie OSM'; | |
| } | |
| link.addEventListener('click', function(e) { | |
| // Update the currentFeature to the store associated with the clicked link | |
| var clickedListing = data.features[this.dataPosition]; | |
| // 1. Fly to the point associated with the clicked link | |
| flyToStore(clickedListing); | |
| // 2. Close all other popups and display popup for clicked store | |
| createPopUp(clickedListing); | |
| // 3. Highlight listing in sidebar (and remove highlight for all other listings) | |
| var activeItem = document.getElementsByClassName('active'); | |
| if (activeItem[0]) { | |
| activeItem[0].classList.remove('active'); | |
| } | |
| this.parentNode.classList.add('active'); | |
| }); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment