JSFiddle - React, Tailwind, and code Playground

by Kyle Pennell

HTML

<title>appending Geojson to list</title>
<div id=output />

<div class="row">
      <div class="col-md-4 col-md-offset-1 side-list">
     
        <div class="list-group" id="listings">
          <ul class="list-group-container">
       

            <button class="list-group-item">title <p class="address">address</p></button>
            <div id="{{count}}" class="collapse">
                <div class="details">test details </div>

CSS

#map {
    height: 500px;  
}

/* 0.1 */

.leaflet-popup-content-wrapper {
	box-shadow: none;
	-webkit-border-radius: 0px;
	border-radius: 5px;
	padding: 0px;
}

.leaflet-popup-content {
	margin: 0px;
	box-shadow: 0 3px 14px rgba(0,0,0,0.3);
}

.popHead {
	color: #ffffff;
	background-color: #428bca;
	padding: 20px 10px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	text-align: center;
}

div.metadata {
	padding: 20px 10px 5px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	color: #555;
	font-size: 11px;
}

div.leaflet-popup-content .btn-xs {
	color: #555;
	font-size: 11px;
	margin-bottom: 10px;
}

.collapsing {
}


/****** NEW NAVBAR ******/




div.reveal {
	padding: 10px;
	margin-bottom: -1px;
	background-color: #fff;
	border-radius: 5px;
	box-shadow: 0 0 3px 0 rgba(0,0,0,0.5);
	background: #FAF7F5;
}

div.flag {
	z-index: 2;
}

div.flag.fixed {
	position: fixed;
}

div.flag > .point-counter {
	background: #000;
	border: none;
	border-top: 1px solid #222;
	color: #eee;
	font-size: 10px;
	font-weight: normal;
}











/**** The above is strictly for mapping ***/
.col-md-3, .col-md-12 {
	padding: 0px;
}

.row {
	margin: 0px;
}



h2.home {
	padding-left: 15px;
}


.details {
	padding: 15px;
}

div.details {
	background-color: #fff;
	font-size: 12px;
}

.info {
	float: right;
}

.details:last-child {
}

.main-content .col-md-3.revealed {
	padding: 0 15px;
}





img.sidebar {
	max-width: 15%;
	height: auto;
	border-radius: 5px;
	border: 1px solid #fefefe;
}



html, body {
    height: 100%;
}
body {
	padding-top: 5px;
}

.col-md-12 {
	min-width: 100px;
	width: 25%;
}

#map-container {
	min-height: 100%;
	height: 100%;
	overflow: visible;
	position: fixed;
	z-index: 1;
	width: 100%;
}
#map {
    min-height: 100%;
    position: relative;
}

div.side-list {
	position: relative;
	z-index: 2;
	padding: 0;
}


.list-group {
	margin-bottom: 0px;
	padding: 5px;
	background: #eee;
	background: rgba(0, 0, 0, 0.2);
}

.heading-content...

JavaScript

var data = {
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": ["-96.7587967", "17.1174164"]
        },
        "properties": {
            "Date": "Nov 1",
            "Location": "Oaxaca Panteon",
            "Terrain": "City",
            "Difficulty": "Easy"
        }
    }, {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": ["-97.1377792", "17.6514606"]
        },
        "properties": {
            "Date": "3/4/2014",
            "Location": "Apoala",
            "Terrain": "Countryside",
            "Difficulty": "Difficult"
        }
    }, {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": ["-96.7701721", "17.0921402"]
        },
        "properties": {
            "Date": "Dec 13",
            "Location": "Atzompa",
            "Terrain": "Archeological",
            "Difficulty": "Moderate"
        }
    }, {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": ["-97.6729431", "16.2861195"]
        },
        "properties": {
            "Date": "Dec 20",
            "Location": "La Cumbre",
            "Terrain": "Mountain",
            "Difficulty": "Moderate"
        }
    }, {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": ["-95.4574127", "16.4325542"]
        },
        "properties": {
            "Date": "Dec 27",
            "Location": "Jalapa del Valle ",
            "Terrain": "Countryside",
            "Difficulty": "Easy"
        }
    }, {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": ["-96.7611008", "17.1459007"]
        },
        "properties": {
            "Date": "Dec 6",
            "Location": " San Pablo Etla  ",
            "Terrain": "Countryside",
 ...