JSFiddle - React, Tailwind, and code Playground

by abubelinha

HTML

<div id="map" style="width: 600px; height: 400px"></div>
<script src="http://leafletjs.com/examples/sample-geojson.js" type="text/javascript"></script>
    <script src="http://light.hol.es/mapaCampusLugo/veg_ind_cutre.geojson"></script>
    <script src="http://leafletjs.com/dist/leaflet.js"></script>
    <script>
        var map = L.map('map').setView([42.9925, -7.547], 16);

        L.tileLayer('http://{s}.tile.cloudmade.com/{key}/22677/256/{z}/{x}/{y}.png', {
            attribution: 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2012 CloudMade',
            key: 'BC9A493B41014CAABB98F0471D759707'
        }).addTo(map);

        var baseballIcon = L.icon({
            iconUrl: 'http://leafletjs.com/examples/baseball-marker.png',
            iconSize: [32, 37],
            iconAnchor: [16, 37],
            popupAnchor: [0, -28]
        });

        function onEachFeature(feature, layer) {
                layer.on('click', function(e) { alert('I want to show this feature id: ' + feature.id); });
            var popupContent = "";

            if (feature.properties && feature.properties.popupContent) {
                popupContent += feature.properties.popupContent;
            }

            layer.bindPopup(popupContent);
        }

        L.geoJson([bicycleRental, veg_ind, campus], {

            style: function (feature) {
                return feature.properties && feature.properties.style;
            },

            onEachFeature: onEachFeature,

            pointToLayer: function (feature, latlng) {
                return L.circleMarker(latlng, {
                    radius: 8,
                    fillColor: "#ff7800",
                    color: "#000",
                    weight: 1,
                    opacity: 1,
                    fillOpacity: 0.8
                });
            }
        }).addTo(map);

        L.geoJson(freeBus, {

            filter: function (feature, layer) {
                if (feature.properties) {
           ...

CSS

</style>
<!-- access to the HEAD element -->
    <link rel="stylesheet" href="http://leafletjs.com/dist/leaflet.css" />
    <!--[if lte IE 8]><link rel="stylesheet" href="http://leafletjs.com/dist/leaflet.ie.css" /><![endif]-->
<style>