JSFiddle - React, Tailwind, and code Playground

by denvut

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.css">
<div class="navbar navbar-inverse navbar-fixed-top"></div>
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12">
            <ul class="nav nav-tabs" id="myTab">
                <li class="active"><a href="#home" data-toggle="tab">Home</a>

                </li>
                <li><a href="#maptab" data-toggle="tab">Map</a>

                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="home">Welcome under the home tab</div>
                <div class="tab-pane" id="maptab">
                    <div id="map"></div>
                </div>
            </div>
        </div>
    </div>
    <hr>
    <footer>
        <p>&copy; Company 2013</p>
    </footer>

CSS

#map {
    height: 300px;
    width: auto;
}

JavaScript

$(window).load(function () {
    var map = L.map('map');

    // add an OpenStreetMap tile layer
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    var geojsonFeature = {
        "type": "FeatureCollection",
            "features": [{
            "type": "Feature",
                "geometry": {
                "type": "Polygon",
                    "coordinates": [
                    [
                        [143.403004, -37.487012],
                        [143.412119, -37.488204],
                        [143.413639, -37.481034],
                        [143.411498, -37.48075],
                        [143.409571, -37.480494],
                        [143.406653, -37.480106],
                        [143.404485, -37.479818],
                        [143.404484, -37.479819],
                        [143.403004, -37.487012]
                    ]
                ]
            },
                "properties": {
                "Id": 26
            }
        }]
    };

    var myLayer = L.geoJson().addTo(map);
    myLayer.addData(geojsonFeature);
    var bounds = myLayer.getBounds();

    map.fitBounds(bounds);


});